Vue 使用 PDF.js

1、官网下载PDF.JS 官网地址
在这里插入图片描述
2、解压压缩包把文件放到public目录下

3、现在就可以在组件中直接使用了 src路径为相对路径 ./web/viewer.html

<template>
	 <iframe id="headerIframe" src="./web/viewer.html" style="width: calc(100% - 202px);" height="100%" frameborder="0"></iframe>
</template>

4、所预览的文件就是 compressed.tracemonkey-pldi-09.pdf
在这里插入图片描述

5、根据参数预览不同的PDF文件需要删除默认值，改为 defaultUrl 可在viewer.js下搜索默认pdf，文件名称 compressed.tracemonkey-pldi-09 修改为

// 修改前
  defaultUrl: {
    
    
    value: "compressed.tracemonkey-pldi-09.pdf",
    kind: OptionKind.VIEWER
  },
  
// 修改后
  defaultUrl: {
    
    
    value: "defaultUrl",
    kind: OptionKind.VIEWER
  },

// 为什么设置为defaultUrl 找到下面的代码你就知道了
  file = "file" in params ? params.file : _app_options.AppOptions.get("defaultUrl");

接下来就可以给file设置参数了

<template>
	 <iframe id="headerIframe" src="./web/viewer.html?file=5f5f2d1492555sss886s" style="width: calc(100% - 202px);" height="100%" frameborder="0"></iframe>
</template>

6、PDF默认签名信息是不会显示的只需要在 pdf.worker.js 中隐藏下面的代码即可

    // 显示用户签名信息
    /*if (data.fieldType === "Sig") {
      data.fieldValue = null;
      this.setFlags(_util.AnnotationFlag.HIDDEN);
    }*/

8、获取PDF的当前页面首先自定义一个方法，找到viewer.js 替换以下下代码可搜索方法名webViewerPageChanging

function webViewerPageChanging(evt) {
    
    
  // page 就是当前页的页码
  var page = evt.pageNumber;
  var myevent = new CustomEvent("tReady", {
    
    
    detail: {
    
    
      msg: page,
      doc: document
    },
    bubbles: true,
    cancelable: true
  });
  // 输出事件
  window.dispatchEvent(myevent);
  // 结束
  PDFViewerApplication.toolbar.setPageNumber(page, evt.pageLabel || null);
  PDFViewerApplication.secondaryToolbar.setPageNumber(page);

  if (PDFViewerApplication.pdfSidebar.isThumbnailViewVisible) {
    
    
    PDFViewerApplication.pdfThumbnailViewer.scrollThumbnailIntoView(page);
  }

  if (typeof Stats !== 'undefined' && Stats.enabled) {
    
    
    var pageView = PDFViewerApplication.pdfViewer.getPageView(page - 1);

    if (pageView && pageView.stats) {
    
    
      Stats.add(page, pageView.stats);
    }
  }
}

9、在组件中使用

// 建议修改this为that，这里this指向容易发生错误， 所获得的 page 是需要 PDF 滚动或超操作后才会触发，建议设置 page 默认值为 1， vue 中最好使用 watch 监听数据变化重新给 page 赋值
 var that = this;
 var iframe = document.getElementById("headerIframe").contentWindow;
	// that.page = iframe.PDFViewerApplication.page;
	iframe.addEventListener("tReady",  function (e) {
    
    
	var msg = e.detail.msg;
	that.page = msg;
});

猜你喜欢