web打印一篇就夠，jspdf，wkhtmltopdf

時間 2019-11-08

標籤 web 打印一篇 jspdf wkhtmltopdf 欄目 HTML 简体版

原文原文鏈接

前端時間公司有一個項目要批量打印，主要是打印准考證，考試成績，以及考試證書。參考方案，前端打印，後端打印javascript

後端打印

後端打印主要是用wkhtmltopdf這個，這個框架須要在後端安裝一大堆東西，先生成pdf在打印。一句話，一旦出現了問題，修復起來會很是困難，關鍵代碼就一行。可是調試起來卻異常困難。css

options = {
    'page-size': 'A4',
    'orientation': 'Landscape',
    'encoding': 'utf-8',
    'zoom': 8,
    'margin-bottom': '0in',
    'margin-top': '0in',
    'margin-left': '0in',
    'margin-right': '0in',
}
config = pdfkit.configuration(wkhtmltopdf='/usr/local/bin/wkhtmltopdf')
pdfkit.from_url(weburl,filepath, options=options, configuration=config)

問題每每出如今pdfkit.from_url()，每每在測試環境沒有問題，在正式環境上就不行。由於出問題的頻率太過頻繁，因此考慮換方案html

前端打印

一番搜索就下列幾種方式，比較好一點前端

jspdf 打印 addHTMLjava

<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script src="https://cdn.jsdelivr.net/ace/1.1.01/noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="dist/jspdf.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    var pdf = new jsPDF('p', 'pt', 'a4');
    printbypage(pdf, 0);
  });
  function printbypage(pdf, k) {
    console.log(k);
    var options = {
      background: '#FFFFFF'
    };
    pdf.addHTML($('.dtable')[k], options,
    function() {
      if (k < $('.dtable').length - 1) {
        console.log('true') pdf.addPage();
        printbypage(pdf, k + 1);
      } else {
        pdf.save("打印成績單.pdf");
      }
    });
  };
</script>

結論：存在問題打印時背景黑，數據量大後黑屏率100%jquery

jspdf 打印 addImagegit

<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script src="https://cdn.jsdelivr.net/ace/1.1.01/noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="dist/jspdf.min.js">
<script type="text/javascript">
  $(document).ready(function() {
    var pdf = new jsPDF('landscape', 'pt', 'a4');
    printbypage(pdf, 0);
  });
  function printbypage(pdf, k) {
    html2canvas($('.dtable')[k], {
      taintTest: false,
      allowTaint: true,
      background: 'white',
      onrendered: function(canvas) {
        console.log(k) if (k < $('.dtable').length) {
          console.log(true) var pageData = canvas.toDataURL('image/jpeg', 1.0);
          pdf.addImage(pageData, 'JPEG', 0, 0, 841.89, 595.28);
          if (k != $('.dtable').length - 1) {
            pdf.addPage();
          }
          printbypage(pdf, k + 1);
        } else {
          pdf.save("打印證書.pdf");
        }
      }
    })
  };
</script>

結論：存在問題打印時背景黑，數據量大後黑屏率100%，小數據量好一些github

jquery.printweb

$("#myElementId").print({
    globalStyles: true,
    mediaPrint: false,
    stylesheet: null,
    noPrintSelector: ".no-print",
    iframe: true,
    append: null,
    prepend: null,
    manuallyCopyFormValues: true,
    deferred: $.Deferred(),
    timeout: 750,
    title: null,
    doctype: '<!doctype html>'
});
結論：開源組織提供的，通常性打印需求能夠知足，沒法調整邊距，紙張打印方向之類。底層都是window.print()實現，優勢，使用起來很是方便

window.print 方法canvas

這個是系統自帶的，能夠調整邊距，能夠調整紙張方向，我最終使用的是這個，不一樣瀏覽器本身作支持，要是出現了問題，通常均可以解決

//分頁參數
style="page-break-before:always;height:667px"

@media print

css的屬性，主要瀏覽器都支持

@media print {
  selector{
  ...
  }
}

Lodop插件

這個打印插件我並無使用，須要用戶安裝，收費

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。