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插件

这个打印插件我并无使用，须要用户安装，收费