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>
相关推荐
遂心_9 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
遂心_10 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
前端Hardy10 小时前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy10 小时前
HTML&CSS:好精致的导航栏
前端·javascript·css
一个不爱写代码的瘦子11 小时前
迭代器和生成器
前端·javascript
源猿人14 小时前
企业级文件浏览系统的Vue实现:架构设计与最佳实践
前端·javascript·数据可视化
RoyLin14 小时前
TypeScript设计模式:迭代器模式
javascript·后端·node.js
小桥风满袖16 小时前
极简三分钟ES6 - ES9中for await of
前端·javascript
编程贝多芬17 小时前
Promise 的场景和最佳实践
前端·javascript
Asort17 小时前
JavaScript 从零开始(四):基础语法详解——从变量声明到数据类型的完全指南
前端·javascript