线上拓客100种方法,seo沈阳,重庆网站推广营销价格,白石龙做网站项目开发使用vue-pdf,单页情况预览正常#xff0c;多页vue-pdf预览异常#xff0c;第一次预览时#xff0c;会先弹出异常模态窗口#xff0c;关闭模态窗口#xff0c;pdf又是正常显示#xff0c;报错信息及异常截图如下#xff1a;
报错信息
Rendering cancelled, page…项目开发使用vue-pdf,单页情况预览正常多页vue-pdf预览异常第一次预览时会先弹出异常模态窗口关闭模态窗口pdf又是正常显示报错信息及异常截图如下
报错信息
Rendering cancelled, page 1 Error at BaseExceptionClosure xxxpdf.js:2610 Uncaught (in promise) RenderingCancelledException {message: Rendering cancelled, page 2, name: RenderingCancelledException, type: canvas, stack: Error\n at BaseExceptionClosure (http://localhos…calhost:8080/static/js/chunk-vendors.js:83019:20)}异常截图点击右上角关闭Xpdf是正常预览再次打开后也能正常预览仅第一次打开预览有异常。 1.vue-pdf预览源码 el-button v-ifdatas.length 0 typetext clickopenPdfPreview()公示PDF/el-buttonel-dialogclassdialog-viewwidth80%title公示PDF:visible.syncpdfDialogVisible:append-to-bodytrue:modal-append-to-bodytruecenter:before-closehandlePdfClosepdfclasspdf-previewv-ifnumPages 0v-fori in numPages:keyi:srcsrc:pagei/pdf/el-dialog// 预览关键代码openPdfPreview() {if (!this.pdfSrc) {this.$message.warning(未上传pdf文件)return}this.pdfDialogVisible true// pdfSrc url地址let loadingTask pdf.createLoadingTask(this.pdfSrc, {withCredentials: false});loadingTask.promise.then((pdf) {// 计算总页数this.numPages pdf.numPages;}).catch((err) {console.error(pdf 加载失败, err);});},2.预览异常解决方案 导致这个问题的主要原因是pdf预览组件未设置高度仅需要给pdf组件设置一个高度即可解决设置高度后再次预览一切正常代码如下 .pdf-preview {width: 60%;//flex: 1;//display: none;height: 100vh;margin: 0 auto;}.pdf-preview canvas {height: 100% !important;
}3.pdf预览显示不完整比如字体太大需要缩放等 a.优化代码加入缩放处理逻辑优点能动态调整缩放 b.修改父容器宽度会相应缩放pdf的大小缺点不能动态调整缩放
.el-dialog {display: flex;flex-direction: column;margin:0 !important;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);//height: 100%;max-height: calc(100% - 80px);max-width: 65%;
}4.相关大数据学习demo地址: https://github.com/carteryh/big-data
