vue版pdf.js 在线预览pdf文件流

1、简介

由于我使用的是若依版的vue前端框架(ElementUI二开)，因此不知道为什么在前端配置pdf.js一直无法生效，所以换了一个思路，将pdf.js相关文件放置在后台代码中，以访问后台页面的方式实现pdf预览。

2、pdf插件在后台代码的目录结构

我是把pdf.js文件放在了后台代码中，当然也可以使用nginx做代理，总之只要是第三方服务即可，前提是要处理好跨域问题。

3、后台获取文件流，与前端交互方法

 /*** 根据fileInfoId获取文件流*/@GetMapping("/getPdfFileStream/{fileInfoId}")public void getPdfFileStream(HttpServletResponse response, @PathVariable String fileInfoId) throws IOException {if (StringUtils.isEmpty(fileInfoId)) {log.info("缺少关键参数：fileInfoId");return;}byte[] data = fileInfo.getPdfFileStream(fileInfoId);OutputStream outputStream = response.getOutputStream();outputStream.write(data);outputStream.flush();outputStream.close();}

核心方法：

 /*** 获取文件流* * @param filePath 文件路径* @return*/public static byte[] getFileStream(String filePath) {InputStream is = getFile(filePath);try {return IOUtils.toByteArray(is);} catch (Exception e) {log.error("文件加载异常 {}", e);return null;} finally {IOUtils.closeQuietly(is);}}

4、前端访问后端接口方法：

// 根据fileInfoId获取PDF文件流
export function getPdfFileStream(fileInfoId) {return request({url: bmGlobal.server.getWorkflow+'/bmFileUpload/getPdfFileStream/'+fileInfoId,method: 'get',responseType: 'blob'})
}

重点是：responseType: 'blob'，要不前端无法解析为blob数据类型。

5、组件中解析

getPdfFileStream(row.id).then(response=>{
this.viewPdfFileStream(response);
});

/**获取pdf文件流并且预览
* @param {Object} row
*/
viewPdfFileStream(response){
let blob = new Blob([response])
let fileURL = window.URL.createObjectURL(blob); //创建下载的链接
let url = this.hostServer + "/js/pdf/web/viewer.html?file="+fileURL;
window.open(url, '_blank');
}

this.hostServer就是pdf.js所在的后端服务路径。

vue版pdf.js 在线预览pdf文件流相关推荐

pdf.js在线预览PDF文件实现
pdf.js是一款功能比较强大的在线预览PDF插件,自带"打印","搜索","翻页"等功能,强大且实现方便,并且兼容性比较好(兼容ie10及 ...
js在线预览pdf文件
js在线预览PDF文件一.效果预览二.实现代码: <html> <head> <meta http-equiv="Content-Type" co ...
fis3+vue+pdf.js制作预览PDF文件或其他
人生第一篇博客,的确有点紧张,但有些许兴奋,因为这对于我来说应该是一个好的开始,以此励志在技术的道路上越走越远. 看过了多多少少的技术博客,给自己带来了很多技术上的收获,也因此在想什么时候自己也可以赠 ...
js在线预览pdf,doc,xls,jpg等文件
由于项目需要,需要在上传文件后在线预览所上传的文件.最开始我的思路就是想到各种插件什么的.比如说pdf.js.pdfobject,但最后都没能达到我所想要的效果. 最后我发现,原来,只需要一个很简单的 ...
网页嵌入pdf、在线预览pdf工具及插件（转）
摘要:在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件: 问题1:如何网页中嵌入PDF: 在网页中: 常用的几种PDF预览代码片段如下: 代码片段1: 1 <object ty ...
html js 在线预览 pdf word xls等
1.前端实现pdf文件在线预览功能方式一.pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面.在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签href属性实现预览 <a ...
使用iText动态生成pdf，并用pdf.js在线预览
Java有很多生成pdf的工具库,常用的有Apache PdfBox,iText,POI.我的项目里用的是iText. 下面说下详细步骤: 后台引入依赖: &l ...
springboot+vue整合pdf.js实现预览pdf
前景回顾: 上一次说到使用浏览器自带的预览pdf功能所遗留的问题,360浏览器不够给力,IE的我没测,估计也不行,于是乎我又翻阅资料(度娘)找到了一种新的实现方式,使用pdf.js实现如果想看使用浏 ...
pdf.js——在线预览下载打印pdf文件插件
html页面使用下载PDF.js, http://mozilla.github.io/pdf.js/getting_started/#download 将 pdfjs 文件夹放到项目static ...

vue版pdf.js 在线预览pdf文件流

vue版pdf.js 在线预览pdf文件流相关推荐

最新文章

热门文章