pdf.js与base64结合转换成pdf文件实现在线预览

 时间:2024-10-11 19:50:25

最近在做JavaWeb的项目中,遇到这么个需求,客户想通过外网(即互联网)查看自己的合同pdf文件,但是要求是不能在前置服务器缓存揍茏壅混文件(就是不允许前置服务器下载文件),而且还要求有良好的浏览器兼容性。

pdf.js与base64结合转换成pdf文件实现在线预览

工具/原料

pdf.js

base64

准备阶段

1、因为不允许缓存文件,所以就要考虑怎样把文件传输给前端,虽然用流传输是个不错的方式,但是考虑到是网络传输,base64更具有一些优势。(虽然转换后体积会变大)

pdf.js与base64结合转换成pdf文件实现在线预览

2、又因为要考虑一个良好的浏览器兼容性,我选择了插件pdf.js,在IE9+和主流浏览器中使用起来很是方便。

pdf.js与base64结合转换成pdf文件实现在线预览

服务端处理

1、首先,服务端调用FileInputStream,读取pdf文件流,然后将读入的字节流转成base64字符串。然后发送给前置服务器。前置服务器做转发,发给前端。

pdf.js与base64结合转换成pdf文件实现在线预览

前端处理

1、现在问题的关键来了,前端拿到pdf的base64流如何处理呢。在这里,我们先不使用pdf.js官方提供的预览页面(viewer.html)了,只需要引入pdf.js 和pdf.w泠贾高框orker.js即可。

pdf.js与base64结合转换成pdf文件实现在线预览

2、然后先构建一个简单的页面结构<div id='container'><div id='pop'></div></div>

pdf.js与base64结合转换成pdf文件实现在线预览

3、然后首先将获得base64字符串做处理,替换掉多余的空格和换行符(FireFo垓矗梅吒x会自动无视这些空格和换行,但IE不行),然后使用浏览器自带的ato芟鲠阻缒b方法,base64转为数组。(想当于对base64的解码)

pdf.js与base64结合转换成pdf文件实现在线预览

4、然后将解码后的值传给PDFJS.getDocument(),交给pdf.js解析就好了,pdf就可以在浏览器中预览了。

pdf.js与base64结合转换成pdf文件实现在线预览
pdf.js与base64结合转换成pdf文件实现在线预览

5、原理:pdf.js本身就是基于流去读取pdf文件的,所以将处理后的pdf文件流直接赋值给PDFJS,是允许的,还避免了做跨域的处理。

pdf.js与base64结合转换成pdf文件实现在线预览
  • JavaScript中的ajax怎么用
  • 易语言窗口标题怎么修改?
  • 怎样用易语言取网络文件长度源码
  • 电脑重新安装后开机出现J字母
  • 易语言给软件添加获取本地时间的功能
  • 热门搜索
    小学生读书手抄报 语言文字手抄报 交通安全知识手抄报 竖版手抄报 五一劳动节手抄报内容 庆六一手抄报内容 抗疫英雄手抄报 法制手抄报内容资料 法制手抄报图片 世界地球日手抄报内容