Vue2.0 通过vue-pdf-signature@4.2.7和pdfjs-dist@2.5.207实现PDF预览

1.安装依赖

npm install pdfjs-dist@2.5.207 --save

npm install vue-pdf-signature@4.2.7 --save

2.在.vue文件中 script 部分引入

<script>
import * as PDFJS from 'pdfjs-dist'
PDFJS.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.js');//解决pdf.js中文乱码问题
import pdf from 'vue-pdf-signature'
// 中文PDF加载空白引入依赖
import CMapReaderFactory from 'vue-pdf-signature/src/CMapReaderFactory'export default {components: {pdf},data(){return{pdfPages: 0,//pdf页数pdfDoc: null,//pdf对象}},mounted() {this.getFileData();},methods:{//获取后台返回的文件流getFileData() {this.$http.post("/doc/docarchivemanagereceive/preview", {...this.from,}, {responseType: 'blob',}).then(({data: res}) => {//pdf-main 滚动条回到顶部this.$nextTick(() => {document.getElementsByClassName('pdf-main')[0].scrollTop = 0})const blob = new Blob([res], {type: 'application/pdf'})let fileUrl = URL.createObjectURL(blob)this.loadFile(fileUrl)})},//加载pdf文件loadFile(url) {const loadingTask = pdf.createLoadingTask({url: url,cMapPacked: true,CMapReaderFactory});loadingTask.promise.then((pdf) => {this.pdfDoc = pdf;this.pdfPages = pdf.numPages;this.$nextTick(() => {for (let i = 0; i < this.pdfPages; i++) {this.renderPage(i + 1, i) // 从第一页开始渲染}})}).catch((err) => {console.error("pdf 加载失败", err);this.$message.error("PDF文件打开失败");});},//获取分辨率getDeviceDPI() {var dpi = 96; // 默认值 96dpiif (window.screen && window.screen.deviceXDPI && window.screen.logicalXDPI) {dpi = window.screen.deviceXDPI / window.screen.logicalXDPI * dpi;} else if (window.devicePixelRatio) {dpi = dpi * window.devicePixelRatio;}return dpi;},//渲染pdf页renderPage(num, index, scale = 1.5, rotation = 0) {let deviceDPI = this.getDeviceDPI();this.pdfDoc.getPage(num).then((page) => {var viewport = page.getViewport({scale: scale,rotation: page.getViewport({scale: scale}).rotation + rotation});// Support HiDPI-screens.var outputScale = window.devicePixelRatio || 1;var canvas = document.getElementById('pdfCanvas' + index);var context = canvas.getContext('2d');canvas.width = Math.floor(viewport.width * outputScale);canvas.height = Math.floor(viewport.height * outputScale);canvas.style.width = Math.floor(viewport.width) + "px";canvas.style.height = Math.floor(viewport.height) + "px";canvas.parentNode.style.width = canvas.width + 'px';canvas.parentNode.style.height = canvas.height + 'px';var transform = outputScale !== 1? [outputScale, 0, 0, outputScale, 0, 0]: null;var renderContext = {canvasContext: context,transform: transform,viewport: viewport};page.render(renderContext);})//pdfjs-dist 2.0.945版本getViewport(scale)的传参方式/* this.pdfDoc.getPage(num).then((page) => {var scale = 816 / page.getViewport(1).width * (window.devicePixelRatio || 1);var scaledViewport = page.getViewport(scale);var canvas = document.getElementById('pdfCanvas' + index);var context = canvas.getContext('2d');canvas.width = scaledViewport.width;canvas.height = scaledViewport.height;var renderContext = {canvasContext: context,viewport: scaledViewport};page.render(renderContext);})*/},}}</script>

3.在.vue文件中 html 部分引入

<!--pdf文件预览--><div class="pdf_view" ><div class="pdf-main">       <div class="pdf_item" v-for="(item,index) in pdfPages" :key="index"><canvas :id="'pdfCanvas' + index"/></div></div></div>

4.在.vue文件中 css 部分引入

.pdf_view {height: calc(100vh - 116px);overflow: hidden;background: #F2F4F7;}.pdf-main {width: 100%;height: calc(100vh - 116px);overflow: auto;padding: 20px 0 0 20px;display: flex;flex-direction: column;align-items: center;.pdf_item {position: relative;margin: 0 auto 20px;}
}

5.最终效果