由于项目需要,需要通过前台点击项目列表浏览对应的PDF文件内容(由于权限控制不允许下载),特此记录下实现过程。
1、下载需要用到的插件PDF.js(PDF.js),然后解压后将里面的文件放入新建的PDF.js文件夹里,再将PDF.js文件夹放入项目的资源文件备用。
2、后台获取到文件转化成流的方式通过接口传递给前台,以java为例如下:
String filepath=fileVo.getFilepath();
String filename=fileVo.getFilename();
if(filepath!=null){
//设置反应类型
try {
java.io.File file=new java.io.File(filepath);
if(!file.exists()){
return;
}
//利用PDF.js读取文件涉及到跨域访问,故添加权限
response.setHeader("Access-Control-Allow-Origin", "*");
response.setContentType("application/octet-stream;charset=utf-8");
response.setHeader("Content-Disposition", "attachment;filename="+file.getName());
} catch (Exception ex) {
ex.printStackTrace();
}
//读取指定路径下面的文件
InputStream in = new FileInputStream(filepath);
OutputStream outputStream = new BufferedOutputStream(response.getOutputStream());
//创建存放文件内容的数组
byte[] buff =new byte[1024];
//所读取的内容使用n来接收
int n;
//当没有读取完时,继续读取,循环
while((n=in.read(buff))!=-1){
//将字节数组的数据全部写入到输出流中
outputStream.write(buff,0,n);
}
//强制将缓存区的数据进行输出
outputStream.flush();
//关流
outputStream.close();
in.close();
}
3、前台点击列表访问后台接口读取文件流然后展示在界面上,如下所示:
<!--用于展示文件的页面-->
<iframe name="myframe" src="" width="100%;" height="600px; " ></iframe>
<!--页面点击-->
<a href='服务器地址/项目里PDF.js的文件地址/PDF.js/web/viewer.html?file=‘读取文件流的后台接口地址' target='myframe'>点击展示PDF</a>";
最后即可在iframe里展示具体的PDF文件,可以进行各种操作