在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 = []

　let no = 0　

for(const dataItem of args.data){

let dataObj = {}

let no = 0;

if (args.serial) {// 如果需要序列号则是列表index+1

dataObj.serial = no + 1

no++

}

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>