devbox
Gausst松鼠会
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue 封装print-js打印页面数据、页面样式_print-js样式

作者：Gausst松鼠会 | 2024-02-18 05:28:03

赞

踩

print-js样式
npm install print-js --save-dev

1、数据打印成表格

1、创建print.js用于封装

  1. import printJS from "print-js";
  2. /**
  3.  * 
  4.  * @param {
  5.  *      title:"", // 表名
  6.  *      serial：false, // 是否需要序号
  7.  *      data:[], // 要打印的数据
  8.  *      fields:[], // 需要打印的字段
  9.  *      properties:[
  10.  *          {
  11.  *              field:"字段名（对应fields）",
  12.  *              displayName:"打印时展示的中文表头名字",
  13.  *              columnSize:"定义列宽，用百分比来表示大小，可不传"
  14.  *          }
  15.  *      ],
  16.  * } args
  17.  *  
  18.  */
  19. function printJson(args = {}) {
  20.     let data = [];
  21.     for (let di = 0; di < args.data.length; di++) {
  22.         var obj = {}
  23.         // 如果需要序列号则是列表index+1
  24.         if (args.serial) {
  25.             obj.serial = di + 1
  26.         }
  27.         // 遍历需要打印的字段与列表字段一一对应，形成键值对
  28.         for (let fi = 0; fi < args.fields.length; fi++) {
  29.             obj[args.fields[fi]] = args.data[di][args.fields[fi]]
  30.         }
  31.         data.push(obj)
  32.     }
  33.     let properties = args.properties;
  34.     if (args.serial) {
  35.         properties.unshift({
  36.             field: "serial",
  37.             displayName: "序号",
  38.         })
  39.     }
  40.     printJS({
  41.        printable: data,
  42.        properties: properties || [],
  43.        header: args.title || "",
  44.        // 样式设置
  45.        type: 'json',  // 打印的格式  
  46.        gridStyle: 'border: 1px solid #000;text-align:center;padding:5px 0;', // 表格样式  
  47.        gridHeaderStyle: 'border: 1px solid #000;text-align:center;padding:5px 0;',//表头样式
  48.     });
  49. }
  50.  
  51. export default {
  52.     printJson
  53. }

2、在需要使用的地方引入print.js，下面是全局引入到main.js中

  1. import Vue from 'vue'
  2. import config from "./util/config";
  3. import App from './App'
  4. import router from './router'
  5. import store from './store'
  6. import ElementUI from 'element-ui'
  7. import 'video.js/dist/video-js.css'
  8. import 'element-ui/lib/theme-chalk/index.css'
  9. if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
  10. Vue.use(ElementUI)
  11.  
  12.  
  13. // 引入Print.js
  14. import print from "./util/print";
  15. // 放入vue原型中
  16. Vue.prototype.printJson = print.printJson;
  17.  
  18.  
  19. /* eslint-disable no-new */
  20. new Vue({
  21.   components: { App },
  22.   router,
  23.   store,
  24.   template: '<App/>'
  25. }).$mount('#app')

3、使用方法 

  1. <template>
  2.   <div class="fixed-page">
  3.     <main>
  4.         <div class="searchBox">
  5.           <div class="inputBox">
  6.             <el-button type="primary" @click="printFun">打 印</el-button>
  7.           </div>
  8.         </div>
  9.         <el-table
  10.             :data="tableData"
  11.             style="width: 100%"
  12.             height="250">
  13.             <el-table-column
  14.               fixed
  15.               prop="date"
  16.               label="日期"
  17.               width="150">
  18.             </el-table-column>
  19.             <el-table-column
  20.               prop="name"
  21.               label="姓名"
  22.               width="120">
  23.             </el-table-column>
  24.             <el-table-column
  25.               prop="province"
  26.               label="省份"
  27.               width="120">
  28.             </el-table-column>
  29.             <el-table-column
  30.               prop="city"
  31.               label="市区"
  32.               width="320">
  33.             </el-table-column>
  34.             <el-table-column
  35.               prop="address"
  36.               label="地址"
  37.               width="600">
  38.             </el-table-column>
  39.             <el-table-column
  40.               prop="zip"
  41.               label="邮编"
  42.               width="120">
  43.             </el-table-column>
  44.         </el-table>   
  45.     </main>
  46.   </div>
  47. </template>
  48.  
  49. <script>
  50. export default {
  51.   data() {
  52.     return {
  53.       tableData: [{
  54.           date: '2016-05-03',
  55.           name: '王小虎',
  56.           province: '上海',
  57.           city: '普陀区',
  58.           address: '上海市普陀区金沙江路 1518 弄',
  59.           zip: 200333
  60.         }, {
  61.           date: '2016-05-02',
  62.           name: '王小虎',
  63.           province: '上海',
  64.           city: '普陀区',
  65.           address: '上海市普陀区金沙江路 1518 弄',
  66.           zip: 200333
  67.         }, {
  68.           date: '2016-05-04',
  69.           name: '王小虎',
  70.           province: '上海',
  71.           city: '普陀区',
  72.           address: '上海市普陀区金沙江路 1518 弄',
  73.           zip: 200333
  74.         }, {
  75.           date: '2016-05-01',
  76.           name: '王小虎',
  77.           province: '上海',
  78.           city: '普陀区',
  79.           address: '上海市普陀区金沙江路 1518 弄',
  80.           zip: 200333
  81.         }, {
  82.           date: '2016-05-08',
  83.           name: '王小虎',
  84.           province: '上海',
  85.           city: '普陀区',
  86.           address: '上海市普陀区金沙江路 1518 弄',
  87.           zip: 200333
  88.         }, {
  89.           date: '2016-05-06',
  90.           name: '王小虎',
  91.           province: '上海',
  92.           city: '普陀区',
  93.           address: '上海市普陀区金沙江路 1518 弄',
  94.           zip: 200333
  95.         }, {
  96.           date: '2016-05-07',
  97.           name: '王小虎',
  98.           province: '上海',
  99.           city: '普陀区',
  100.           address: '上海市普陀区金沙江路 1518 弄',
  101.           zip: 200333
  102.         }]
  103.     };
  104.   },
  105.   mounted() {},
  106.   methods: {
  107.     printFun() {
  108.       this.printJson({
  109.         title: "收货地址",  // 打印出来的标题
  110.         data: this.tableData,  // 需要打印的数据
  111.         serial: false,  // 是否需要打印序列号
  112.         fields: [  // 需要打印的字段
  113.           "name",
  114.           "province",
  115.           "city",
  116.           "address",
  117.         ],
  118.         properties: [ // 需要打印的字段对应的表头名
  119.           {
  120.             field: "name",
  121.             displayName: "姓名",
  122.           },
  123.           {
  124.             field: "province",
  125.             displayName: "省份",
  126.           },
  127.           {
  128.             field: "city",
  129.             displayName: "城市",
  130.           },
  131.           {
  132.             field: "address",
  133.             displayName: "具体地址",
  134.           },
  135.         ],
  136.       });
  137.     },
  138.   }
  139. };
  140. </script>
  141.  
  142. <style lang="scss">
  143. </style>

2、页面打印

页面打印就是直接打印页面上的内容、包括图片，但是背景图片尝试打印后打印失败，所以将背景图片换成了img利用绝对定位当成背景图片，这样才可以完整的将背景图片打印下来，实现代码如下

  1. <template>
  2.   <div class="resident-right">
  3.    // 需要打印的html片段设置一个id
  4.     <main id="printMain">
  5.       <div class="infoBox">
  6.         <h1>基本信息</h1>
  7.         <section>
  8.           <cell-box
  9.             label="姓名"
  10.             :value="detail.name"
  11.             width="18%"
  12.           ></cell-box>
  13.           <cell-box
  14.             label="性别"
  15.             :value="detail.sexCN"
  16.             width="20%"
  17.           ></cell-box>
  18.           <cell-box
  19.             label="年龄"
  20.             :value="detail.age"
  21.             width="20%"
  22.           ></cell-box>
  23.           <cell-box
  24.             label="出生日期"
  25.             :value="detail.birthday"
  26.             width="40%"
  27.           ></cell-box>
  28.           <cell-box
  29.             label="身份证号码"
  30.             :value="detail.idCard"
  31.             width="38%"
  32.           ></cell-box>
  33.           <cell-box
  34.             label="手机"
  35.             :value="detail.mobilePhone"
  36.             width="25%"
  37.           ></cell-box>
  38.           <cell-box
  39.             label="座机"
  40.             :value="detail.telephone"
  41.             width="20%"
  42.           ></cell-box>
  43.           <cell-box
  44.             label="血型"
  45.             :value="detail.bloodGroup"
  46.             width="25%"
  47.           ></cell-box>
  48.         </section>
  49.       </div>
  50.       <div class="avatar">
  51.         <img :src="detail.image" alt="" />
  52.          // 打印时需要忽略的片段设置id
  53.         <div id="no-print">
  54.           <el-button type="primary" @click="printFun">打印</el-button>
  55.         </div>
  56.       </div>
  57.     </main>
  58.   </div>
  59. </template>
  60.  
  61. <script>
  62. import printJS from "print-js";
  63. export default {
  64.   props: ["detail"],
  65.   methods: {
  66.     printFun() {
  67.       printJS({ 
  68.         printable: "printMain",   // 设置需要打印片段id
  69.         type: "html",
  70.         targetStyles: ["*"],  // 需要保留的样式，*代表所有
  71.         ignoreElements: ["no-print"],  // 需要忽略的元素，id集合
  72.       });
  73.     },
  74.   }
  75. };
  76. </script>
  77.  
  78. <style lang="scss" scoped>
  79. .resident-right {
  80.   width: calc(100% - 250px);
  81.   height: 100%;
  82. }
  83. main {
  84.   height: calc(100% - 40px);
  85.   padding: 10px;
  86.   display: flex;
  87.   justify-content: space-between;
  88. }
  89. .infoBox {
  90.   width: calc(100% - 120px);
  91. }
  92. .avatar {
  93.   width: 110px;
  94.   height: 500px;
  95.   display: flex;
  96.   flex-direction: column;
  97.   align-items: center;
  98.   .el-button {
  99.     padding: 0;
  100.     margin-top: 10px;
  101.   }
  102. }
  103. .avatar img {
  104.   width: 100%;
  105. }
  106. .infoBox h1 {
  107.   font-size: 16px;
  108.   text-align: center;
  109.   margin: 0 0 10px;
  110.   line-height: 25px;
  111.   background-color: #cccccc;
  112. }
  113. .infoBox section {
  114.   display: flex;
  115.   flex-wrap: wrap;
  116.   padding: 0 0 10px;
  117. }
  118. </style>

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/105182
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号