前端文件导出

?场景需求

开发后台管理系统时，难免会涉及到文件的上传和文件的导出。现在前端上传文件主要采用“二进制文件流”的形式来上传文件。上传主要方式有以下方式：

• 前端直接传递云存储或者自身服务器，来获取上传文件的云端绝对地址；
• 前端借助后台来实现文件的存储和上传，然后经后台处理来返回文件存储路径。

上传文件也根据文件格式进行分类存储或者在上传前进行文件的大小和格式的校验处理，以防乱传递垃圾文件消耗云盘存储空间和浪费流量等。

?文件格式

后台管理系统一般用作处理文档数据相关，导出的数据大致分为以下几类：

• 用于数据统计的Excel文件，主流文件格式为：.xls 和 .xlsx；
• 用于文档通知的Word文件，主流文件格式为：.doc和 .docx；
• 用于幻灯片的PowerPoint文件，主流文件格式为：.ppt 和 .pptx；

?文件导出

1. 从后台API获取二进制流文件地址，进行处理；

2. 配置前端请求方式，以 blob的方式请求获取文件流；

3. 通过 URL.createObjectURL() 静态方法创建一个 DOMString ；

4. 动态创建用于文件下载的 a 标签，并赋值 herf 和 download 属性，并触发该标签的点击事件；

5. 通过 URL.revokeObjectURL() 静态方法来释放之前通过 URL.createObjectURL() 创建的 URL 对象。

?代码实例

/* 时间戳 */
const timeStamp = () => {
    const date = new Date();

    let yyyy = date.getFullYear(),
        MM = date.getMonth() + 1,
        dd = date.getDate(),
        hh = date.getHours(),
        mm = date.getMinutes(),
        ss = date.getSeconds();
    // 补0
    MM = MM < 10 ? "0" + MM : MM;
    dd = dd < 10 ? "0" + dd : dd;
    hh = hh < 10 ? "0" + hh : hh;
    mm = mm < 10 ? "0" + mm : mm;
    ss = ss < 10 ? "0" + ss : ss;

    let timeStr = `${yyyy}${MM}${dd}${hh}${mm}${ss}`;
    return timeStr;
};

/* 导出数据 */
const exportData = () => {
    // 所需参数
    let params = {};

    axios
        .get("API", { responseType: "blob", params })
        .then(res => {
            setTimeout(() => {
                // 获取文件流，生成 URL 对象
                let url = window.URL.createObjectURL(res.data);
                // 创建用于下载的 a 标签
                let link = document.createElement("a");
                // 隐藏动态创建的 a 标签
                link.style.display = "none";
                // 设置 herf 属性并赋值生成的 url 文件地址
                link.href = url;
                // 生成时间戳
                let timeStr = timeStamp();
                /**
                 * 重命名文件名
                 * 格式必须以 “.文件格式后缀名”的形式结尾
                 *  */
                let fileName = `${timeStr}.xls`;
                // 设置被下载的超链接目标
                link.setAttribute("download", fileName);
                // 触发 a 标签跳转
                link.click();
                // 释放 URL 对象
                window.URL.revokeObjectURL(url);
            }, 500);
        })
        .catch(err => {
            console.log("导出失败：", err);
        });
};
 

?注：文件后缀名根据要求进行定义。

// 文件命名格式

// 5位数随机数
let timeStr = parseInt(Math.random(0, 1) * 1e5);

// 当前时间戳
let timeStr = new Date().toLocaleString();

// 获取headers中的文件名
let fileName = res.headers["content-disposition"].split(";")[1].split("filename=")[1];
 

?注：上述“获取headers中的文件名”为在请求接口时后台携带的文件名，若“无”则需自定义文件名。