LODOP 列印圖片和表格

原子一式發表於2020-10-16

因為專案需要,需要做個列印產品發貨明細。
之所以找到這個是因為看了好多大佬的推薦,這個外掛不錯
以下是官網:http://www.c-lodop.com/LodopDemo.html
一開始在官網找了好久,發現沒有圖片和表格一起列印的,就自己去試試
領導給我的是一個excel,裡面放了大概是這樣的
在這裡插入圖片描述

當然圖片不是這個,為了隱私問題,特意找了自己的賬號截圖
思路:
1.我沒有去找相關找列印excel的是因為我要往表格動態填資料非常麻煩【其實也不是很麻煩】,我就想到,把這個excel的模板弄成網頁,用table展示就行了
2.對比列印的屬性[https://www.cnblogs.com/huaxie/p/10212656.html]
ADD_PRINT_TABLE 特點:不切行,只能輸出一個table,巢狀複雜等表格不行。
當某一行高超過列印項高度時,不會按照列印項高度分頁,不切行,而是輸出整個行,行跨頁隱藏後面的內容,不會分到下一頁。
如圖-----達到了紙張的最下方,下面既沒有表格線,後面的內容也沒有分到下一頁,該超大行後面的內容相當於不列印隱藏了。

ADD_PRINT_HTM特點:切行沒切字,補充了表格線,該超大行分頁後成了多行。
如圖-----基本按照列印設計列印項高度分頁,只是列印設計裡高度在最後一句,列印設計設計的高度是稍稍小於該文字的,但是ADD_PRINT_HTM沒有切字,而是把最後一行字顯示全了,並且該大行分頁後補全了表格線,本來是兩行三列的表格,補完橫線後,看起來是兩行變成了四行,切行的都補了線。

ADD_PRINT_HTML特點:切行切字,不補表格線,類似截圖,把內容當圖截了。

我自己也去對比測試了,我最後選用了ADD_PRINT_HTM

遇到的坑:
1.因為我公司的印表機有兩個幾盒,對應的紙盒紙張不一樣,一開始列印的時候,老是不對勁,因為預設選擇紙盒1,紙盒1的紙張不是A4。
調整 LODOP.PRINT_DEFAULTSOURCE = 7;7表示自動選擇
LODOP.SET_PRINT_PAGESIZE(1, 0, 0, “A4”); //1豎版 2橫版 A4紙是橫版還是豎版列印
2.調整紙張位置
LODOP.ADD_PRINT_HTM(0, 0, ‘100%’, ‘100%’, document.getElementById(“tableJY”).innerHTML);

<!DOCTYPE html>
<html lang="zh-cn"">

<head>
  <meta charset=" UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>寄樣清單</title>
<style>
  .table-box {
    display: inline-block;
  }

  .table-body table {
    width: 100%;
  }

  td {
    max-width: 300px;
    text-align: center;
  }
</style>
</head>

<body>
  <div class="table-box">
    <div class="table-header">
      <img src="./img/img_header.png">
    </div>
    <div class="table-body">
      <h2 style="text-align: center; border-top: 2px solid black;padding-top: 10px;">寄樣清單</h2>
      <table cellspacing="15">
        <tr>
          <th>客戶名稱:</th>
          <td>莊嚴貿易有限公司</td>
          <th>聯絡人:</th>
          <td>牛女士</td>
          <th>寄樣日期:</th>
          <td>2020/9/13</td>
        </tr>
        <tr>
          <th>客戶地址:</th>
          <td>廣東省廣州市白雲區YH城</td>
          <th>聯絡電話:</th>
          <td>18326913045</td>
          <th>是否收費:</th>
          <td></td>
        </tr>
      </table>
      <table border="1" cellspacing="0">
        <tr>
          <th>序號</th>
          <th>系列名稱</th>
          <th>屬性</th>
          <th>規格</th>
          <th>配方編碼</th>
          <th>數量</th>
          <th>功效簡介</th>
        </tr>
        <tr>
          <td>1</td>
          <td>微雕緊塑逆齡方案</td>
          <td>凍幹類</td>
          <td>40mg×10/</td>
          <td>VS-07</td>
          <td>1</td>
          <td>7天明顯見效!全方位淡紋、緊緻、實現逆齡養護!
            緊緻嫩膚效果明顯!</td>
        </tr>
        <tr>
          <td>2</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </table>
      <table cellspacing="15">
        <tr>
          <td style="text-align: left;">總辦:</td>
          <td style="text-align: left;">財務:</td>
          <td style="text-align: left;">業務:</td>
        </tr>
      </table>
    </div>
  </div>

</body>
 <script>

              var LODOP; //宣告為全域性變數 

            function prn2_preview() {
                LODOP = getLodop();
                LODOP.PRINT_INIT("");

                LODOP.PRINT_DEFAULTSOURCE = 7;//選擇印表機的紙盒
                LODOP.PRINT_INITA(0, 0, '100%', '100%', "");
                LODOP.SET_PRINT_PAGESIZE(1, 0, 0, "A4"); //A4紙 1豎版 2橫版 
                LODOP.ADD_PRINT_HTM(0, 0, '100%', '100%', document.getElementById("tableJY").innerHTML);
                LODOP.PRINT_DESIGN();
                // LODOP.PRINTA();
                //LODOP.PREVIEW();    
            };
            
        </script> 
</html>

以上就是列印的前端頁面的程式碼,非常贊,感謝大佬的分享,讓我少走了很多彎路

相關文章