pdfdist-js 移动端 vue2 使用setDocument渲染实现PDF展示

版本：

"pdfjs-dist": "2.0.943",
"vue": "2.6.11",

最开始用的渲染方式是每页都去创建一个canvas（参考这篇juejin.cn/post/713723…）,这个处理方式是根据PDF.getDocument方法得到pdf渲染实例，对pdf文件的每一页去渲染，但是在移动端IOS中使用时，如果文件过大，渲染就会有问题，后面的页面会空白，安卓里面没有问题

经过一些方案尝试后，后来发现另外的渲染方式，就是采用pdfViewer.setDocument这个方法，完美解决，对于之前的渲染方式，pc端也会卡，但是还没有去修改，推荐都用这个方法，比自己创建canvas简单很多

给出的代码只是部分，需要自己调试修改

template

<div
  id="pdfContainer"
  :style="`height: ${overlayHeight}px;`"
>
  <div
    id="viewer"
    class="pdfViewer"
  ></div>
</div>

script

import PDF from 'pdfjs-dist';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.min.js';
import {
  PDFLinkService,
  PDFViewer,
  PDFFindController
} from 'pdfjs-dist/web/pdf_viewer';
import 'pdfjs-dist/web/pdf_viewer.css';

PDF.GlobalWorkerOptions.workerSrc = pdfjsWorker;

export default ({
    methods: {
        onPdfPagesLoaded() {
          console.log('pagesloaded');
          if (!this.pdfViewer) {
            return;
          }
          // 获取页面视图
          const pageView = this.pdfViewer.getPageView(0);
          if (pageView) {
            const viewport = pageView.viewport;

            // 计算适应页面的缩放级别
            const containerWidth = this.container.clientWidth; // 获取容器的宽度
            const scale = containerWidth / viewport.width; // 计算缩放比例

            // 设置缩放级别
            if (typeof scale === 'number' && scale > 0) {
              this.pdfViewer._setScale(scale);
            }
          
          }
        },
        init() {
            const linkService = new PDFLinkService();
            const container = document.getElementById('pdfContainer'); // 显示PDF的容器dom
            this.container = container;
            const pdfViewer = new PDFViewer({
              container,
              textLayerMode: 0, // 显示文字类型 渲染文字图层
              renderInteractiveForms: false, // 是否渲染 PDF 页面中的交互式表单
              enablePrintAutoRotate: false, // 是否自动旋转打印输出
              linkService
            });
            this.pdfViewer = pdfViewer;
            PDF.getDocument(padUrlsd)
              .then((pdf) => {
                if (!pdfViewer) {
                  return;
                }
                this.pageTotalNum = pdf._pdfInfo.numPages;
                this.pdfInstance = pdf;
                this.changeMeta('3.0');
                try {
                  pdfViewer.setDocument(pdf);
                  linkService.setDocument(pdf);
                  linkService.setViewer(pdfViewer);
                } catch (error) {
                  console.log('setDocument error', error);
                }
                this.rendering = true;

                /// 监听 PDF 文档渲染完成事件
                try {
                  pdfViewer.eventBus.on('pagesloaded', this.onPdfPagesLoaded);
                } catch (error) {
                  console.log('pagesloaded error', error);
                }
              })
        }
    }
)}