文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-04-02 19:55

关注

小编给大家分享一下如何使用lodop.js打印控件打印table并分页,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

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

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

      })

    },

看完了这篇文章,相信你对“如何使用lodop.js打印控件打印table并分页”有了一定的了解,如果想了解更多相关知识,欢迎关注编程网行业资讯频道,感谢各位的阅读!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯