这篇文章主要讲解了“Vue中接收二进制文件流如何实现pdf预览”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue中接收二进制文件流如何实现pdf预览”吧!
@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预览这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。