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

创新互联建站是一家朝气蓬勃的网站建设公司。公司专注于为企业提供信息化建设解决方案。从事网站开发，网站制作，网站设计，网站模板，微信公众号开发，软件开发，微信小程序开发，10多年建站对成都自上料搅拌车等多个方面，拥有多年的网站推广经验。

使用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].innerHTML = 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].innerHTML);
        
        //创建页码 每页都有
        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.innerHTML
        }
        
        return con
    }
}

lodopTable.js

官网下载lodop.js

1. 在min.js设置全局

import lodopTable from './utils/lodopTable'

Vue.prototype.$lodopTable = lodopTable

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

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