html5 打开pdf文件-白红宇

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

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

//主要代码复制代码

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

// 主要代码import PDFJS from 'pdfjs-dist'export default {  data () {    return {      title: '',      pdfDoc: null,      loadding: false,      pages: 0    }  },  methods: {    renderPage (num) {      let _this = this      this.pdfDoc.getPage(num).then(function (page) {        let canvas = document.getElementById('the-canvas' + num)        let ctx = canvas.getContext('2d')        let dpr = window.devicePixelRatio || 1        let bsr = ctx.webkitBackingStorePixelRatio ||                  ctx.mozBackingStorePixelRatio ||                  ctx.msBackingStorePixelRatio ||                  ctx.oBackingStorePixelRatio ||                  ctx.backingStorePixelRatio || 1        let ratio = dpr / bsr        var viewport = page.getViewport(screen.availWidth / page.getViewport(1).width)        canvas.width = viewport.width * ratio        canvas.height = viewport.height * ratio        canvas.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 = this      PDFJS.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();  }}复制代码