react渲染pdf，vue渲染pdf，react pdfjs-dist不显示签章，盖章问题

React渲染pdf 

yarn add pdfjs-dist

安装pdfjs-dist，我这里使用的是 2.0.943版本的

文件中导入

import pdfjsLib from 'pdfjs-dist';

定义一个存储pdf内容和总页数的state，因为渲染pdf的时候需要创建canvas标签，标签需要给对应容器添加进去

const [total, setTotal] = useState([]); // pdf分页
const [pdfState, setPdfState] = useState({}); // 解析之后pdf

加载解析pdf文件

const loadingTask = pdfjsLib.getDocument(docsPdf);
// 解析pdf
loadingTask.promise.then((pdf) => {// 生成对应length的数组setTotal(Array.from({ length: pdf.numPages }, () => ({})));setPdfState(pdf);
});

useEffect监听pdfState的修改，如果不去监听的话，total和pdf同时拿到此时数据同步去处理对应的div和canvas是没有渲染的

// pdf解析完成之后去渲染生成canvas
// 因为渲染canvas外层元素的数据和修改pdf是同时拿到的，如果直接在上一个useEffect里面渲染canvas则拿不到外层的div
useEffect(() => {for (let index = 0; index <= pdfState.numPages; ) {renderer(pdfState, index);index++;}// eslint-disable-next-line react-hooks/exhaustive-deps
}, [pdfState]);

渲染pdf内容

// 渲染 canvas
const renderer = useCallback((pdf, pageNumber) => {pdf &&pdf.getPage(pageNumber).then(function (page) {const viewport = page.getViewport(1); // 这里的1是缩放，这里我写死了1倍缩放，可根据需要自行调整const canvas = document.getElementById(`pageCanvas_${pageNumber - 1}`) as any;const context = canvas.getContext('2d');canvas.height = viewport.height;canvas.width = viewport.width;const pageView = document.getElementById(`pageView_${pageNumber - 1}`) as any;pageView.style.height = `${viewport.height}px`;pageView.style.width = `${viewport.width}px`;page.render({canvasContext: context,viewport,});});},[],
);

render 组件部分，渲染对应数量的div和canvas容器,这里的样式自己定义

{total?.map((item, pageNumber) => (
))}

这样下来正常的pdf是没有了，但是在使用过程中发现签章，盖章的不显示，这里使用的是E签宝盖章，不知道别的平台或者盖章文件是否会有问题，此时需要有需要的话则需要把pdfjs-dist这个包拉下来，修改内部的代码，找到包里面的 pdf.worker.js文件，搜索 data.fieldType 

把if里面的 _this2.setFlags(_util.AnnotationFlag.HIDDEN);给注释了就可以正常显示签章了

Vue渲染pdf

安装 vue-pdf 这里用的是 4.3.0版本

yarn add vue-pdf

 如react一样，需要定义pdf内容和分页数据，这里就不拆开了，直接上全量代码

import pdf from 'vue-pdf';
// import Watermark from '@/utils/watermark';
import { Loading, Message } from 'element-ui';// ...data() {return {pdfSrc: '',numPages: 1,};
},
methods: {getNumPages(url) {Loading.service({lock: false,background: 'rgba(0, 0, 0, 0.3)',});var loadingTask = pdf.createLoadingTask(url);loadingTask.promise.then((pdfData) => {Loading.service().close();this.pdfSrc = loadingTask;this.numPages = pdfData.numPages;}).catch(() => {Loading.service().close();Message({message: '文件加载失败',type: 'error',duration: 5 * 1000,});});},
},

template渲染

在vue中使用vue-pdf不会出现签章不显示问题

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！