前端打印及后端生成PDF

vue中前端打印

CSS

按正常样式书写, flex, 嵌套,主流样式,都可以用;

JS

涉及到图片, 必须是https地址, 且要等图片加载完成后, 再去打印;

//判断打印中的审核签名图片是否加载完成
    judgeVerifySign() {
      let that = this;
      if (that.orderDetial.verifySign) {
        let el = document.getElementById('verifySign');
        el.src = that.orderDetial.verifySign.replace(/^http:\/\//i, 'https://');
        el.onload = function() {
          that.printList();
        };
      } else {
        that.printList();
      }
    },
    //打印清单
    printList() {
      let listPrint = document.getElementById('listPrint');
      let newContent = listPrint.innerHTML;
      let oldContent = document.body.innerHTML;
      document.body.innerHTML = newContent;
      window.print();
      window.location.reload();
      document.body.innerHTML = oldContent;
      return false;
    },

后端生成PDF

只需要提供样式模板

不能嵌套, 不能用flex布局, 使用 div+浮动 +100% 进行布局

2023.2.10: 使用table 布局效果更好

主要内容字体大小14-16px  标题 23-25 px

最顶部 需要加上这些 用来规定纸张大小

@page{ 
  /* 297mm 420mm        A3纸 */
  /* 210mm 297mm        A4纸  */
  /* size: 210mm 148mm; A5  (宽X高)  纸张横向 */
  size: 148mm 210mm; // 纸张纵向
  margin: 0; 
  width: 100%; 
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
}