Vue中接收二进制文件流实现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. 封装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对象,供其他组件进行使用
    
  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("&");
            },
     })
    }
    
  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>
    
    //导入方法
    import {getPDFStream} from "@/api/common";
    //定义data
    lookPdfFile:false,//预览pdf
    pdfUrl:'',// pdf路径
    
    关键代码(获取文件名称后调用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;
     }
    

你可能感兴趣的:(Vue)