html5 打开pdf文件

最新推荐文章于 2025-06-22 09:45:12 发布

转载最新推荐文章于 2025-06-22 09:45:12 发布 · 5.6k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b72d009f265da28232ed6f1

文章标签：

#json

本文介绍两种使用PDF.js展示PDF文档的方法：iframe和canvas。通过详细代码示例展示了如何配置和加载PDF文件，并利用canvas实现页面渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 = 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();
  }
}
复制代码