Vue中接收二进制文件流实现pdf预览_vue使用jspdf实现在线预览,pdf是二进制流

Vue中接收二进制文件流实现pdf预览

后台Controller

@RequestMapping("/getPDFStream")
@ResponseBody
public void getPDFStream(HttpServletRequest request,HttpServletResponse response) {
	try {
		request.setCharacterEncoding("utf-8");
	} catch (UnsupportedEncodingException e) {
		logger.error("设置字符集UnsupportedEncodingException");
	}
	String fileName = request.getParameter("fileName");
	//文件路径
	String filePathname = Const.UPLOAD_HBFILE_PATH + "/" + fileName
			+ ".pdf";
	File file = new File(filePathname);
	byte[] data = null;
	if (!file.exists()) {
		logger.error("Sorry File does not Exists!");
	} else {
		try {
			FileInputStream input = new FileInputStream(file);
			data = new byte[input.available()];
			input.read(data);
			response.getOutputStream().write(data);
			input.close();
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
			logger.error("pdf文件处理异常");
		}
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

前台接收

1. 封装axios, request.js

   import axios from 'axios'
   /**
    * 封装axios异步请求的方法==================
    */
   //创建一个axios对象-----------
   const request = axios.create({
       //baseURL:'/dev-api',//基础路径
       baseURL:process.env.VUE_APP_BASE_API,//根据不同的环境，加载不同的常量值
     //  baseURL: '/',
       timeout: 50000,//请求超时，50000毫秒
   })
   //设置请求拦截器====================================
   //对拦截进行请求--------------------
   request.interceptors.request.use(config => {
       //请求拦截
       config.data = {
           ...config.data,
           userId: sessionStorage.getItem('userId')
       }
       return config;
   }, error => {
       //出现异常
       return Promise.reject(error);//es6写法
   });
   //设置响应拦截器==================================
   //对拦截进行响应--------------------
   request.interceptors.response.use(response =>{
       if(!response.data||response.data==""){
           return '{"flag":"failure","msg":"未知错误"}';
       }
       return response.data;
   },error =>{
       return Promise.reject(error);
   })
   export default request //导出自定义创建的axios对象,供其他组件进行使用
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35

2. 定义方法 common.js

   import request from '@/utils/request' //导入已经封装好的axios请求方式
   export function getPDFStream(param) {
      return request({
           url: 'xxxxxx/getPDFStream',
           method: 'post',
           //传递参数
           data: param,
           headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
           responseType: 'blob',
           transformRequest: function(obj) {
               var str = [];
               for (var p in obj)
                   str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
               return str.join("&");
           },
    })
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17

3. 页面代码

    <a-modal
     width="900px"
     title="文件查看"
     v-model="lookPdfFile"
     :footer="null"
     :forceRender="true"
     @ok="lookPdfFile"
   >
     <div :style="{ height: '600px', minHeight: '500px', margin: '8px 0px' }">
        <iframe :src="pdfUrl" id="previewPdf" frameborder="0" style="width: 100%; height: 100%"></iframe>
     </div>
   </a-modal>
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12

   //导入方法
   import {getPDFStream} from "@/api/common";
   //定义data
   lookPdfFile:false,//预览pdf
   pdfUrl:'',// pdf路径
   1
   2
   3
   4
   5

   关键代码（获取文件名称后调用getPDFStream方法获取文件流）

    let _this = this;
    if(suffix == 'pdf'){
      getPDFStream({
        fileName: filename,
      }).then(res => {
        let reader = new window.FileReader();
        // 使用readAsArrayBuffer读取文件, result属性中将包含一个 ArrayBuffer 对象以表示所读取文件的数据
        reader.readAsArrayBuffer(res);
        reader.onload = function(e) {
          const result = e.target.result
          const contentType = res.type
          // 生成blob图片,需要参数(字节数组, 文件类型)
          const blob = new Blob([result], { type: 'application/pdf' })
          // 使用 Blob 创建一个指向类型化数组的URL, URL.createObjectURL是new Blob文件的方法,可以生成一个普通的url,可以直接使用,比如用在img.src上
          if (window.createObjectURL != undefined) { // basic
            _this.pdfUrl = window.createObjectURL(blob)+'#toolbar=0'
          } else if (window.webkitURL != undefined) { // webkit or chrome
            try {
              _this.pdfUrl = window.webkitURL.createObjectURL(blob)+'#toolbar=0'
            } catch (error) {
   
            }
          } else if (window.URL != undefined) { // mozilla(firefox)
            try {
              _this.pdfUrl = window.URL.createObjectURL(blob)+'#toolbar=0'
            } catch (error) {
   
            }
          }
        }
        this.$nextTick(() => {
          this.lookPdfFile = true;
        })
      })
      return;
    }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36