使用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>