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;
});