react手机端使用pdfjs-dist预览显示PDF

原创

于 2021-12-03 16:45:55 发布 · 2.6k 阅读

CC 4.0 BY-SA版权

文章标签：

本文介绍了在React项目中使用pdfjs-dist库预览PDF文件的详细步骤，包括解决worker-loader依赖问题，组件封装，处理PDF展示的尺寸与缩放，以及解决特殊PDF中电子印章和签名显示问题的方法。

1、直接npm install 下载pdfjs-dist。

在下载后可能会遇到以下报错，

This dependency was not found: worker-loader!pdfjs-dist/build/pdf.worker.js in......；

这时候直接npm install -g worker-loader 即可解决上述问题。

2、项目中引用

import PDFJS from 'pdfjs-dist';
import PropTypes from 'prop-types';
import AlloyFinger from 'alloyfinger';
import Transform from 'css3transform';

3、封装组件

（1）定义组件数据

（2）根据传递过来的路径判断是否是可正常展示的pdf

（3）设计要展示在页面上的pdf规格

（4）计算pdf合适的展示大小并加载

（5）设计展示页并编写手势缩放功能

新学期VIP享超值加赠