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所在的后端服务路径。