当前位置：首页 > news >正文

vue2使用pdfjs-dist实现pdf预览（iframe形式，不修改pdfjs原来的ui和控件，dom层可以用display去掉一部分组件）

news 2025/5/22 2:51:09

前情提要

在一开始要使用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中这段代码可以注释调，好像是避免跨域问题


// 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访问就可以了

<iframe:src="pdfurl"frameborder="0"width="100%"height="850px"
></iframe>
this.pdfurl = '/js/pdfjs/web/viewer.html?file=' + data.data.ulr;

在这里插入图片描述

用dom可以修改iframe中的样式（同源的情况下）

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