使用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

      })

    },