PDF.js-预览pdf文件

1.安装引入

npm i vue-pdf-signature

javascript 复制代码
import Pdf from 'vue-pdf-signature';
// 引入CMapReaderFactory库 解决动态文字丢失问题
import CMapReaderFactory from 'vue-pdf-signature/src/CMapReaderFactory.js';

2.使用方式

javascript 复制代码
data() {
    return {
      pageCount: 0,
    }
}

// 方法里调用  通过文件路径
const loadingTask = window.location.origin + file[0].filePath;
this.pdfSrc = Pdf.createLoadingTask({
     url: loadingTask,
     CMapReaderFactory,
});
this.pdfSrc.promise.then(pdf => {
this.pageCount = pdf.numPages;
    this.loading = false;
}).catch(err => {
   this.$message.warning('预览失败,请重试');
   console.log(err);
});

3.template里渲染

javascript 复制代码
          <div v-for="i in pageCount" :key="i" style="outline: 1px solid #ccc;margin: 15px auto;">
            <!-- pdf预览 -->
            <pdf ref="pdfRef" :src="pdfSrc" :page="i" />
          </div>
相关推荐
天***889616 分钟前
js封装一个双精度算法实现
开发语言·前端·javascript
.小小陈.23 分钟前
数据结构2:单链表
c语言·开发语言·数据结构·笔记·学习方法
Camel卡蒙28 分钟前
数据结构——二叉搜索树Binary Search Tree(介绍、Java实现增删查改、中序遍历等)
java·开发语言·数据结构
Algebraaaaa28 分钟前
什么是前端、后端与全栈开发,Qt属于什么?
开发语言·前端·qt
立志成为大牛的小牛31 分钟前
数据结构——二十三、并查集的终极优化(王道408)
开发语言·数据结构·笔记·学习·程序人生·考研
胡斌附体37 分钟前
使用Electron创建helloworld程序
前端·javascript·electron·nodejs·pc
toobeloong40 分钟前
Electron 从低版本升级到高版本 - webview通信的改造
前端·javascript·electron
im_AMBER1 小时前
React 01
前端·javascript·笔记·react.js·前端框架·web
@大迁世界1 小时前
React 19.2.0 有哪些新变化
前端·javascript·react.js·前端框架·ecmascript