Vue结合java后台详解导出Excel乱码问题(二进制文件流)

Vue结合后台详解导入导出Excel问题

一连十六卦,卦卦皆无你,罢了,杀了那算命的~

今天讲讲 前台Vue配合后台(java)导出Excel 后台返回的数据是 二进制文件流 如何将此变为 弹框下载

当时开发呢,我们后台是java 有控件 可以直接将数据导出并生成Excel文件,但是前后台传输是不可能直接传输文件的,是以二进制文件流进行传输的,此时呢就会遇到一个问题,因为是后台,必然会涉及到权限,权限就涉及到token,token传输就会出现限制问题,所以我会列出三种方法

我的是Vue项目~~

1. 不需要token的方法

这个的意思呢就是写一个类似的隐藏域 ifram 标签独有的特性 , 不明白的可以去W3cschool 查一查, 后面拼接的参数就是导出条件,按个人需要进行,这个亲测有效!

2.第二种就涉及到token了 , 就是使用javascript的内置对象来解析,方法就是使用axios请求 请求过来的二进制文件流进行解析

    // 导出 Excel
    downloadFile() { // 这是methods中的方法
        downLoadPayListFn({...this.form}).then(res => { // 这个是我封装的方法 就是通过axios请求进行拦截 添加token  form是data中的数据 也就是筛选条件 
            const fileName = '测试表格123.xls';
            if ('download' in document.createElement('a')) { // 非IE下载
                const blob = new Blob([res], {type: 'application/ms-excel'});
                const elink = document.createElement('a');
                elink.download = fileName;
                elink.style.display = 'none';
                elink.href = URL.createObjectURL(blob);
                document.body.appendChild(elink);
                elink.click();
                URL.revokeObjectURL(elink.href); // 释放URL 对象
                document.body.removeChild(elink);
            }
        })
    },

这个blob是js的内置对象 就是将其转化为文件 详情解释可以去查 blob

import fetch from 'utils/fetch';
import Qs from 'qs';

// 导出数据
export function downLoadPayListFn(obj) {
    return fetch({
        url: '/admin/pay/exportExcel',
        method: 'get',
        params: obj,
        responseType: 'blob',
        /* header: {
            'Content-Type': "application/x-www-form-urlencoded; charset=utf-8"
        } */
    });
}

在这里一定要加上  responseType: 'blob',否则不会生效 切记!!!!

看网上写的是这个样子 当然也根据后台返回给你的数据进行展示 饿哦们后台返回的数据没有进行包装 所以直接就是response,搞就完事了.

3.第三种方法 使用form 表单提交 隐藏域使用

这个就需要后台配合配置一下网关,如果有header中有token的话就去header中取 没有的话就去参数中取,这个亲测好使,
这里附上我的qq : 2489757828 有问题可以咨询我
我的私人博客 李大玄

一见钟情太肤浅
日久生情太苍白
别人眉来眼去
我呀 只偷看你一眼！

在这里插入图片描述