1.首先下载vue-pdf ： npm install vue-pdf --dev
踩坑： 页面第一次渲染没有问题，但是二次打开PDF的时候会遇到PDF空白的问题，控制台提示：Error during font loading: Failed to execute ‘postMessage’ on ‘Worker’: ArrayBuffer at index 0 is already detached
翻找半天发现是因为缓存问题，然后找到了一个大佬的博客, 二次封装的这个包
附上地址：/chenzhiyong12/article/details/109410200
//替换vue-pdf
npm install --save vue-pdf-signature
template部分
<el-button class="filter-item" type="primary" @click="printingShopee">测试报表打印</el-button><pdf :src="testSrc"/>
script部分：
import pdf from 'vue-pdf-signature'// 解决部分文字不显示的问题import CMapReaderFactory from 'vue-pdf-signature/src/CMapReaderFactory.js'data() {return {testSrc: '',}}components: {pdf},methods: {printingShopee() {// testSrcconst data = {"param":{"patientName":"蒲静111","diagnoseId":"0004944952","recipeName":"hhhhhhh","queueName":"哈哈哈","lateSignDate":"okkkkk","filmingNo":"13123","sex":"111","sns":"'287015638468063232','287015672471285760','288526367125860352'"},"reportCode":"1619747236132"}// download 请求后端接口download(data).then(res => {console.log(res)if(res.code === 200) {// res.result 为base64位的码let datas = 'data:application/pdf;base64,' + res.resultthis.testSrc = pdf.createLoadingTask({url: datas, CMapReaderFactory });console.log(this.testSrc)setTimeout(() => {// 通过调试检查发现pdf预览的页面是canvas绘成的var printContent = document.getElementsByTagName('canvas')[0];console.log(printContent)var dataUrl = printContent.toDataURL(); // 转成base64console.log(printContent)console.log(dataUrl)LODOP.PRINT_INIT("测试PDF打印功能");LODOP.SET_PRINT_PAGESIZE(3, 780, 100, '')// LODOP.ADD_PRINT_IMAGE("0mm","0mm","RightMargin:0mm","BottomMargin:0mm",dataUrl);LODOP.ADD_PRINT_IMAGE(0, 0, '100%', '100%', dataUrl)LODOP.SET_PRINT_STYLEA(0,"Stretch",2);//(不可变形)扩展缩放模式// LODOP.SET_PRINTER_INDEX(LODOP.GET_PRINTER_NAME(-1))// LODOP.PRINT()LODOP.PREVIEW(); //预览打印},2000)}})},}
但是我们业务要求不预览 直接打印，
但是canvas， 必要设置width,height属性， 或不能将display设为none， 否则打印的canvas对象就是一个空对象，那它返回的 toDataURL()就为空 data:
所以这个很致命 目前只能给最外层的父元素设置了宽和高 将 pdf组件放到页面内容外
