關於單頁面打印標籤功能的實現-全流程

原創

2020-06-19 05:11

描述：
在頁面中實現點擊按鈕，打印指定的內容。如圖

打印功能其實還好，網上很多代碼打印，主要是配置賊繁瑣。
代碼：

//初版
doPrint=(id) =>{ //方法
    const el = document.getElementById('content');
    const iframe = document.createElement('IFRAME');
    let doc = null;
    iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:500px;top:500px;');
    document.body.appendChild(iframe);
    doc = iframe.contentWindow.document;
    // 引入打印的專有CSS樣式，根據實際修改
    //doc.write('<LINK rel="stylesheet" type="text/css" href="css/print.css">');
    doc.write(el.innerHTML);
    doc.close();
    // 獲取iframe的焦點，從iframe開始打印
    iframe.contentWindow.focus();
    iframe.contentWindow.print();
    if (navigator.userAgent.indexOf("MSIE") > 0)
    {
        document.body.removeChild(iframe);
    }
}

//優化-帶批量打印版-同事會在一個頁面頻繁打印，後發現在頁面生成很多iframe標籤，處理了一下
 doPrint=(record) =>{ //reacord == 1 批量打印
    const { printCenter: {printData }, loading } = this.props;
    const { printArr } = this.state;
    const del = document.getElementById('iframe')
    //刪除上一個
    if(del){document.body.removeChild(del);}
    const iframe = document.createElement('IFRAME');
    let doc = null;
    let html  = ''
    iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:500px;top:500px;');
    iframe.id = 'iframe'
    document.body.appendChild(iframe);
    doc = iframe.contentWindow.document;
    console.log('doprint',record )
    if(record != 1){
      //單個
      html = `
              <!--startprint-->
              <div style="padding-top:5px;">${record.firstLine}</div>
              <div>${record.secondLine}</div>
              <div>${record.thirdLine}</div>
              <div style="padding-bottom:10px;">${record.fourLine}</div>
              <!--endprint--> 
            `
    }else{
      //批量
      printArr.map((item)=>{ 
        let txt = `<!--startprint-->
                    <div style="padding-top:5px;">${item.firstLine}</div>
                    <div>${item.secondLine}</div>
                    <div>${item.thirdLine}</div>
                    <div class="pb20" style="padding-bottom:10px;">${item.fourLine}</div>
                    <!--endprint-->`
        html+=txt
      })
    }
 	doc.write(html);
    doc.close();
    // 獲取iframe的焦點，從iframe開始打印
    iframe.contentWindow.focus();
    iframe.contentWindow.print();
    if (navigator.userAgent.indexOf("MSIE") > 0){ document.body.removeChild(iframe); }
  }

//html
 <Modal
    title="打印"
    visible={this.state.visiblePrint}
    onOk={this.doPrint} //調用
    onCancel={this.visiblePrintHide}
  >
    <div id="content">  //重要
      <div>{printData.firstLine}</div>
      <div>{printData.secondLine}</div>
      <div>{printData.thirdLine}</div>
    </div>
  </Modal>

配置：
設備:DL-888D打印機
紙張：熱敏（40mm x 30mm）

第一步： 使用光盤下載驅動，或者官網下載
第二步： 解壓出來連個文件夾，一個是驅動程序，一個是打印機設置工具，
第三步：
打印機接通電源，與電腦usb連接線接通，然後打開打印機設置工具（如不懂，點擊官方視頻）

點擊設置打印機

第四步：
安裝驅動，在電腦設置找到打印機，點擊添加打印機，win10點擊【我需要的打印機不在列表中】，然後

點擊從磁盤安裝，點擊瀏覽找到你的最開始解壓出來的驅動，選擇型號DL-888D安裝即可

第五步：
點擊你頁面按鈕，調出打印窗口，點擊更多設置，選擇最小值（或者自定義），去除頁面多於信息

第六步：
點擊上圖中的【使用系統對話框進行打印ctrl+shift+p】（或者電腦設置-打印機-打印機屬性配置）
先選擇打印機，然後點擊首選項

頁面設置中，點擊新建，自定義標籤

確認完成，再做如圖配置

第七步：
選擇剛剛自定義的【標籤】做如圖配置；如果多出一個空白頁，減少縮放值（96或98）；如果頁面排序亂，修改邊距，總有一個合適的，慢慢試。

第八步：
至此所有軟件都準備完畢，下面是硬件配置
圖中黑色三角必須和下面的三角對齊，我的圖片沒對齊，所以會出現不識別紙張，多出來及標籤，對齊以後就好了

測試結果