旁观自己 善待朝夕|

猫老板的豆

园龄:9年4个月粉丝:52关注:0

vue axios 导出功能

  1. 请求后台接口
  2. 后台返回二进制流
  3. 前端实现浏览器自动下载成exlce文件

如下图:
在这里插入图片描述
主要方法如下:

/**
 * download方法
 * @param {String} type [请求的方式]
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 * @param {String} fileType [导出文件类型] 默认值 xls
 * @param {String} fileName [导出文件名称] 默认值 导出文件
 */
function download(url, params, fileType, fileName) {
    fileType = fileType || 'xls';
    fileName = fileName || '导出文件';
    let config = {
        params: params,
        // headers和responseType一定要在一起设置,否则会导致 获取到的二进制文件流 格式不正确
        headers: {
            'content-disposition': "attachment;filename=total." + fileType,
            'Content-Type': 'application/x-download;charset=utf-8'
        },
        responseType: 'blob' // 设置请求数据格式
    };
    return new Promise((resolve, reject) => {
        axios.get(url, config)
            .then(err => {
                resolve(err.data);
                if (!err) {
                    return
                }
                let url = window.URL.createObjectURL(err.data);
                let link = document.createElement('a');
                link.style.display = 'none';
                link.href = url;
                link.setAttribute('download', `${fileName}.${fileType}`);
                document.body.appendChild(link);
                link.click();
            })
            .catch(err => {
                reject(err.data);
            })
    });
}

export default {
    download
}

调用

// 导出
exportBtn() {
	this.axios.download(`/api/common-service/export`);
}

本文作者:猫老板的豆

本文链接:https://www.cnblogs.com/bingcola/p/16499194.html

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   猫老板的豆  阅读(550)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起
  1. 1 404 not found REOL
404 not found - REOL
00:00 / 00:00
An audio error has occurred.