导出(条件导出/导入模板下载)功能实现

65 阅读1分钟
描述:

用户筛选数据后选择导出功能,就能下载相关筛选后数据的xls文档

   <a-button @click="queryExport" :loading="exporting">条件导出</a-button>
提示方法:
 // 提示用户筛选数据,不筛选则下载全部数据
        confirmDownload() {
            return new Promise((resolve) => {
                this.$confirm({
                    title: "提示",
                    content: "如果没有选中条件将下载全部,是否确认",
                    onOk() {
                        resolve(true);
                    },
                    onCancel() {},
                });
            });
        },
导出方法:
   //条件导出
        queryExport() {
            // 收集查询条件
            const query = {
                ...this.selectData,
                ids: [...this.selectedRowKeys],
            };
            //用户确认提示后调用接口拿到筛选后的资源路径
            this.confirmDownload().then(() => {
                this.exporting = true;
                unOperationCarManageApi
                    .queryExport(query)
                    .then((res) => {
                    //调用自定义的download方法下载
                        download("/ExportFile" + res.result);
                    })
                    .finally(() => {
                        this.exporting = false;
                    });
            });
        },

image-20221110092810827.png

download方法:
/**
 * 文件下载
 * @param {string} path
 */function download(path) {
// 如果路径不存在抛出错误
  if (!path) throw new Error("请传入文件地址");
// 创建一个a链接
  const aElement = document.createElement("a")
  //a链接的targer(指定在何处显示链接的资源)为_blank(新窗口打开)
  aElement.target = '_blank';
//a链接的样式设置为隐藏且不占位置
  aElement.style.display = "none";
//   设置a链接完整的资源路径
  aElement.href = config.downloadPrefix + path;
//   追加到页面主体最后面
  document.body.append(aElement);
//   主动触发点击事件
  aElement.click();
  //触发后移除a标签元素
  aElement.remove();
​