html5 打开pdf文件

1. 主要采用了pdf.js插件，有两种不同的展示形式

方式1： iframe方式展示 该方式需要在static文件夹下引入pdfjs的相关文件，具体参照这篇文章

//主要代码<iframe width="100%" height="1000px" scrolling="no":src="`${baseUrl}web/viewer.html?file=${baseUrl}web/polarisV1.0.6.0.pdf`"></iframe>复制代码

方式2： canvas形式展示 这种方式需要在package.json中引入pdf相关依赖 npm地址

// 主要代码import PDFJS from 'pdfjs-dist'export default {data () {return {title: '',pdfDoc: null,loadding: false,pages: 0}},methods: {renderPage (num) {let _this = thisthis.pdfDoc.getPage(num).then(function (page) {let canvas = document.getElementById('the-canvas' + num)let ctx = canvas.getContext('2d')let dpr = window.devicePixelRatio || 1let bsr = ctx.webkitBackingStorePixelRatio ||ctx.mozBackingStorePixelRatio ||ctx.msBackingStorePixelRatio ||ctx.oBackingStorePixelRatio ||ctx.backingStorePixelRatio || 1let ratio = dpr / bsrvar viewport = page.getViewport(screen.availWidth / page.getViewport(1).width)canvas.width = viewport.width * ratiocanvas.height = viewport.height * ratiocanvas.style.width = viewport.width + 'px'canvas.style.height = viewport.height + 'px'ctx.setTransform(ratio, 0, 0, ratio, 0, 0)var renderContext = {canvasContext: ctx,viewport: viewport}page.render(renderContext)if (_this.pages > num) {_this.renderPage(num + 1)}})},loadFile () {let url = '../../static/web/polarisV1.0.6.0.pdf'// let url = '../../static/web/typescript-tutorial.pdf'let _this = thisPDFJS.getDocument(url).then(function (pdf) {_this.pdfDoc = pdf_this.pages = _this.pdfDoc.numPages_this.$nextTick(() => {_this.renderPage(1)})})}},mounted () {// let url = Base64.decode(this.$route.query.url)PDFJS.GlobalWorkerOptions.workerSrc ='../../node_modules/pdfjs-dist/build/pdf.worker.js';this.loadFile();}}复制代码