使用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. 添加一下段落到最后面

 <div class="printTable" hidden>

      <table class="colneTable" border="1" width="100%" cellspacing="0" cellpadding="0" style="border-collapse:collapse" bordercolor="#000000"></table>

    </div>

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

lodopTable(num){

      this.$lodopTable.lodopTable(num,{

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

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

      })

    },

原文链接:https://www.cnblogs.com/hprBlog/p/11676184.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有