前端打印及后端生成PDF

本文主要是介绍前端打印及后端生成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;
}

这篇关于前端打印及后端生成PDF的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---