关于对pdf.js(v2.1)在线预览base64格式所出现的问题
pdf.js
PDF Reader in JavaScript
项目地址:https://gitcode.com/gh_mirrors/pd/pdf.js
免费下载资源
·
先从第一步开始说吧 从官网下载 pdf.js文件 附官网地址:http://mozilla.github.io/pdf.js/getting_started/#download
下载下来后将会有一个build文件夹和web文件夹,然后将这两个文件放在vue的public下面 如下图:
在网上查了很多关于pdf.js在线预览base64格式的使用方式,虽然基本上说的都一样,注释掉 var DEFAULT_URL = “” 虽然是这么写的,但是我在这个2.1版本的pdf.js中并没有找到这个定义的方法
然后开始了一系列的查找,后来发现在 viewer.js 文件的第 5127 行的 defaultUrl 中自己设置一个DEFAULT_URL 如下图:
修改为下面的方式
然后还要在viewer.js.map文件下 搜索 compressed.tracemonkey-pldi-09.pdf 将其改为 DEFAULT_URL 记得要是字符串的呦
修改为
然后在 viewer.html 中将下面这一大坨代码放里面(记得要放在 viewer.js 之前呦)
<script type="text/javascript">
var DEFAULT_URL = "";
var pdfUrl = document.location.search.substring(1);
if(null == pdfUrl || "" == pdfUrl){
var BASE64_MARKER = ';base64,';//声明文件流编码格式
var preFileId = "";
var pdfAsDataUri = sessionStorage.getItem("_imgUrl");//这里就是pdf文件的base64码,我是通过session传递base64的
var pdfAsArray = convertDataURIToBinary(pdfAsDataUri);
DEFAULT_URL = pdfAsArray;
//编码转换
function convertDataURIToBinary(dataURI) {
//[RFC2045]中有规定:Base64一行不能超过76字符,超过则添加回车换行符。因此需要把base64字段中的换行符,回车符给去掉。
var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
var newUrl = dataURI.substring(base64Index).replace(/[\n\r]/g,'');
var raw = window.atob(newUrl);//这个方法在ie内核下无法正常解析。
var rawLength = raw.length;
//转换成pdf.js能直接解析的Uint8Array类型
var array = new Uint8Array(new ArrayBuffer(rawLength));
for (i = 0; i < rawLength; i++) {
array[i] = raw.charCodeAt(i) & 0xff;
}
return array;
}
}
</script>
最后在使用的时候先将viewer.html页面用iframe引入进来
然后将后台传给你的base64格式的代码放在本地的sess中就可以了,上面的一大坨代码就会直接执行啦,然后就可以看到效果啦
记得sess的命名一定要统一呦,上面获取的sess名字要和你存进去的名字统一,可别看错了 ;
然后就可以使用看到效果了,我这里就不展示出来了。
这里也说一下如果后台传给你的是一个url的话,直接将其拼接在iframe的src后面用file当参数传就好了,像下面一样
GitHub 加速计划 / pd / pdf.js
47.48 K
9.86 K
下载
PDF Reader in JavaScript
最近提交(Master分支:3 个月前 )
18284815
[Editor] Update the disclaimer string in the new alt-text dialog (bug 1911738) 3 个月前
fc602c65
And tweak the css in order to take into account that disclaimer can be on two (or more lines).
3 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)