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

最新推荐文章于 2025-05-13 15:58:07 发布

Sherry Tian

最新推荐文章于 2025-05-13 15:58:07 发布

阅读量5.6k

点赞数 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 [email protected]

在代码中引入

<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>