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>
相关推荐
蓝天智能1 分钟前
QT QML交互原理:信号与槽机制
开发语言·qt·交互
Jonathan Star12 分钟前
跨域处理的核心是解决浏览器的“同源策略”限制,主流方案
javascript·chrome·爬虫
恶猫16 分钟前
Polaris Officev9.9.12全功能解锁版
pdf·word·excel·ppt·office·办公·打工
十五年专注C++开发17 分钟前
C++类型转换通用接口设计实现
开发语言·c++·跨平台·类设计
im_AMBER24 分钟前
杂记 15
java·开发语言·算法
Zzz 小生35 分钟前
编程基础学习(一)-Python基础语法+数据结构+面向对象全解析
开发语言·python
果粒chenl1 小时前
React学习(四) --- Redux
javascript·学习·react.js
沐知全栈开发1 小时前
Bootstrap4 表格详解
开发语言
CryptoRzz1 小时前
欧美(美股、加拿大股票、墨西哥股票)股票数据接口文档
java·服务器·开发语言·数据库·区块链
Never_Satisfied2 小时前
在JavaScript / HTML中,div容器在内容过多时不显示超出的部分
开发语言·javascript·html