springboot+vue实现浏览器直接预览pdf文件
最近开发有个需求是,实现浏览器预览pdf文件,数据库存储的pdf文件url地址,通过url地址下载pdf文件,并返回流,最终实现pdf文件预览,需求不难,以下提供我的解决思路。
·
最近开发有个需求是,实现浏览器预览pdf文件,数据库存储的pdf文件url地址,通过url地址下载pdf文件,并返回流,最终实现pdf文件预览,需求不难,以下提供我的解决思路。
一,前端部分
点击按钮打开pdf
打开实现打开pdf方法
openpdf (url) {
// window.open(url,'_blank');
const sendurl = "/file/download";
download(sendurl,{fileUrl:url}).then((res) => {
const binaryData=[];
binaryData.push(res)
window.open(window.URL.createObjectURL(new Blob(binaryData,{'type':'application/pdf'})))
let objectUrl = window.URL.createObjectURL(new Blob([res]));
const elink = document.createElement('a');
})
},
发起请求的封装,responseType很重要,须设置为blob
export function download(url,param,data) {
return request({
url: url,
method: "post",
params: param,
data,
responseType: 'blob',//将文件流转成blob对象
noErrorMsg: false
});
}
二,后端部分
@Value("${web.upload-path}")
private String rootPath;
@RequestMapping(value = "/download", method = RequestMethod.POST)
public HttpServletResponse download(String fileUrl, HttpServletResponse response) throws IOException {
// path是指欲下载的文件的路径。
File file = new File(rootPath+"/"+fileUrl);
// 取得文件名。
String filename = file.getName();
// 取得文件的后缀名。
String ext = filename.substring(filename.lastIndexOf(".") + 1).toUpperCase();
// 以流的形式下载文件。
InputStream fis = new BufferedInputStream(new FileInputStream(rootPath+"/"+fileUrl));
byte[] buffer = new byte[fis.available()];
fis.read(buffer);
fis.close();
// 清空response
response.setCharacterEncoding("utf-8");
// response.setHeader("Content-disposition", "attachment;filename="+ filename + ".pdf");
// 设置response的Header
response.addHeader("Content-Disposition", "attachment;filename=" + new String(filename.getBytes()));
response.addHeader("Content-Length", "" + file.length());
OutputStream toClient = new BufferedOutputStream(response.getOutputStream());
// response.setContentType("application/octet-stream");
toClient.write(buffer);
toClient.flush();
toClient.close();
return response;
}
三,效果实现
更多推荐
已为社区贡献2条内容
所有评论(0)