前端打印之路(無預覽靜默打印)

先貼一下代碼

<div id=‘print’ style={{ fontFamily: "Microsoft YaHei" }}>
            <div
              className="print_container"
              style={{ padding: "0px", margin: "0", overflow: "hidden" }}
            >
              <h1
                style={{
                  fontSize: "18px",
                  paddingBottom: "0px",
                  textAlign: "left",
                  marginBottom: "5px",
                  fontFamily: "SimHei",
                }}
              >
                預約通知單
              </h1>
              <span
                style={{ borderBottom: "2px dashed #000", display: "block" }}
                
              >
                
              </span>
              <div className="section1" style={{ marginTop: "6px" }}>
                <div
                  style={{
                    fontSize: "16px",
                    marginBottom: "0px",
                    fontWeight: "bold",
                  }}
                >
                  排隊號
                </div>
                <div
                  style={{
                    fontSize: "22px",
                    fontWeight: "bolder",
                    margin: "0",
                  }}
                >
                  A001
                </div>
              </div>
              <div className="section1" style={{ marginTop: "6px" }}>
                <div
                  style={{
                    fontSize: "16px",
                    marginBottom: "0px",
                    fontWeight: "bold",
                  }}
                >
                  患者姓名:
                </div>
                <div
                  style={{
                    fontSize: "22px",
                    margin: "0",
                    fontWeight: "bolder",
                  }}
                >
                  李白
                </div>
              </div>
              <div className="section1" style={{ marginTop: "6px" }}>
                <div
                  style={{
                    fontSize: "16px",
                    marginBottom: "0px",
                    fontWeight: "bold",
                  }}
                >
                  檢查部位:
                </div>
                <div
                  style={{
                    fontSize: "20px",
                    margin: "0",
                    fontWeight: "bolder",
                  }}
                >
                  腹部超聲
                </div>
              </div>
              <div
                className="section1"
                style={{ marginTop: "6px", marginBottom: "5px" }}
              >
                <div
                  style={{
                    fontSize: "16px",
                    marginBottom: "0px",
                    fontWeight: "bold",
                  }}
                >
                  檢查日期
                </div>
                <div
                  style={{
                    fontSize: "20px",
                    margin: "0",
                    fontWeight: "bolder",
                    wordBreak: "break-all",
                  }}
                >
                  2020-12-20 8：00
                </div>
              </div>
              <span
                style={{ borderBottom: "2px dashed #000", display: "block" }}
                
              >
               
              </span>
              <div className="section3" style={{ marginTop: "6px" }}>
                <label
                  style={{
                    fontSize: "16px",
                    display: "block",
                    marginBottom: "0px",
                  }}
                >
                 人民醫院
                </label>
                <label
                  style={{ fontSize: "16px", display: "block", margin: "0" }}
                >
                  2020-12-20 08:23
                </label>
              </div>
              
            </div>
          </div>

整個打印，樣式最好寫在行內，外部鏈接方式對一些打印無效。

一、瀏覽器自帶打印(window.print())

直接使用window.print() 打印的是整頁內容-->無法實現打印指定區域,所以我們采用iframe的方式，不影響原頁面。

代碼如下:

const el = document.getElementById(”print“);
    const iframe = document.createElement("IFRAME");
    let doc = null;
//讓iframe結構隱藏不顯示
    iframe.setAttribute(
      "style",
      "position:absolute;width:0px;height:0px;left:500px;top:500px;"
    );
    document.body.appendChild(iframe);
    doc = iframe.contentWindow.document;
    doc.write(el.innerHTML);
    doc.close();
    // 獲取iframe的焦點，從iframe開始打印
    iframe.contentWindow.focus();
    iframe.contentWindow.print();

預覽結果如下:

 

 

 

說一下這種打印的缺陷

1，用戶是否點擊打印還是取消，無法監控。

2，預覽窗口無法跳過。

3，這種打印原理是把網頁轉化成圖片再發送到打印機，所以在一些高精度針式打印機下，會出現文字鋸齒的現象。

二、httpprint打印控件

網址：http://www.httpprinter.com/

這個打印控件在本地進行調試的時候發現，他們打印方式是首先在控件上，進行繪圖一樣的方式進行排版，然后生成一個模板，在代碼中進行ajax請求，向控件發起一個127.0.0.1的請求，傳模板json達到打印效果。

說一下這個打印的一些體驗。

首先不能直接傳html進行打印，要先設計模板，靈活性太差。

再者，進行調試的時候發現代碼只能在本地打印通過，部署到服務的時候，再去請求127.0.0.1會出現跨域問題，他們軟件中說解決了這個問題，我調試沒成功，跟作者溝通也沒結果，就很遺憾的放棄了。

免費版每天有打印次數限制。

這個插件200元一次性買斷還是不錯的，不限ip,域名等。有興趣的可以嘗試一下。

三、jcp打印控件

網址:http://printfree.jatools.com/

打開網址直接下載安裝控件。

在頁面中引用

<script src="./jcpfree.js"></script>

  let myDoc = {
        settings: {
          portrait: true, // 縱向
          marginLeft: 3, //設置左邊距，單位為mm
          marginTop: 1,
          marginRight: 3,
          marginBottom: 1,
        },
　　　　　//直接寫document,會直接打印id="page1"的html，page1為第一頁，所以上面的id="print"需要改成id="page1"
        documents: document, // 打印頁面(div)們在本文檔中
        copyrights: "傑創軟件擁有版權  www.jatools.com", // 版權聲明必 
       須
      };
      var jcp = getJCP();
      // false為直接打印
      jcp.print(myDoc, false);

需要注意的是這個控件解析的樣式跟其他控件稍微不一致，所以開頭的樣式需要自行調整一下。

現在說一下這個控件的一些限制。

首先，我們使用的是免費版，免費版允許在ie下進行無預覽直接打印，但是在其他瀏覽器下不允許直接打印且在ie下每天有次數限制，每次次數達到以后，重啟控件就可以繼續使用。

付費版不會有這些問題，但是這個付費也太誇張了。七千多塊錢限制也很多，被勸退了。

四、lodop打印控件

網址:http://www.lodop.net/

官網下載雙擊直接安裝

只安裝這個就ok,c-lodop兼容之前的lodop

頁面引入

打印代碼如下

let htmlStr =document.getElementById("print").innerHTML;
        LODOP.PRINT_INIT("");//打印初始化
       //打印邊距設置
        LODOP.ADD_PRINT_HTM(
          20,
          "5%",
          "RightMargin:5%",
          // "90%",
          "BottomMargin:9mm",
          //450,
          htmlStr
        );
       //預覽打印
        // LODOP.PRINT();
        LODOP.PREVIEW(); //直接打印

 

官方demo上打印代碼除了設置邊距其他都一樣，但是這里出現個坑，

按照他們的說明，這段代碼應該是直接打印但是會有試用版水印，但是在我的xpprint打印機上，出現打印完之后一直打印空白的問題。

后來嘗試了網上大量demo后，經過調試一下代碼，最終成功出現預計效果！

let strHTML = document.getElementById("print").innerHTML;
        if (LODOP != null && typeof LODOP.VERSION != "undefined") {
          LODOP.PRINT_INIT("");
          LODOP.SET_PRINT_PAGESIZE(3, "58mm", "10mm", "CreateCustomPage");
          LODOP.SET_PRINT_STYLE("FontSize", 15); // 設置打印字體
          LODOP.SET_PRINT_STYLE("Bold", 1); // 設置加粗
          LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", "Height:90%");
          LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", "Full-Width");

          LODOP.ADD_PRINT_HTM(10, 10, "100%", "70%", strHTML);
          LODOP.PRINT(); //
        }

        if (LODOP.CVERSION) {
          LODOP.On_Return = function (TaskID, Value) {
            if (Value > 0) {
              //打印成功
             
            }
          };
        }

最終效果：

總結一下lodop的限制：

免費版和付費版差別不大，如果進行預覽打印的話，不會出現試用水印。

直接打印免費版會有上面的試用版打印這些水印。付費版可解決這個問題。

不過lodop的購買套餐真的非常亂，真心建議改一下，我們溝通了幾天才搞明白應該買哪個套餐。

這個價錢根據自己的使用購買，價格比jcp便宜很多，我們買了260那個套餐。

購買以后他們會發付費版的包和注冊碼。

需要在LodopFuncs.js中填入注冊信息就可以了，也可以在內網使用。

到這里基本你也能選到適合你的打印方式了。