PDF.js直读Base64编码(间接解决跨域问题)

首先项目给别人外包做的,里面涉及到pdf在线阅览的功能,之前做的时候也一直都是在Chrome中看的,很简单,直接通过iframe就能够实现。。但是人家测试就要用IE做测试,问题就暴露出来了。阅览默认给下载了,微软都快放弃IE了,你还坚持个什么劲呢。所以只能通过第三方的插件来进行实现阅览了,这个时候就发现了PDF.js,基础的pdf.js引用的方式与使用我这里就不做介绍了,网上很多也基本都是一样的操作,搜一下就行了,我这里就说明一下我所遇到的问题与解决的方式。

网上写的方式

直接将文档承载在viewer.html上显示,但是这种方式存在一个问题,跨域不能够解析,这是什么情况呢,就是你的项目地址与你查看的附件地址不在一台服务器上,有的项目就是采用这种部署方式。所以这样就会导致跨域的问题。这里首先解释一下这个地址,因为之前看很多文章也没写,我可能也是理解能力比较差,也是看了一会才明白这个地址是啥。这里的地址其实就是你的项目部署之后的ip+端口+viewer.html地址。我这里使用的是Hbuilder x编辑器,所以运行的时候会默认给到一个ip+端口。然后我前面贴图的asd也是ip+端口+你要预览的pdf的地址。这个时候你只要能保证两个域名是相同的,就能够保证成功预览。但是如果两个域名不同,就会报跨域的错误。

我这边使用了只更改前端就能够解决跨域的问题(使用文档的base64与pdf.js结合进行展示),不用麻烦后端做更改,也不用给pdf在做一层代理以达到同域名的情况,个人认为还是一个比较好的解决办法,大概过程就是把base64码存入浏览器中,然打开承载pdf的viewer.html,在viewer.html初始化的时候将码流转成pdf.js能够接受使用Uint8Array类型数组,后面会把这里面的一个关键点说明一下,不然使用window.atob会报错,然后在更改默认加载的文档,就ok了,接下来就说一下实现过程吧。

1:首先在你自己的页面中写入如下代码,很简单。

viewer.html地址根据你的项目来定。

2:修改viewer.html

首先找到在这个文件中引入viewer.js的地方,在上方添加一段js代码。

3:修改viewer.html引入的viewer.js

首先搜索DEFAULT_URL并将其注释,因为这个变量在viewer.html中已经进行了初始化并对其赋值,这里需要注释掉,不然会被重新初始化。

然后搜索compressed.tracemonkey-pldi-09.pdf,将其替换成刚才注释掉的变量DEFAULT_URL,更改显示的文档。

有的文章说viewer.js.map里的compressed.tracemonkey-pldi-09.pdf也需要被替换,但是我这边实测替不替换都不会对浏览显示有影响。这时运行你自己页面,就能够成功预览pdf了,这里也就不存在什么跨不跨域的问题了,网上有些文章写的也是只言片语,感觉做起来需要摸索的还是不少,这篇文章所有关键点都进行了贴图并且说明,按照这个步骤来进行应该是没问题的。

这个写的可能墨迹了些,目的是希望能够帮助到其他人。


版权声明:本文为uugannimei原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。