vue中接口返回文件流格式，前端实现文件下载导出。

最新推荐文章于 2024-06-28 18:14:22 发布

慢慢雨夜

最新推荐文章于 2024-06-28 18:14:22 发布

阅读量568

点赞数

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/qq_31594665/article/details/133848424

版权

封装download.js

import axios from "axios";
import { MessageBox, Message }
from "element-ui";
import { getToken }
from "@/utils/auth";
export function getDownload(url, method, data, name) {
    let port_argument = {};
    if (method == 'POST') {
        port_argument = {
            // 用axios发送post请求
            url: url,
            // 请求地址
            data,
            // 参数
            method: "post",
            responseType: "blob",
            headers: {
                "X-Token": getToken(),
            },
        };
    } else {
        port_argument = {
            // 用axios发送get请求
            url: url,
            // 请求地址
            params: data,
            // 参数
            method: "get",
            responseType: "blob",
            headers: {
                // "Content-Type": "application/json",
                "X-Token": getToken(),
            },
        };
    }
    return axios(port_argument).then((res) = >{
        if (res.data.type == "application/json") {
            //假设res.data是需要转化的blob格式文件
            const reader = new FileReader();
            reader.readAsText(res.data, "utf-8");
            reader.onload = function() {
                const t = JSON.parse(reader.result); // 这里就得到了json
                if (t.code == 1) {
                    Message({
                        message: t.msg || "下载失败！",
                        type: "success",
                        duration: 3 * 1000,
                    });
                }
            };
            return;
        }
        // 处理返回的文件流

        let fileName = fileName
        // 获取http头部的文件名信息，x-filename为与后端约定字段。（解决文件名中有空格的会被""包含返回，无空格的则不会，造成的前端下载文件名错误问题。）
        if(!fileName){
        fileName = window.decodeURI(res.headers["x-filename"]);
        }

        console.log(fileName);
        // 以下为常规获取文件名的操作
        // if (!fileName) {
        // let first = res.headers["content-disposition"].split("=");
        // if (first.length > 2) {
        //   fileName = window.decodeURI(first[2].split("'")[2]);
        // } else {
        //   fileName = window.decodeURI(
        //     res.headers["content-disposition"].split("=")[1]
        //   );
        // }
        // }
        /* 兼容ie内核，360浏览器的兼容模式 */
        const blob = new Blob([res.data], {
            type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
        });
        /* 兼容ie内核，360浏览器的兼容模式 */
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
            window.navigator.msSaveOrOpenBlob(blob, fileName);
        } else {
            /* 火狐谷歌的文件下载方式 */
            let url1 = window.URL.createObjectURL(blob);
            let link = document.createElement("a");
            link.style.display = "none";
            link.href = url1;
            link.setAttribute("download", fileName);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            // window.URL.revokeObjectURL(url1);  //释放创建的url对象
        }
        Message({
            message: "下载成功!",
            type: "success",
            duration: 3 * 1000,
        });
        return Promise.resolve(res.data);
    }).
    catch((err) = >{
        console.log(err, "err");
        Message({
            message: err,
            type: "error",
        });
        return Promise.resolve(err);
    });
}

调用方式

<template>
    <div>
        <el-button type="text" @click="handleDownload('/api/data/download', 'POST', {id:'1','name':'名字'}, '存储文件名')" size="small">下载</el-button>
    </div>
</template>

<script>
    import { getDownload } from "@/api/download"; //@/api/download为download.js文件路径

    methods: {
        //下载方法
        handleDownload(url, method, data , name) {
            //url:接口名称,method:POST/GET,data:{},name:存储文件名
            getDownload(url, method, data , name)
        },
    }
</script>