使用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, `科室:${Name}`);
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设置全局
importlodopTablefrom'./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
})
},
