不使用插件直接进行pdf预览时,对于小文件没有任何问题,但在预览一个305M,近400页的pdf文件时,打开pdf直接拉到最后几页,会造成浏览器崩溃,于是尝试使用pdf.js的插件方式进行pdf预览,解决大文件浏览器崩溃的问题。
1、下载地址
主要用到里边的viewer.js和viewer.html文件
2、打开文件夹,把这两个文件放进程序,一个是build,一个是web文件夹,建议整个文件夹都放进去!到这差不多安装过程就ok了,viewer.html文件里边有默认的PDF文件
测试方法window.open('../pdf/web/viewer.html')
3、找到刚刚放入程序的文件,打开web文件目录,打开viewer.js文件找到他默认展示的PDF文件的路径改为value:’’(也可以不修改)
4、想要调用这个JS来预览PDF,方法跟上方测试方法差不多,只不过多加了一个条件调用方法:windows.open("/pdf/web/viewer.htmlfile=file.pdf");这个方法只能读取你web目录下的文件,如果想要读取你本地文件或者服务器文件就通过流的方式输出
5、获取本地/服务器文件
前端写法:通过点击事件触发预览
previewURL:项目地址路径filePath:要打开的项目encodeURIComponent:用于url特殊字符的转译(比如:;/:@&=+$,#这些用于分隔URI组件的标点符号)
//点击调用预览方法functionxx(filePath){varpreviewURL="127.0.0.1:8080/";window.open('../pdf/web/viewer.htmlfile='+encodeURIComponent(previewURL+"/testurl="+filePath));}后端写法:拿到文件地址,通过流的方式输出到移动端页面显示
//通过文件流的方式预览PDF文件@RequestMapping(value="test")publicvoidpdfStreamHandeler(HttpServletRequestrequest,HttpServletResponseresponse,HttpSessionsession){//获取路径StringfilePath=request.getParameter("url");Filefile=newFile(filePath);byte[]data=null;try{//编辑请求头部信息//解决请求头跨域问题(IE兼容性也可使用该方法)response.setHeader("Access-Control-Allow-Origin","*");response.setContentType("application/pdf");FileInputStreaminput=newFileInputStream(file);data=newbyte[input.available()];input.read(data);response.getOutputStream().write(data);input.close();}catch(Exceptione){}}
下面是我的项目中的调用方式:
7、常见问题
1).跨域错误:fileorigindoesnotmatchviewer’s解决方式:找到viewer.js中下方的这段代码注释掉
2).找不到文件错误:这个问题原因是因为没有获取到你本地或者服务器文件,也就是pdf>web目录里没有这个pdf,因为它默认是获取这个目录下的pdf文件
解决方式:获取本地文件或者服务器文件路径,通过流的方式输出到页面上3).文件损坏无法显示问题:出现这个问题一般都是你的url没有进行转码就直接请求到浏览器了,然后url存在的特殊字符会会让浏览器误认为你这个不是一个完整的链接
解决方式:查看前端访问的路径是否使用encodeURIComponent转码
8、如何隐藏插件自带的下载和打印功能?打开viewer.html文件,搜索