526互联

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

发布时间 2023-06-05 10:00:02作者: 妞妞猪

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