• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

后台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 :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中接收二进制文件流实现pdf预览的方法的文章就介绍到这了,更多相关Vue 二进制文件流pdf预览内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界! 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Vue使用Tinymce富文本自定义toolbar按钮的实践发布时间:2022-02-05
下一篇:
TypeScript使用vscode监视代码编译的过程发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap