vue-print 实现打印功能
vue 2023-10-31 10:29:37

1、安装插件

npm install vue-print-nb --save

## yarn

yarn add vue-print-nb

 

vue3安装：

npm install vue3-print-nb --save

## yarn

yarn add vue3-print-nb

 

2、使用

直接打印页面HTML

1）方法

① 给要打印的部分设置一个 id

② 在打印按钮中添加 v-print="'#id名'"

2）代码（以表格为例）

XML/HTML Code复制内容到剪贴板
  1. <template>  
  2.   <div class="box">  
  3.     <a-table :columns="columns" :data-source="data" bordered id="printMe"></a-table>  
  4.     <a-button v-print="printContent" class="btn no-print">打印</a-button>  
  5.   </div>  
  6. </template>  
  7. <script>  
  8. const columns = [  
  9.   {  
  10.     title: 'Name',  
  11.     dataIndex: 'name',  
  12.   },  
  13.   {  
  14.     title: 'Cash Assets',  
  15.     className: 'column-money',  
  16.     dataIndex: 'money',  
  17.   },  
  18.   {  
  19.     title: 'Address',  
  20.     dataIndex: 'address',  
  21.   },  
  22. ];  
  23.   
  24. const data = [  
  25.   {  
  26.     key: '1',  
  27.     name: 'John Brown',  
  28.     money: '￥300,000.00',  
  29.     address: 'New York No. 1 Lake Park',  
  30.   },  
  31.   {  
  32.     key: '2',  
  33.     name: 'Jim Green',  
  34.     money: '￥1,256,000.00',  
  35.     address: 'London No. 1 Lake Park',  
  36.   },  
  37.   {  
  38.     key: '3',  
  39.     name: 'Joe Black',  
  40.     money: '￥120,000.00',  
  41.     address: 'Sidney No. 1 Lake Park',  
  42.   },  
  43. ];  
  44.   
  45. export default {  
  46.   data() {  
  47.     return {  
  48.       data,  
  49.       columns,  
  50.       tableHead: '测试表格',  
  51.       printContent: {  
  52.         id: "printMe", // 打印的区域  
  53.         preview: false, // 预览工具是否启用  
  54.         previewTitle: '这是预览标题', // 预览页面的标题  
  55.         popTitle: '', // 打印页面的页眉  
  56.         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",  
  57.         extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',  
  58.         previewBeforeOpenCallback() {  
  59.           console.log('正在加载预览窗口')  
  60.         },  
  61.         previewOpenCallback() {  
  62.           console.log('已经加载完预览窗口')  
  63.         },  
  64.         beforeOpenCallback(vue) {  
  65.           vue.printLoading = true  
  66.           console.log('打开之前')  
  67.         },  
  68.         openCallback(vue) {  
  69.           vue.printLoading = false  
  70.           console.log('执行了打印')  
  71.         },  
  72.         closeCallback() {  
  73.           console.log('关闭了打印工具')  
  74.         },  
  75.         clickMounted(vue){  
  76.           console.log('点击了打印按钮');  
  77.           vuevue.printContent.popTitle = vue.tableHead // 动态设置页眉  
  78.         }  
  79.       }  
  80.     }  
  81.   }  
  82. };  
  83. </script>  


 

本文来自于：http://www.yoyo88.cn/study/vue/697.html

上一篇 vue xlsx 数据导出
下一篇 ant design modal自定义footer
相关的文章
Powered by yoyo苏ICP备15045725号