前情提要
在一开始要使用pdf预览的时候,第一次选的是vue-pdf,但是vue-pdf支持的功能太少,缺少了项目中需要的一项-复制粘贴功能
之后我一顿搜搜搜,最终貌似只有pdfjs能用
但是网上支持text-layer的貌似都是用的2.09那个版本。
使用textlayer出现的报错:
因为我项目中还有用到vue-pdf的地方,在我npm install pdfjs-dist之后,因为他们的依赖冲突库库报错,最后不得已用了本地的pdfjs
但是因为wiki内容不足,没找到最新版本的textlayer怎么调用,然后加上各种报错最后还是放弃了使用自己调用的pdfjs,选择了最方便的使用浏览器自带的pdfjs(这个问题也多,微信自带浏览器打开不显示)
这两天有空了,又找了找网上的代码,最终在某站上看到一个大佬用的是本地pdfjs,然后没用getDocment的方法,直接用本地的服务访问了pdfjs
vue实现案例
- 先去官网下载最新的pdfjs-dist
https://github.com/mozilla/pdf.js/releases
我下载的这个版本官网说是可以支持旧版浏览器 - 下载之后放到vue项目中的public目录下
在 web/viewer.mjs中 这段代码可以注释调,好像是避免跨域问题
javascript
// const fileOrigin = new URL(file, window.location.href).origin;
// if (fileOrigin !== viewerOrigin) {
// throw new Error("file origin does not match viewer's");
// }
- 这时候就可以访问下看看了
http://localhost:80/js/pdfjs/web/viewer.html (你自己的项目访问地址) - 然后给你项目中的pdf地址前面加上这个本地的地址后用iframe访问就可以了
javascript
<iframe
:src="pdfurl"
frameborder="0"
width="100%"
height="850px"
></iframe>
this.pdfurl = '/js/pdfjs/web/viewer.html?file=' + data.data.ulr;
- 用dom可以修改iframe中的样式(同源的情况下)
javascript
document.getElementsByTagName('iframe')[0].onload = function () {
var iframeDocument =
this.contentDocument || this.contentWindow.document;
var styleElement = iframeDocument.createElement('style');
styleElement.textContent = 'body { background-color: blue; }';
iframeDocument.head.appendChild(styleElement);
};
感谢下https://github.com/Laomai-codefee这个博主,很强
这个是博主用pdfjs实现的项目案例和一些使用方法(react)
https://github.com/Laomai-codefee/pdfjs-annotation-extension/blob/main/README_CN.md