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<any[]>([]); // pdf分页
const [pdfState, setPdfState] = useState<any>({}); // 解析之后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) => (
  <div key={pageNumber} id={`pageView_${pageNumber}`} className={styles['pageView']}>
    <canvas id={`pageCanvas_${pageNumber}`} className={styles['pageCanvas']} />
  </div>
))}

这样下来正常的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渲染

<template>
  <div ref="watermark001">
    <pdf v-for="(item, index) of numPages" :key="index" :src="pdfSrc" :page="item"></pdf>
  </div>
</template>

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