重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
小编给大家分享一下如何使用lodop.js打印控件打印table并分页,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
创新互联建站是一家朝气蓬勃的网站建设公司。公司专注于为企业提供信息化建设解决方案。从事网站开发,网站制作,网站设计,网站模板,微信公众号开发,软件开发,微信小程序开发,10多年建站对成都自上料搅拌车等多个方面,拥有多年的网站推广经验。
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
添加一下段落到最后面
5.在methods中加上这段代码 title自己定义 OrgName更加实际情况改变 num 0代表打印 1代表打印预览
lodopTable(num){
this.$lodopTable.lodopTable(num,{
"title":"工作量日报",
"OrgName":this.$cookies.get("orgInfo").OrgName
})
},
看完了这篇文章,相信你对“如何使用lodop.js打印控件打印table并分页”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!