网站建设开发团队介绍上海seo网站策划
目录
一、下载pdf.js
二、引入到本地的项目中
三、实现预览pdf
四、跳转到指定页面
五、利用pdf里面的find查找关键词
六、修改页面大小为实际大小
一、下载pdf.js
https://github.com/mozilla/pdf.js
里面有很多的版本， 高版本的可能浏览器不兼容或者还要考虑手机上面的，最好下载低版本的，这里是v2.16.105版本
二、引入到本地的项目中
在本地static里面创建文件夹pdfjs，然后将下载包里面的文件放进pdfjs。
pdf.js包的目录结构
三、实现预览pdf
1、本地的PDF文件，直接在浏览器地址栏打开
利用 web里面的viewer.html就可以直接打开pdf,里面有默认的一个pdf文档。
直接在浏览器地址栏打开pdf: 开发地址 + viewer.html文件夹地址
比如按照以上步骤方法为 http://192.168.0.109:8081/static/pdfjs/web/viewer.html
只要能打开没有报错就没有什么问题
2、后端返回的pdf地址， 这里是创建组件利用iframe显示pdf文件
<template><div><iframe id="myIframe" :src="iframeSrc" width="100%" height="100%"></iframe></div>
</template><script>
export default {components: {},data() {return {iframeSrc: "../../../static/pdfjs/web/viewer.html",};},
}只需要在上面的连接上加上一个file=your-pdf-url就行了：（这里是组件注意viewer.html存放的位置）
比如：我的显示地址是：
this.iframeSrc='../../../static/pdfjs/web/viewer.html?file='+pdfUrl
解决报错：
出现这个错误就是跨域的问题，找到pdfjs/web/viewer.js文件，注销跨域代码就可以
// if (fileOrigin !== viewerOrigin) {
// throw new Error("file origin does not match viewer's");
// }
四、跳转到指定页面
根据pdf.js内置函数，可直接修改当前页面，没有太大的跳动，利用Iframe
const pdfFrame = document.getElementById('myIframe').contentWindow pdfFrame.PDFViewerApplication.page = 10
五、利用pdf里面的find查找关键词
search() {
const _iframe = document.getElementById('myIframe').contentWindow
_iframe.PDFViewerApplication.eventBus.dispatch("find", {
source: "",
type: "",
query: "政府组织",
phraseSearch: "",
caseSensitive: false,
entireWord: false,
highlightAll: true, //是否所有高亮
findPrevious: true,
matchDiacritics: true
},);
// 利用updatefindcontrolstate统计每页搜索条数
_iframe.PDFViewerApplication.eventBus.on('updatefindcontrolstate', (e) => {
console.log(e)
console.log(e.source._pageMatches);
})
},
六、修改页面大小为实际大小
修改viewer.js页面的代码
const DEFAULT_SCALE_VALUE = "auto"
// 修改成
const DEFAULT_SCALE_VALUE = "page-actual" //实际大小
修改viewer.html页面的代码
找到id="scaleSelectContainer" 下面的id="pageActualOption",如果有selected,就修改成selected="selected",没有就不改。
七、每次加载pdf都是在第一页
修改viewer.js页面的代码
找到 setInitialView函数 在里面添加一句代码：
this.pdfViewer.currentPageNumber=1;
八、修改pdf滚动方式为横向
修改viewer.html页面的代码