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>
相关推荐
Light602 小时前
领码方案|Linux 下 PLT → PDF 转换服务超级完整版:异步、权限、进度
linux·pdf·可观测性·异步队列·plt转pdf·权限治理·进度查询
ftswsfb2 小时前
PDF文件基础-计算机字体
pdf
lingchen19062 小时前
MATLAB的数值计算(三)曲线拟合与插值
开发语言·matlab
gb42152872 小时前
java中将租户ID包装为JSQLParser的StringValue表达式对象,JSQLParser指的是?
java·开发语言·python
一朵梨花压海棠go2 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
蒋星熠3 小时前
Flutter跨平台工程实践与原理透视:从渲染引擎到高质产物
开发语言·python·算法·flutter·设计模式·性能优化·硬件工程
翻滚丷大头鱼3 小时前
Java 集合Collection—List
java·开发语言
aramae3 小时前
C++ -- 模板
开发语言·c++·笔记·其他
胡耀超3 小时前
4、Python面向对象编程与模块化设计
开发语言·python·ai·大模型·conda·anaconda
一只小风华~4 小时前
Vue: Class 与 Style 绑定
前端·javascript·vue.js·typescript·前端框架