使用pdfjs-dist预览文件
依赖
npminstallpdfjs-dist@2.14.305
组件
<template><divid="pageContainer"><divid="viewer"></div></div></template><script>import'pdfjs-dist/web/pdf_viewer.css';import*aspdfjsLibfrom'pdfjs-dist';import*aspdfjsViewerfrom'pdfjs-dist/web/pdf_viewer';import'pdfjs-dist/build/pdf.worker.entry';import*aspdfjsSandboxfrom'pdfjs-dist/build/pdf.sandbox.js';pdfjsLib.GlobalWorkerOptions.workerSrc=window.pdfjsWorker;exportdefault{name:'PdfViewer',props:{pdfBlob:{type:Blob,required:true}},components:{},methods:{blobToArrayBuffer(blob){returnnewPromise((resolve,reject)=>{constreader=newFileReader();reader.onload=()=>resolve(reader.result);reader.onerror=reject;reader.readAsArrayBuffer(blob);});}},asyncmounted(){if(!pdfjsLib.getDocument||!pdfjsViewer.PDFViewer){alert('Please build the pdfjs-dist library using\n `gulp dist-install`');}constCMAP_URL='./cmaps/';constCMAP_PACKED=true;constENABLE_XFA=true;constSEARCH_FOR='';constSANDBOX_BUNDLE_SRC=pdfjsSandbox;constcontainer=document.getElementById('pageContainer');consteventBus=newpdfjsViewer.EventBus();constpdfLinkService=newpdfjsViewer.PDFLinkService({eventBus});constpdfFindController=newpdfjsViewer.PDFFindController({eventBus,linkService:pdfLinkService});constpdfScriptingManager=newpdfjsViewer.PDFScriptingManager({eventBus,sandboxBundleSrc:SANDBOX_BUNDLE_SRC});constpdfViewer=newpdfjsViewer.PDFViewer({container,eventBus,linkService:pdfLinkService,findController:pdfFindController,scriptingManager:pdfScriptingManager,enableScripting:true});pdfLinkService.setViewer(pdfViewer);pdfScriptingManager.setViewer(pdfViewer);eventBus.on('pagesinit',function(){pdfViewer.currentScaleValue='1.5';if(SEARCH_FOR){eventBus.dispatch('find',{type:'',query:SEARCH_FOR});}});constarrayBuffer=awaitthis.blobToArrayBuffer(this.pdfBlob);constloadingTask=pdfjsLib.getDocument({data:arrayBuffer,cMapUrl:CMAP_URL,cMapPacked:CMAP_PACKED,enableXfa:ENABLE_XFA});constpdfDocument=awaitloadingTask.promise;pdfViewer.setDocument(pdfDocument);pdfLinkService.setDocument(pdfDocument,null);}};</script><style>#pageContainer{position:absolute;overflow:hidden;width:100%;text-align:center;}#pageContainer .page{display:inline-block;position:relative;overflow:hidden;box-sizing:border-box;margin-bottom:2px;}#pageContainer #viewer .page{width:auto!important;}#pageContainer #viewer .page .canvasWrapper{width:auto!important;}#pageContainer #viewer .page .textLayer{width:auto!important;}#pageContainer #viewer .page .annotationLayer{width:auto!important;}</style>
打印
npminstallvue-print-nb@1.7.5
<template><divid="printDiv"><divv-if="fileType === 'application/pdf'"><PdfViewer:pdfBlob="previewUrl"/></div><divstyle="text-align:center;"v-else><img:src="previewUrl"/></div></div><a-buttontype="primary"v-print="printMe">打印</a-button></template><script>importPdfViewerfrom'./PdfViewer.vue';importPrintfrom'vue-print-nb';import*asddfrom'dingtalk-jsapi';exportdefault{name:'Preview',// 预览components:{PdfViewer},directives:{Print},data(){return{previewUrl:'',printMe:{// 打印区域id:'printDiv',// 是否有打印预览preview:false},fileType:''};}}</script>
