vue used in the project Lodop implement batch print html page and pdf file

What 1.Lodop that?

Lodop (phonetic: Road workers spectrum, commonly known as: Lucy belly) is a professional WEB control, use it to either clipping the output page content, and directly usable program code to implement complex printing. Control is powerful, yet easy to use, all calls as JavaScript extensions statement, the main interface functions as follows:

●   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打印设计

At least the most basic printing process initialization statement, add the contents of the statement and print statements of three parts, for example:

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

Official website address ; C-Lodop PDF document printing ; Online Case

2. How to implement batch printing function vue project?

1. The introduction of js files in index page

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

2. When batch printing we have to distinguish between html or pdf print label printing

// 批量打印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); serial number or name specified by the printer, after selecting manual reselection prohibited;
SET_PRINTER_INDEXA (IndexorName); serial number or name specified by the printer, after selection allows manual reselection;

// 批量打印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. part surface by the information returned html tags we need to filter

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>

Note: the printer is installed, go to the corresponding printer driver official website, and then add the printer control panel

Printable PDF version of the C-Lodop4.0 test has been able to download, download address is: welcome page to find at the end of the http://demo.c-lodop.com:8000/CLodop_Setup4.0(Beta).zip install "PDF Print "link, or enter the address:
HTTP: // localhost: 8000 / c_pdfprint