使用pdfjs-dist预览文件

依赖

npm install pdfjs-dist@2.14.305

组件

<template><div id="pageContainer"><div id="viewer"></div></div>
</template><script>
import 'pdfjs-dist/web/pdf_viewer.css';
import * as pdfjsLib from 'pdfjs-dist';
import * as pdfjsViewer from 'pdfjs-dist/web/pdf_viewer';
import 'pdfjs-dist/build/pdf.worker.entry';
import * as pdfjsSandbox from 'pdfjs-dist/build/pdf.sandbox.js';pdfjsLib.GlobalWorkerOptions.workerSrc = window.pdfjsWorker;export default {name: 'PdfViewer',props: {pdfBlob: {type: Blob,required: true}},components: {},methods: {blobToArrayBuffer(blob) {return new Promise((resolve, reject) => {const reader = new FileReader();reader.onload = () => resolve(reader.result);reader.onerror = reject;reader.readAsArrayBuffer(blob);});}},async mounted() {if (!pdfjsLib.getDocument || !pdfjsViewer.PDFViewer) {alert('Please build the pdfjs-dist library using\n  `gulp dist-install`');}const CMAP_URL = './cmaps/';const CMAP_PACKED = true;const ENABLE_XFA = true;const SEARCH_FOR = '';const SANDBOX_BUNDLE_SRC = pdfjsSandbox;const container = document.getElementById('pageContainer');const eventBus = new pdfjsViewer.EventBus();const pdfLinkService = new pdfjsViewer.PDFLinkService({eventBus});const pdfFindController = new pdfjsViewer.PDFFindController({eventBus,linkService: pdfLinkService});const pdfScriptingManager = new pdfjsViewer.PDFScriptingManager({eventBus,sandboxBundleSrc: SANDBOX_BUNDLE_SRC});const pdfViewer = new pdfjsViewer.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 });}});const arrayBuffer = await this.blobToArrayBuffer(this.pdfBlob);const loadingTask = pdfjsLib.getDocument({data: arrayBuffer,cMapUrl: CMAP_URL,cMapPacked: CMAP_PACKED,enableXfa: ENABLE_XFA});const pdfDocument = await loadingTask.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>

打印

npm install vue-print-nb@1.7.5

<template><div id="printDiv"><div v-if="fileType === 'application/pdf'"><PdfViewer :pdfBlob="previewUrl"/></div><div style="text-align: center;" v-else ><img :src="previewUrl" /></div></div><a-button type="primary" v-print="printMe">打印</a-button>
</template><script>
import PdfViewer from './PdfViewer.vue';
import Print from 'vue-print-nb';
import * as dd from 'dingtalk-jsapi';export default {name: 'Preview', // 预览components: { PdfViewer },directives: { Print },data() {return {previewUrl: '',printMe: {// 打印区域id: 'printDiv',// 是否有打印预览preview: false},fileType: ''};}
}
</script>