美文网首页
【vue学习】整合Lodop

【vue学习】整合Lodop

作者: 前端菜篮子 | 来源:发表于2020-07-07 08:31 被阅读0次

    前端实现自动打印 批量打印

    vue中使用lodop调用标签打印机

    利用lodop打印控件轻松实现批量打印

    本文主要摘自vue项目中使用Lodop实现批量打印html页面和pdf文件

    1.Lodop是什么?

    Lodop(标音:劳道谱,俗称:露肚皮)是专业WEB控件,用它既可裁剪输出页面内容,又可用程序代码直接实现复杂打印。控件功能强大,却简单易用,所有调用如同JavaScript扩展语句,主要接口函数如下:

    ●   PRINT_INIT(strPrintTaskName)打印初始化
    ●   SET_PRINT_PAGESIZE(intOrient,intPageWidth,intPageHeight,strPageName)设定纸张大小
        参数说明:
        intOrient:打印方向及纸张类型
            1---纵向打印,固定纸张; 
            2---横向打印,固定纸张;  
            3---纵向打印,宽度固定,高度按打印内容的高度自适应(见样例18);
            0---方向不定,由操作者自行选择或按打印机缺省设置。
        intPageWidth:
            纸张宽,单位为0.1mm 譬如该参数值为45,则表示4.5mm,计量精度是0.1mm。
        intPageHeight:
            固定纸张时该参数是纸张高;高度自适应时该参数是纸张底边的空白高,计量单位与纸张宽一样。
        strPageName:
            纸张类型名
    
    ●   ADD_PRINT_HTM(intTop,intLeft,intWidth,intHeight,strHtml)增加超文本项
    ●   ADD_PRINT_TEXT(intTop,intLeft,intWidth,intHeight,strContent)增加纯文本项
    ●   ADD_PRINT_TABLE(intTop,intLeft,intWidth,intHeight,strHtml)增加表格项
    ●   ADD_PRINT_SHAPE(intShapeType,intTop,intLeft,intWidth,intHeight,intLineStyle,intLineWidth,intColor)画图形
    ●   SET_PRINT_STYLE(strStyleName, varStyleValue)设置对象风格
    ●   PREVIEW打印预览
    ●   PRINT直接打印
    ●   PRINT_SETUP打印维护
    ●   PRINT_DESIGN打印设计
    

    最基本的打印过程至少有初始化语句、添内容语句和打印语句三部分组成,例如:

    LODOP.PRINT_INIT("打印任务名");               //首先一个初始化语句
    LODOP.ADD_PRINT_TEXT(0,0,100,20,"文本内容一");//然后多个ADD语句及SET语句
    LODOP.PRINT();                               //最后一个打印(或预览、维护、设计)语句
    

    官网地址C-Lodop的PDF文档打印在线案例

    2.在vue项目中如何实现批量打印功能?

    1.在index页面中引入js文件

    <script language="javascript" src="http://www.c-lodop.com/demolist/LodopFuncs.js"></script>

    2.在批量打印时我们得先区分是html标签打印还是pdf打印
    // 批量打印lazada国内面单(html标签)
        printingClick() {
          const tableInfo = this.multipleSelection.map(item => window.decodeURIComponent(escape(window.atob(item.shippingPdfUrl))))
          console.log(tableInfo)
          LODOP = getLodop()
          LODOP.PRINT_INIT('打印')
          LODOP.SET_PRINT_PAGESIZE(3, 1000, 1500, '')// 3代表纵向打印,宽度固定,高度按打印内容的高度自适应,纸张10*15
          for (let i = 0; i < tableInfo.length; i++) {
            this.creatOneRage(tableInfo[i])
          }
          LODOP.SET_PREVIEW_WINDOW(0, 0, 0, 0, 0, '')
          if (LODOP.SET_PRINTER_INDEXA(0)) { LODOP.PRINT() } // 这里实现的是选择打印机,数字代表打印机的型号,如果不需要预览,将LODOP.PREVIEW()改为LODOP.PRINT()
        },
        creatOneRage(table) {
          LODOP.NewPage()
          LODOP.ADD_PRINT_IMAGE(12, 12, '95%', '95%', table)
          LODOP.SET_PRINT_STYLEA(0, 'Stretch', 2)
        },
    

    SET_PRINTER_INDEX(oIndexOrName);按序号或名称指定打印机,选定后禁止手工重选;
    SET_PRINTER_INDEXA(IndexorName);按序号或名称指定打印机,选定后允许手工重选;

    // 批量打印pdf文件
        // 批量打印pdf文件
        printingShopee() {
          const strURL = ['QzpcVXNlcnNcYWRtaW5cRG93bmxvYWRzXDE5MDkxOTA1MzU0S0QzRy5wZGY=', 'QzpcVXNlcnNcYWRtaW5cRG93bmxvYWRzXDE5MTAyMzIwMjUxQVdUSCAoMSkucGRm']// 线上地址有跨越问题,本地路径模拟打印,路径不能直接识别,所以先加密了
          const strURLorContent = strURL.map(item => window.atob(item))
          LODOP = getLodop()
          LODOP.PRINT_INIT('打印')
          LODOP.SET_PRINT_PAGESIZE(3, 1000, 1500, '')
          for (let j = 0; j < strURLorContent.length; j++) {
            this.creatPdfRage(strURLorContent[j])
          }
          LODOP.SET_PREVIEW_WINDOW(0, 0, 0, 0, 0, '')
          if (LODOP.SET_PRINTER_INDEXA(1)) { LODOP.PREVIEW() } //上面的例子选择的打印机序号为0,这里为1,上面的直接打印,这里的是预览,可以根据需求选择
          LODOP.PREVIEW()
        },
        creatPdfRage(pdf) {
          LODOP.NewPage()
          LODOP.ADD_PRINT_PDF(0, 0, '100%', '100%', pdf)
        },
    
    3.部分面单信息返回的html标签我们需要进行过滤
    demo:
    一个很长的html标签字符串,我们需要过滤掉`<div class="A4" style="padding-top: 1px;">`标签后面的所有内容:
    <script type="text/javascript">
            var  str = '<style type="text/css">@media print and (max-width: 100000px) { html, bodwidth: 210m } 12313465465413654<div class="A4" style="padding-top: 1px;"><div class="cut-line" style="position:relative;"><img alt="image" src="http://cdn-cloudprint.cainiao.com/waybill-print/cloudprint-imgs/496d988f51f34b0b863a24a529dc8c7e.png" style="height:20px; position:relative; top:-11px;" /><div style="text-align:center; margin-top: 5px;"><img alt="image" src="https://th-live.slatic.net/cms/3PL/ORF5.png" width="90%" /></div></div>'
            console.log(str)
            var arr = str.split('<div class="A4" style="padding-top: 1px;">') 
            console.log(arr[0])
        </script>
    

    注:打印机的安装,先去打印机官网下对应的驱动,然后在控制面板中添加打印机

    能打印PDF的C-Lodop4.0测试版已能下载,下载地址是: http://demo.c-lodop.com:8000/CLodop_Setup4.0(Beta).zip 安装后在欢迎页面末尾找“PDF打印”链接,或输入地址:
    http://localhost:8000/c_pdfprint

    相关文章

      网友评论

          本文标题:【vue学习】整合Lodop

          本文链接:https://www.haomeiwen.com/subject/gfgjahtx.html