如何使用lodop.js打印控件打印table并分页

小编给大家分享一下如何使用lodop.js打印控件打印table并分页，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

使用lodop.js打印控件打印table并分页等

import {getLodop} from '@/utils/LodopFuncs.js'//打印表格export default{    // num 打印还是打印预览 conData 对象形式 传入需要的值 自定义 (自己添加的属性要在下面备注)    // conData  title 标题  OrgName科室名字    lodopTable:function(num,conData){        //原始table        var table = document.getElementsByClassName("tablePrin")[0]        var thead = table.getElementsByTagName("thead")[0]        var tbody = table.getElementsByTagName("tbody")[0]        var clnThead = thead.cloneNode(true)        var clnTbody = tbody.cloneNode(true)        document.getElementsByClassName("colneTable")[0].appendChild(clnThead)        document.getElementsByClassName("colneTable")[0].appendChild(clnTbody)        var printTable = document.getElementsByClassName("printTable")[0]        var printTableTbody = printTable.getElementsByTagName("tbody")[0]        var tbodyChild = printTableTbody.children        // 循环tbody的子元素        for (let i = 0; i < tbodyChild.length; i++) {            var tbodyTrChild = tbodyChild[i].children            //循环tbody子元素的子元素            for (let a = 0; a < tbodyTrChild.length; a++) {                // let tbodyTrChildSpan = tbodyTrChild[a].getElementsByTagName("span")                let text                                text = this.xhTbodySpan(tbodyTrChild[a])                                tbodyTrChild[a][xss_clean] = text                tbodyTrChild[a].style = "text-align:center;width:80px;word-break: break-all;padding:5px 0;font-size:15px;font-style:normal"            }        }                LODOP = getLodop()        LODOP.PRINT_INIT("");        LODOP.SET_PRINT_PAGESIZE(2, 0, 0, "A4"); //1竖版 2横版        LODOP.SET_PRINT_MODE("FULL_WIDTH_FOR_OVERFLOW", true); //宽度溢出缩放                //创建表格打印 表头自动每页都有        LODOP.ADD_PRINT_TABLE(40,10,"RightMargin:0.9cm",600,document.getElementsByClassName("printTable")[0][xss_clean]);                //创建页码 每页都有        LODOP.ADD_PRINT_TEXT("98%", "90%", 200, 22, "第#页/共&页");        LODOP.SET_PRINT_STYLEA(0,"FontSize",10);        //2代表页码类型 1代表其他类型 每页都显示必须函数        //标题        LODOP.SET_PRINT_STYLEA(0, "ItemType", 2);        LODOP.ADD_PRINT_TEXT(10, 400, 300, 100, `${conData.title}`);        LODOP.SET_PRINT_STYLEA(0,"FontSize",16);        LODOP.SET_PRINT_STYLEA(0, "ItemType", 1);        //科室        LODOP.ADD_PRINT_TEXT(10, 10, 300, 100, `科室:${conData.OrgName}`);        LODOP.SET_PRINT_STYLEA(0,"FontSize",16);        LODOP.SET_PRINT_STYLEA(0, "ItemType", 1);        // LODOP.ADD_PRINT_TEXT('97%', 10, '100%', 100, `病区护士长:${this.noteForm.HeadNurseName}  灭火:${this.noteForm.FireFight}  报告:${this.noteForm.Presentation}  疏散:${this.noteForm.Evacuate}`);        LODOP.SET_PRINT_STYLEA(0,"FontSize",14);        LODOP.SET_PRINT_STYLEA(0, "ItemType", 1);        if(num){            LODOP.PREVIEW();        }else{            LODOP.PRINT();        }        location.reload();    },    //遍历子元素直到最后一个子元素    xhTbodySpan:function (ele) {        let con        let eleChild = ele.children        if (eleChild.length > 0) {            return this.xhTbodySpan(eleChild[0])        } else {            con = ele[xss_clean]        }                return con    }}

lodopTable.js

官网下载lodop.js

1. 在min.js设置全局

import lodopTable from './utils/lodopTable'

Vue.prototype.$lodopTable = lodopTable

1. 在需要调用的页面 找到需要打印的那个表格 添加class tablePrin

2. 添加一下段落到最后面

5.在methods中加上这段代码 title自己定义 OrgName更加实际情况改变 num 0代表打印 1代表打印预览

lodopTable(num){

this.$lodopTable.lodopTable(num,{

"title":"工作量日报",

"OrgName":this.$cookies.get("orgInfo").OrgName

})

},

看完了这篇文章，相信你对"如何使用lodop.js打印控件打印table并分页"有了一定的了解，如果想了解更多相关知识，欢迎关注行业资讯频道，感谢各位的阅读！