＜封装公共导出模块：配合element实现提示＞

2024-04-24 248

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 在 Vue + elementUi 开发中，我们偶尔会遇到需要导出的列表，或者指定位置的导出内容。在一个项目里面是十分常见的，但是由于导出代码有稍微有点长，不方便维护！基于项目开发需求，封装了一个公用的导出模块，模块入口提供了四个参数，分别是：导出接口地址导出参数对象导出文件名称导出时选择的服务地址（需要配合config文件实现选择功能）。且基于信息安全问题，实现信息提示，当提示点击遵守规则才允许下载文件！

JavaScript封面.gif

👉 前言

在 Vue + elementUi 开发中，我们偶尔会遇到需要导出的列表，或者指定位置的导出内容。在一个项目里面是十分常见的，但是由于导出代码有稍微有点长，不方便维护！

基于项目开发需求，封装了一个公用的导出模块，模块入口提供了四个参数，分别是： 导出接口地址、导出参数对象、导出文件名称、导出时选择的服务地址（需要配合config文件实现选择功能）。且基于信息安全问题，实现信息提示，当提示点击遵守规则才允许下载文件！

👉 一、原理

通过二次封装axios请求，将请求返回的文件流数据，通过blob转换成可下载文件的链接，并自行点击下载！通过element + async、await实现异步暂停！

👉 二、实现案例

> 调用导出模块的Javascript模板

import exportExcel from "@/views/commonJs/exportExcel.js";
// 导出入参
let data = {
  ...
};
// 导出loading
this.exportExcelLoading = true;
exportExcel(this.exportUrl, data, '这里是文件标题', this.exportPathType)
.finally(() => { // 导出完毕后执行的操作
  this.exportExcelLoading = false;
});

> 公共导出模块

// 封装导出列表方法
import { PATH_HEADERS } from "@/config";  // 如需使用其他表头，需前往 config文件进行配置 
import axios from "axios";
import ElementUI from "element-ui";

const exportExcel = (path, data, title, pathHeaderType = 'API_PATH') => {
  return (async() => {
     await ElementUI.MessageBox.confirm('本系统涉及内部资料，注意保密，严禁以任何方式泄露！', '', {
      confirmButtonText: '我已阅读并将遵守',
      type: 'warning',
      showClose: false,
      showCancelButton: false
    })
    
    window.console.log(PATH_HEADERS)
    
    return axios({
      method: "POST",
      url: PATH_HEADERS[pathHeaderType] + path,
      data,
      headers: {
        "Content-Type": "application/json;charset=UTF-8",
      },
      responseType: "blob",
    })
      .then((res) => {
        const content = res.data;
        const blob = new Blob([content]);
        const fileName = `${title}.xls`;
        if ("download" in document.createElement("a")) {
          // 非IE下载
          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);
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob, fileName);
        }
      })
      .catch(() => {
        ElementUI.Message.error("导出失败，请重试！");
      });
  })();
};

export default exportExcel;