vue-print 实现打印功能(vue实现打印)

vue-print 实现打印功能 目录一、安装1. Vue22. Vue3二、基本使用1. 直接打印页面HTML2. 个性化设置3. 打印URL三、API一、安装1. Vue2npm install vue-print-nb --saveimport Print from 'vue-print-nb'// Global instruction Vue.use(Print);//or// Local instructionimport print from 'vue-print-nb'directives: { print }2. Vue3npm install vue3-print-nb --save// Global instruction import { createApp } from 'vue'import App from './App.vue'import print from 'vue3-print-nb'const app = createApp(App)app.use(print)app.mount('#app')//or// Local instructionimport print from 'vue3-print-nb'directives: { print }二、基本使用1. 直接打印页面HTML

推荐整理分享vue-print 实现打印功能(vue实现打印)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue实现打印功能的两种方法,vue-print-nb-jeecg,vue-easy-print,vue实现打印功能的两种方法,vue-print-nb遇到的坑,vue-print-nb-jeecg,vue-print-nb,vue-print-nb-jeecg,内容如对您有帮助，希望把文章链接给更多的朋友！

1）方法 ① 给要打印的部分设置一个 id ② 在打印按钮中添加 v-print="'#id名'"

2）代码（以表格为例）

<template> <div> <a-button v-print="'#printMe'">打印</a-button> <a-table :columns="columns" :data-source="data" bordered id="printMe"> </a-table> </div></template><script>const columns = [ { title: 'Name', dataIndex: 'name', }, { title: 'Cash Assets', className: 'column-money', dataIndex: 'money', }, { title: 'Address', dataIndex: 'address', },];const data = [ { key: '1', name: 'John Brown', money: '￥300,000.00', address: 'New York No. 1 Lake Park', }, { key: '2', name: 'Jim Green', money: '￥1,256,000.00', address: 'London No. 1 Lake Park', }, { key: '3', name: 'Joe Black', money: '￥120,000.00', address: 'Sidney No. 1 Lake Park', },];export default { data() { return { data, columns, }; },};</script>2. 个性化设置

1）方法 打印按钮的 v-print 绑定一个对象 2）代码

<template> <div class="box"> <a-table :columns="columns" :data-source="data" bordered id="printMe"></a-table> <a-button v-print="printContent" class="btn no-print">打印</a-button> </div></template><script>const columns = [ { title: 'Name', dataIndex: 'name', }, { title: 'Cash Assets', className: 'column-money', dataIndex: 'money', }, { title: 'Address', dataIndex: 'address', },];const data = [ { key: '1', name: 'John Brown', money: '￥300,000.00', address: 'New York No. 1 Lake Park', }, { key: '2', name: 'Jim Green', money: '￥1,256,000.00', address: 'London No. 1 Lake Park', }, { key: '3', name: 'Joe Black', money: '￥120,000.00', address: 'Sidney No. 1 Lake Park', },];export default { data() { return { data, columns, tableHead: '测试表格', printContent: { id: "printMe", // 打印的区域 preview: false, // 预览工具是否启用 previewTitle: '这是预览标题', // 预览页面的标题 popTitle: '', // 打印页面的页眉 extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css", extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>', previewBeforeOpenCallback() { console.log('正在加载预览窗口') }, previewOpenCallback() { console.log('已经加载完预览窗口') }, beforeOpenCallback(vue) { vue.printLoading = true console.log('打开之前') }, openCallback(vue) { vue.printLoading = false console.log('执行了打印') }, closeCallback() { console.log('关闭了打印工具') }, clickMounted(vue){ console.log('点击了打印按钮'); vue.printContent.popTitle = vue.tableHead // 动态设置页眉 } } } }};</script>

3）效果展示 ① 预览工具

3. 打印URL

1）方法 ① 给 打印按钮的 v-print 绑定一个对象 ② 对象添加 url 属性

2）代码

<template> <div class="box"> <a-table :columns="columns" :data-source="data" bordered></a-table> <a-button v-print="printContent" class="btn no-print" >打印</a-button> </div></template><script>const columns = [ { title: 'Name', dataIndex: 'name', }, { title: 'Cash Assets', className: 'column-money', dataIndex: 'money', }, { title: 'Address', dataIndex: 'address', },];const data = [ { key: '1', name: 'John Brown', money: '￥300,000.00', address: 'New York No. 1 Lake Park', }, { key: '2', name: 'Jim Green', money: '￥1,256,000.00', address: 'London No. 1 Lake Park', }, { key: '3', name: 'Joe Black', money: '￥120,000.00', address: 'Sidney No. 1 Lake Park', },];export default { data() { return { data, columns, tableHead: '测试表格', printContent: { url: 'http://localhost:8081/', // 打印的url preview: false, // 预览工具是否启用 previewTitle: '这是预览标题', popTitle: '', // 打印页面的页眉 extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css", extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>', } } },};</script>三、APIParameExplainTypeOptionalValueDefaultValueidRange print ID, required valueString––standardDocument type (Print local range only)Stringhtml5/loose/stricthtml5extraHeadAdd DOM nodes in the node, and separate multiple nodes with , (Print local range only)String––extraCss New CSS style sheet , and separate multiple nodes with ,(Print local range only)String––popTitle Content of label (Print local range only)String––openCallbackCall the successful callback function of the printing toolFunctionReturns the instance of Vue called at that time–closeCallbackClose the callback function of printing tool successFunctionReturns the instance of Vue called at that time–beforeOpenCallbackCallback function before calling printing toolFunctionReturns the instance of Vue called at that time–urlPrint the specified URL. (It is not allowed to set the ID at the same time)String––asyncUrlReturn URL through ‘resolve()’ and VueFunction––previewPreview toolBoolean–falsepreviewTitlePreview tool TitleString–‘打印预览’previewPrintBtnLabelThe name of the preview tool buttonString–‘打印’zIndexCSS of preview tool: z-indexString,Number–20002previewBeforeOpenCallbackCallback function before starting preview toolFunctionReturns the instance of Vue–previewOpenCallbackCallback function after fully opening preview toolFunctionReturns the instance of Vue–clickMountedClick the callback function of the print buttonFunctionReturns the instance of Vue–