vue3项目中使用pdfjs-dist踩坑记录

最新推荐文章于 2025-09-11 17:06:41 发布

原创最新推荐文章于 2025-09-11 17:06:41 发布 · 6.2k 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #pdfjs-dist

前端bug集专栏收录该内容

10 篇文章

订阅专栏

有这么一个需求，要求打开pdf文件实现预览，分页跳转、搜索关键字。期望效果如下：
在这里插入图片描述
经过一番调研选择使用pdfjs-dist来完成这一功能。

第一种方案：使用npm在项目中安装pdfjs-dist

npm install pdfjs-dist

执行安装文件报错了，应该是node版本不兼容，到https://www.npmjs.com/上找往期版本，查了一些评论，评价2.16.105版本兼容性好，安装试一下。

npm i pdfjs-dist@2.16.105

在代码中引入

<template>
  <Modal
    v-model="visible"
    fullscreen
    footer-hide
    @on-cancel="cancel"
  >
    <div id="pdf-view">
      <canvas v-for="page in state.pdfPages" :key="page" id="pdfCanvas" />
      <div id="text-view"></div>
    </div>
  </Modal>
</template>
<script>
    import * as pdfjsViewer from 'pdfjs-dist/web/pdf_viewer.js'
    import 'pdfjs-dist/web/pdf_viewer.css'
    import * as PDF from 'pdfjs-dist'
    PDF.GlobalWorkerOptions.workerSrc = '/pdf.worker.js'
    const pdf = 'http://www.nhc.gov.cn/sps/s7887k/202301/0e55a01df50c47d9a4a43db026e3afc3/files/63f752a17cfd4b4781f744477561866f.pdf'
    let pdfDoc = null;
    export default {
        data () {
            return {
                state: {
                    // 文件路径
                    pdfPath: pdf,
                    // 总页数
                    pdfPages: 1, 
                    // 页面缩放
                    pdfScale: 1, 
                },
                visible: false,

            }
        },
        mounted () {
            // this.loadFile(this.state.pdfPath)
        },
        methods: {
            init () {
                this.visible = true
                this.loadFile(this.state.pdfPath)
            },
            cancel () {
                this.visible = false
            },
            loadFile(url) {
                PDF.getDocument({
                    url,
                    cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.16.105/cmaps/',
                    cMapPacked: true,
                }).promise.then((pdf) => {
                    pdfDoc = pdf
                    // 获取pdf文件总页数
                    this.state.pdfPages = pdf.numPages
                    this.$nextTick(() => {
                        this.renderPage(1) // 从第一页开始渲染
                    })
                })
            },
            renderPage(num) {
                pdfDoc.getPage(num).then((page) => {
                    const canvas = document.getElementById('pdfCanvas')
                    const ctx = canvas.getContext('2d')
                    const viewport = page.getViewport({ scale: this.state.pdfScale })
                    canvas.width = viewport.width
                    canvas.height = viewport.height
                    const renderContext = {
                        canvasContext: ctx,
                        viewport
                    }
                    page.render(renderContext)
                })
            }
        }
    }
</script>

引入的过程中发生了报错
在这里插入图片描述
原因是需要在引入 pdf is-dist 之后配置 workerSrc，但是引入 pdf is-dist/bui1d/pdf. worker.entry之后浏览器还是有个警告:Warning;Settingup fake worker.，几方查找原来是pdf.workerjs必须位于自己的文件中(而不是与pdfjs捆绑在起)。否则它不能在服务工作线程中运行。
解决方式:将 pdfis-dist/bui1d/pdf.worker.is 复制一份放到项目 public 目录下
在这里插入图片描述

能够预览但是不是想要的效果，貌似这种只能实现pdf预览功能，而我想要的是官方演示的那种带各种操作的效果。

第二种方法：直接将预构建版本放入public文件夹下使用viewer.html

在这里插入图片描述
下载，解压到public文件夹下。

使用

// 直接在新窗口中打开
window.open(`/pdfjs-2.5.207-dist/web/viewer.html?file=${pdfurl}`, '_blank')

在这里插入图片描述
找到pdfjs-2.5.207-dist/web/wiewer.js

效果如下，有个bug,打开pdf文件以后，分页数字会被缓存，下次再打开，会停留在这个页面，如果想回到第1页，需要做一下处理。

上面这个方法只能禁用本地对跨域的检查，如果引用的pdf文件地址是外链，依然会报跨域问题，如果对pdf的来源不能确定是不太好解决的。
在这里插入图片描述
上面这种跨域限制，就需要后端介入处理了。
如果产品只是要预览pdf文件，可以用第一种方法或者在新窗口打开pdf文件查看。

window.open(pdfurl, '_blank')

在浏览器的新窗口打开查看pdf文件，没有跨域问题，遗憾的是显示效果不能控制。先记到这儿吧，后期如果有更好的解决跨域方案再来更新。

vue3项目中使用pdfjs-dist踩坑记录

第一种方案：使用npm在项目中安装pdfjs-dist

第二种方法：直接将预构建版本放入public文件夹下使用viewer.html

参考链接