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

//打印表格default{
// num 打印还是打印预览 conData 对象形式 传入需要的值 自定义 (自己添加的属性要在下面备注)// conData title 标题 OrgName科室名字function(num,conData){
//原始tablevar]
var]
var]
vartrue)
vartrue)
document.getElementsByClassName(
].appendChild(clnThead)
document.getElementsByClassName(
].appendChild(clnTbody)

var]
var]

var printTableTbody.children
// 循环tbody的子元素for) {
var tbodyChild[i].children
//循环tbody子元素的子元素for) {
// let tbodyTrChildSpan = tbodyTrChild[a].getElementsByTagName(“span”) let text

text this.xhTbodySpan(tbodyTrChild[a])

tbodyTrChild[a].innerHTML text
tbodyTrChild[a].style

}
}

LODOP getLodop()
LODOP.PRINT_INIT(
);
LODOP.SET_PRINT_PAGESIZE(
//1竖版 2横版true//宽度溢出缩放//创建表格打印 表头自动每页都有].innerHTML);

//创建页码 每页都有);
LODOP.SET_PRINT_STYLEA(
);
//2代表页码类型 1代表其他类型 每页都显示必须函数//标题);
LODOP.ADD_PRINT_TEXT(
, `${conData.title}`);
LODOP.SET_PRINT_STYLEA(
);
LODOP.SET_PRINT_STYLEA(
);
//科室, `科室:${conData.OrgName}`);
LODOP.SET_PRINT_STYLEA(
);
LODOP.SET_PRINT_STYLEA(
);
// LODOP.ADD_PRINT_TEXT(‘97%’, 10, ‘100%’, 100, `病区护士长:${this.noteForm.HeadNurseName} 灭火:${this.noteForm.FireFight} 报告:${this.noteForm.Presentation} 疏散:${this.noteForm.Evacuate}`););
LODOP.SET_PRINT_STYLEA(
);
if(num){
LODOP.PREVIEW();
}
else{
LODOP.PRINT();
}
location.reload();
},
//遍历子元素直到最后一个子元素function (ele) {
let con
let eleChild
ele.children
if) {
returnthis])
}
else {
con
ele.innerHTML
}

return con
}
}

lodopTable.js

官网下载lodop.js

  1. min.js设置全局
  • min.js设置全局
  • 设置全局

    import lodopTable from ‘./utils/lodopTable’

    vue.prototype.$lodopTable = lodopTable

    1. 在需要调用的页面 找到需要打印的那个表格 添加class  tablePrin
    2. 添加一下段落到最后面
  • 在需要调用的页面 找到需要打印的那个表格 添加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代表打印预览

    methods中加上这段代码  title自己定义 更加实际情况改变代表打印 1代表打印预览

    lodopTable(num){

          this.$lodopTable.lodopTable(num,{

            “title”:”工作量日报”,

            “OrgName”:this.$cookies.get(“orgInfo”).OrgName

          })

        },

    » 本文来自:前端开发者 » 《使用lodop.js打印控件打印table并分页等_苏颜_前端开发者》
    » 本文链接地址:https://www.rokub.com/73658.html
    » 您也可以订阅本站:https://www.rokub.com
    赞(0)
    64K

    评论 抢沙发

    评论前必须登录!