printJS 打印 常用功能收录

html2canvas将html转换为图片，printJs实现打印图片,适用于少量图片，图片过多加载速度会很慢

import printJS from "print-js";
import html2canvas from "html2canvas";

html2canvas(this.$refs.printBox, {
  logging: false,
  dpi: window.devicePixelRatio * 4, // 将分辨率提高到特定的DPI 提高四倍
  scale: 0.9, // 按比例增加分辨率，调整显示比例
  allowTaint: true,
  useCORS: true
}).then(canvas => {
  printJS({ 
    printable: [canvas.toDataURL()],// 图片路径，支持多张图片
    type: "image",
    style: '@page{size:auto;margin: 130px 30px 0px 30px;}',//去除页眉页脚
  });
});

printJs保留html原有样式，自动分页，适用大量数据打印，加载速度快，使用自动分页需计算好高度

import printJS from "print-js";

printJS({ 
  printable: 'containerPrint', // 元素id,不支持多个
  type: "html",
  targetStyle: ['* '],
  targetStyles: ['*'],
  maxWidth: '', // 最大宽度，默认800,仅支持数字
  style: '@page{size:auto; margin: 0;}' + 
  '@media print { @page {size: landscape } }'// landscape  默认横向打印
});

注：直接打印html时，通常会根据需求做分页处理，可以在要分页的元素中加分页符达到分页效果

page-break-after: always;