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

这篇文章主要讲解了“Vue中接收二进制文件流如何实现pdf预览”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue中接收二进制文件流如何实现pdf预览”吧！

后台Controller

@RequestMapping("/getPDFStream")@ResponseBodypublic 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对象-----------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 :class="lazy" data-src="pdfUrl" id="previewPdf" frameborder="0" ></iframe>  </div></a-modal>

//导入方法import {getPDFStream} from "@/api/common";//定义datalookPdfFile:false,//预览pdfpdfUrl:'',// 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.class="lazy" data-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预览这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！