欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

使用lodop.js打印控件打印table并分页等

程序员文章站 2022-03-07 10:10:59
lodopTable.js 官网下载lodop.js import lodopTable from './utils/lodopTable' Vue.prototype.$lodopTable = lodopTable
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

  1. min.js设置全局

import lodoptable from './utils/lodoptable'

vue.prototype.$lodoptable = lodoptable

  1. 在需要调用的页面 找到需要打印的那个表格 添加class  tableprin
  2. 添加一下段落到最后面

 <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

      })

    },