web打印一篇就够，jspdf，wkhtmltopdf

2019年8月15日 176次阅读 来源: hanbin

前端时间公司有一个项目要批量打印，主要是打印准考证，考试成绩，以及考试证书。参考方案，前端打印，后端打印

后端打印

后端打印主要是用wkhtmltopdf这个，这个框架需要在后端安装一大堆东西，先生成pdf在打印。一句话，一旦出现了问题，修复起来会非常困难，关键代码就一行。但是调试起来却异常困难。

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()，往往在测试环境没有问题，在正式环境上就不行。因为出问题的频率太过频繁，所以考虑换方案

前端打印

一番搜索就下列几种方式，比较好一点

jspdf 打印 addHTML

<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%

jspdf 打印 addImage

<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%，小数据量好一些

jquery.print

$("#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 方法

这个是系统自带的，可以调整边距，可以调整纸张方向，我最终使用的是这个，不同浏览器自己做支持，要是出现了问题，一般都可以解决

//分页参数
style="page-break-before:always;height:667px"

@media print

css的属性，主要浏览器都支持

@media print {
  selector{
  ...
  }
}

Lodop插件

这个打印插件我并没有使用，需要用户安装，收费

    原文作者：hanbin
    原文地址: https://segmentfault.com/a/1190000011588622
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞