公益机构网站建设方案,湖南营销型网站建设团队,h5网站和传统网站,穷人没本钱怎么创业本文中使用的PDF.js组件版本为3.11.174#xff08;最新版使用上会有所不同#xff09;#xff0c;引入文件如下#xff1a; 首先页面定义一个隐藏的弹窗块#xff08;此处用ElementUI的Dialog组件#xff09;
el-dialog refdialogPDF :titlepdffi…本文中使用的PDF.js组件版本为3.11.174最新版使用上会有所不同引入文件如下 首先页面定义一个隐藏的弹窗块此处用ElementUI的Dialog组件
el-dialog refdialogPDF :titlepdffile.name center :visible.syncisPDFVisible width80% :close-on-click-modaltrue :show-closetruediv*canvas idpdf-canvas/canvas*!--由于是要展示所有面面所以所有页面都分别绑定一个canvas--canvas refpdf-canvas v-fornum in pdfPages/canvas/div
/el-dialog
绑定的Vue Data:
data: function() {return {pdffile: {},isPDFVisible: false,pdfPages: 0,..........}
}
要展示的文件这里集成在一个上传组件中如代码所示
el-form-item label附件 propFileIDsArraydiv stylemax-height:512px;overflow-x:auto;el-upload refupload_attach :file-listeditForm.FileInfos drag list-typepicture-card multiple :limitmaxUpload :on-exceedhandleExceed:actionuploadUrl :auto-uploadautoupload *:headersheaders* :datauploadParam :on-changehandleChange1 :before-uploadbeforeUpload:on-successuploadSuccess1 *:on-previewpreviewPic* :on-removeremoveAttachFile1 :before-removebeforeRemove :class{hideUnload:notAttachUploader}*em classel-icon-plus/em*em classel-icon-upload/emdiv classel-upload__text将文件拖到此处或em点击上传/em/divdiv slotfile slot-scope{file}*img classel-upload-list__item-thumbnail:srcfile.url alt*span{{file.name}}/spanspan classel-upload-list__item-actionsspan classel-upload-list__item-preview stylefont-size: inherit; v-show!!file file.name.slice(-4).toLowerCase().pdfclickhandleViewFile(file)i classel-icon-zoom-in/i/spanspan classel-upload-list__item-deleteclickhandleDownload(file)i classel-icon-download/i/spanspan classel-upload-list__item-deleteclick$refs.upload_attach.$refs[upload-inner].onRemove(file);i classel-icon-delete/i/span/span/div/el-upload/div
/el-form-item
重点是在显示PDF文件内容的方法——handleViewFile(file)
handleViewFile: function (file) {var pThis this;this.pdffile file;this.isPDFVisible true;this.$nextTick(function () {//const canvas document.getElementById(pdf-canvas);pdfjsLib.getDocument(file.url).promise.then(function (pdfDoc) {pThis.pdfPages pdfDoc.numPages;//由于canvas.getContext(2d)必须是在生成DOM并显示的情况下操作由此需先isPDFVisibletrue显示出组件并在$nextTick完成DOM加载后再处理pdf内容的渲染pThis.$nextTick(function () {for (var i 1; i pThis.pdfPages; i) {const canvas pThis.$refs[pdf-canvas][i - 1];pdfDoc.getPage(i).then(function (page) {const viewport page.getViewport({ scale: 1 });const context canvas.getContext(2d);canvas.height viewport.height;canvas.width viewport.width;page.render({canvasContext: context,viewport: viewport});});}});});});
}, 参考文章
PDF.js 示例简介
https://blog.csdn.net/github_36738403/article/details/131325145
如何显示整体PDF不仅仅是一页PDF.JS
https://www.codenong.com/cs108161952/
