使用lodop.js列印控制元件列印table並分頁等
阿新 • • 發佈:2019-10-15
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
- 在min.js設定全域性
import lodopTable from './utils/lodopTable'
Vue.prototype.$lodopTable = lodopTable
- 在需要呼叫的頁面 找到需要列印的那個表格 新增class tablePrin
- 新增一下段落到最後面
<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
})
&nbs