在elementUI-admin中使用printjs进行打印功能的处理

1.需要加入依赖

npm install print-js --save-dev

2.通过数据的处理打印表格（推荐）

在utils文件夹下创建print.js文件

import printJS from "print-js"; /**  *  * @param {  *      title:"", // 表名  *      serial：false, // 是否需要序号  *      data:[], // 要打印的数据  *      fields:[], // 需要打印的字段  *      properties:[ //可不传，不穿的话是默认打印出来表单中的所有信息  *          {  *              field:"字段名（对应fields）",  *              displayName:"打印时展示的中文表头名字",  *              columnSize:"定义列宽，用百分比来表示大小，可不传"  *          }  *      ],  * } args  *    */ function printJson(args = {}) {     let data = [];     for(const dataItem of args.data){         let dataObj = {}         let no = 0;         if (args.serial) {// 如果需要序列号则是列表index+1             dataObj.serial = no + 1         }         for(const element of args.fields){             if(typeof(dataItem[element.columItemName])==="boolean"){                 dataItem?dataObj[element.columItemName]="是":dataObj[element.columItemName]="否"//将布尔类型转换成字符串，方便直观的看到             }else{                 dataObj[element.columItemName] = dataItem[element.columItemName]             }         }         data.push(dataObj)     }     let properties = args.properties||[];     if(properties.length===0){//如果没传properties，就是默认所有表中信息         for(const prope of args.fields){             let propeObj = {}             propeObj["field"]=prope.columItemName             propeObj["displayName"]=prope.columItemLable             properties.push(propeObj)         }     }     if (args.serial) {         properties.unshift({             field: "serial",             displayName: "序号",         })     }     printJS({        printable: data,        properties: properties || [],        header: args.title || "",        // 样式设置        type: 'json',  // 打印的格式          gridStyle: 'border-bottom: 1px solid #000;text-align:center;padding:5px 0;', // 表格样式          gridHeaderStyle: 'border-bottom: 1px solid #000;border-top: 1px solid #000;text-align:center;padding:5px 0;',//表头样式        repeatTableHeader: false     }); }   export default {     printJson }

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

// 引入Print.js
import print from "@/utils/print";

// 放入vue原型中
Vue.prototype.printJson = print.printJson

最后在需要使用的页面中使用

<script>

......

methods: {
　billPrintClick(){//打印相关
　　this.printJson({
　　    title: this.templateName.slice(0, -2), // 打印出来的标题
　　　data: this.dataTable, // 需要打印的数据
　　　serial: true, // 是否需要打印序列号
　　　fields: this.tableColumList, // 需要打印的字段

      })
    },

}

......

</script>

3.直接打印网页的表格

<template>
<div class="resident-right">
// 需要打印的html片段设置一个id
<main id="printMain">
<div class="avatar">
// 打印时需要忽略的片段设置id
<div id="no-print">
<el-button type="primary" @click="printFun">打印</el-button>
</div>
</div>
</main>
</div>
</template>

<script>

import printJS from "print-js";

export default {

methods: {

printFun() {

printJS({

printable: "printMain", // 设置需要打印片段id

type: "html",

targetStyles: ["*"], // 需要保留的样式，*代表所有

ignoreElements: ["no-print"], // 需要忽略的元素，id集合 });

},

}

};

</script>

参考链接：https://blog.csdn.net/weixin_41931561/article/details/117987685