Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use the lodop.js print control to print table and paging, I hope you will get something after reading this article, let's discuss it together!

Use lodop.js print control to print table and page, etc. Import {getLodop} from'@ / utils/LodopFuncs.js'// print form export default {/ num print or print preview conData object form pass in the required value customization (self-added attributes to be noted below) / / conData title title OrgName office name lodopTable:function (num ConData) {/ / original 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 / / the child element for of the circular tbody (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 = Eel [XSS _ clean]} return con}}

LodopTable.js

Download lodop.js on the official website

Set the global in min.js

Import lodopTable from'. / utils/lodopTable'

Vue.prototype.$lodopTable = lodopTable

Find the form that needs to be printed on the page that needs to be called and add class tablePrin.

Add a paragraph to the end

5. Add this code to the methods, title defines the OrgName itself, and it's more practical to change num 0 for print 1 for print preview.

LodopTable (num) {

This.$lodopTable.lodopTable (num, {

"title": "workload Daily"

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

})

}

After reading this article, I believe you have a certain understanding of "how to use lodop.js print control to print table and page". If you want to know more about it, welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.