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

这篇文章主要讲解了“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文件处理异常");   }  } }

前台接收

封装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对象,供其他组件进行使用

定义方法 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("&");         },  }) }

页面代码

 <a-modal   width="900px"   title="文件查看"   v-model="lookPdfFile"   :footer="null"   :forceRender="true"   @ok="lookPdfFile" >   <div :>      <iframe :src="pdfUrl" id="previewPdf" frameborder="0" ></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中接收二进制文件流如何实现pdf预览”的内容了，经过本文的学习后，相信大家对Vue中接收二进制文件流如何实现pdf预览这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！