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

最新推荐文章于 2025-04-10 17:09:09 发布

Sherry Tian

最新推荐文章于 2025-04-10 17:09:09 发布

阅读量5.4k

点赞数 28

分类专栏：前端bug集文章标签： javascript vue.js pdfjs-dist

本文链接：https://blog.csdn.net/misstianyun/article/details/142068408

版权

有这么一个需求，要求打开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>