下载、导入、导出_java response导出文件-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_47134622/article/details/141564766

注：仅作个人记录

// 接口
// 模板下载
export const employeeTemplateDownload = (): ConfigType<BlobPart> => {
  return request({
    url: `/userBase/employeeTemplateDownload`,
    method: "get",
    responseType: "blob"
  })
}

// 导出
export const exportDataAPI = (data: { caseNo: string, caseNum: string }): ConfigType<ResultDto> => {
  return request({
    url: "/courtAffairsSupervision/exportData",
    method: "POST",
    data,
    responseType: 'blob'
  })
}

下载

// 定义
downloadLoading: false, //模板下载按钮加载状态

// 按钮
<el-button  type="primary"  :loading="downloadLoading"  @click="modulesDownload">
模板下载</el-button>

/** 1、 模板下载 */
    modulesDownload() {
      this.downloadLoading = true;
      employeeTemplateDownload().then((res) => {
        this.downloadLoading = false;
        // 创建一个隐藏的a元素用于触发文件下载
        const elink = document.createElement("a");
        //根据响应头content-disposition中的信息来设置下载文件名。
        //如果响应头中没有提供文件名，则默认设置为“员工模板.zip”。
        // 取 headers中content-disposition 拿到文件名
        // 如果没有 elink.download ='员工模板.zip'
        if (res.headers["content-disposition"]) {
          const encodedString = res.headers["content-disposition"];
          elink.download = decodeURIComponent(
            encodedString.split("filename=")[1]
          );
        } else {
          elink.download = "员工模板.zip";
        }
        elink.style.display = "none";
        //创建Blob对象并设置下载链接：
        //使用响应体中的数据创建一个Blob对象，并设置a标签的href为这个Blob对象的URL。
        const blob = new Blob([res.data], {
          type: "application/x-msdownload",
        });
        elink.href = URL.createObjectURL(blob);
        //触发下载：将创建的a标签添加到DOM中并模拟点击，触发文件下载。
        //下载完成后，从DOM中移除这个a标签
        document.body.appendChild(elink);
        elink.click();
        document.body.removeChild(elink);
      });
    },

// 2、 文件下载
    //文件下载
    handleFulfilUrgeDownloadFile(val) {
      fulfilUrgeDownloadFile(val.id).then((res)=>{
      //创建URL并生成下载链接: 使用window.URL.createObjectURL方法创建一个URL对象，然后用这个URL创建一个<a>元素。
        const url = window.URL.createObjectURL(res.data);
        const a = document.createElement('a');
        a.href = url;
        //设置文件名: 如果服务器提供了content-disposition头信息，就从中解析出文件名，并将其设置为<a>元素的download属性。
        if (res.headers['content-disposition']) {
          const encodedString = res.headers['content-disposition'];
          a.download = decodeURIComponent(encodedString.split("filename=")[1]);
        }
        //触发下载: 将<a>元素添加到DOM中并模拟点击，触发文件下载。
        document.body.appendChild(a);
        a.click();
        //释放URL对象: 下载完成后，使用window.URL.revokeObjectURL方法释放URL对象，以节省资源。
        window.URL.revokeObjectURL(url);
      })
    },

导出

// 定义
 reportDialogLoading: false, //加载状态

// 按钮
<el-button type="primary" :loading="reportDialogLoading" @click="exportDataDialogFormConfrim">
>导出</el-button>

// 导出
    exportDataDialogFormConfrim() {
      this.reportDialogLoading = true;
      const params = {
        caseNo: this.queryObj.caseNo,
        caseNum: this.queryObj.caseNum,
      };
      exportDataAPI(params)
        .then((res) => {
          this.reportDialogLoading = false;
          if (res) {
          // 从响应的 headers 中提取文件名（通过解析 content-disposition 头部），
          // 并对其进行解码以获取正确的文件名。
            const temp = res.headers["content-disposition"]
              .split(";")[1]
              .split("filename=")[1];
            const fileName = decodeURIComponent(temp);
            // 创建一个指向响应数据的URL
            const url = window.URL.createObjectURL(res.data);
            //创建一个 <a> 元素，设置其 href 属性为上面创建的URL，
            const a = document.createElement("a");
            a.href = url;
            //设置 download 属性为文件名（如果文件名不存在，则默认为“导出信息.docx”）。
            a.download = fileName || "导出信息.docx";
            //将 <a> 元素添加到 document.body 中，并模拟点击它以触发下载。
            document.body.appendChild(a);
            a.click();
            //调用 window.URL.revokeObjectURL(url) 释放之前创建的URL对象，以避免内存泄漏。
            window.URL.revokeObjectURL(url);
            ElMessage({
              message: "导出成功",
              type: "success",
            });
          } else {
            this.reportDialogLoading = false;
            ElMessage({
              message: "未知异常",
              type: "error",
            });
          }
        })
        .catch((err) => {
          this.reportDialogLoading = false;
          ElMessage.error("未知异常");
        });
    }

导入（一般先下载模板，填充数据再导入，）------乱，未整理

// 按钮
<el-button type="success" @click="exportTap">批量导入</el-button>

  <!-- 批量导入提示框 -->
  <div>
    <el-dialog
      destroy-on-close
      v-model="exportDialogVisible"
      width="500"
      align-center
      :before-close="exportTemplateClose"
    >
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="exportTemplateClose">取消</el-button>
          <el-button
            :loading="exportTemplateLoading"
            type="primary"
            @click="confirmExport"
            >确定
          </el-button>
        </div>
      </template>
      <el-form
        :inline="true"
        :model="exportFormInline"
        class="dialog-form"
        ref="exportFormInline"
        :rules="exportRules"
        label-position="top"
      >
        <el-form-item
          style="width: 100%"
          label="请选择存在相同用户名的员工的导入方式"
          prop="type"
        >
          <el-select
            v-model="exportFormInline.type"
            placeholder="请选择"
            size="large"
          >
            <el-option label="覆盖" :value="0" />
            <el-option label="跳过" :value="1" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #header="{ titleClass }">
        <div :class="titleClass" class="dialog-header">
          <span class="title-text">提示</span>
        </div>
      </template>
      <input
        class="select-file"
        type="file"
        ref="selectFile"
        accept=".xls,.xlsx"
        @change="handleFileChange"
      />
    </el-dialog>
  </div>

  <!-- 导入错误提示框 -->
  <div>
    <el-dialog
      destroy-on-close
      v-model="exportErrorDialogVisible"
      width="500"
      align-center
    >
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="exportErrorDialogVisible = false"
            >确定</el-button
          >
        </div>
      </template>
      // 数据字段根据实际 更改
      <el-table
        :data="exportErrorTableData"
        :header-cell-style="errorTableHeaderStyle"
        empty-text="暂无数据"
      >
        <el-table-column fixed prop="num" label="行号" />
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="username" label="用户名" />
        <el-table-column prop="errorMsg" label="错误信息" />
      </el-table>
      <template #header="{ titleClass }">
        <div :class="titleClass" class="dialog-header">
          <span class="title-text">存在用户导入失败</span>
        </div>
      </template>
    </el-dialog>
  </div>

// data  数据
      // 样式
      errorTableHeaderStyle: {
        height: "57px",
        backgroundColor: "#FFF6F6",
        fontSize: "16px",
        color: "#11263C",
        "border-top": "2px solid #FC4E50",
        "font-family": "Ali-2-55",
        "border-radius": " 6px 6px 0 0",
      },
       exportDialogVisible: false, //批量导入提示框状态
      // 批量导入表单字段
      exportFormInline: {
        type: 0,
      },
      // 批量导入表单校验
      exportRules: {
        type: [
          {
            required: true,
            message: "请选择存在相同用户名的员工的导入方式",
            trigger: "blur",
          },
        ],
      },
      exportErrorDialogVisible: false, //导入错误提示框状态
      exportErrorTableData: [
        // { index: "0", name: "name", userName: "{{!!@@$}}", error: "格式错误" },
      ],
      downloadLoading: false, //模板下载按钮加载状态
      excelFile: null as File | null | string, //导入的文件
      exportTemplateLoading: false, //批量导入 确定导入模版加载状态


// methods
    /**
     * @description 批量导入
     */
    exportTap() {
      this.exportDialogVisible = true;
    },
    /**导入确定 */
    confirmExport() {
      const formElement = this.$refs.exportFormInline as FormInstance;
      formElement.validate((valid: boolean) => {
        if (valid) {
          if (!this.excelFile) {
            const fileInput = this.$refs.selectFile as HTMLInputElement;
            fileInput.click();
          } else {
            this.exportTemplateRequest();
          }
        }
      });
    },
    /**导入模板关闭*/
    exportTemplateClose() {
      this.excelFile = "";
      this.exportDialogVisible = false;
    },
    /**
     * 批量导入 选择文件
     * 选择文件
     */
    handleFileChange(e: any) {
      const files = e?.target?.files[0];
      if (!files) return;
      this.excelFile = files;
      this.exportTemplateRequest();
      // 检查文件类型是否为 XLS 或 XLSX 文件
      if (files[0]) {
        const validTypes = [
          "application/vnd.ms-excel",
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        ];
        const isExcel = validTypes.includes(files[0].type);
        const isXLS = files[0].name.endsWith(".xls");
        const isXLSX = files[0].name.endsWith(".xlsx");

        if (!isExcel && !isXLS && !isXLSX) {
          ElMessage({
            showClose: true,
            message: "请选择正确的文件格式，只支持xls或xlsx",
            type: "warning",
          });
          // 清空选择
          e.target.value = "";
        }
      }
    },
    /**导入模板请求*/
    exportTemplateRequest() {
      this.exportTemplateLoading = true;
      const formData = new FormData();
      if (this.excelFile instanceof File) {
        // 添加文件到 formData 对象中
        formData.append("file", this.excelFile);
      }
      formData.append("importType", String(this.exportFormInline.type));
      this.exportDialogVisible = false;
      employeeTemplateImport(formData)
        .then((res) => {
          this.exportTemplateLoading = false;
          // 判断条件根据实际 修改
          if (res.data.statusCode === 0 && res.data.subStatusCode === 0) {
            ElMessage({
              showClose: true,
              message: "导入成功",
              type: "success",
            });
            //清除文件
            this.exportTemplateClose()
            this.getData();
          } else if (
            res.data.statusCode === 0 &&
            res.data.subStatusCode === 10
          ) {
            this.exportTemplateLoading = false;
            //清除文件
            this.exportTemplateClose()
            this.exportErrorDialogVisible = true;
            this.exportErrorTableData = res.data.data; //显示导入模板的错误信息
            this.getData();
          } else {
            this.excelFile = null; //清除文件
            ElMessage({
              showClose: true,
              type: "error",
              message: res.data.details,
            });
          }
        })
        .catch((err) => {
           this.excelFile = "";
          this.exportTemplateLoading = false;
          ElMessage({
            showClose: true,
            type: "error",
            message: err?.data?.details ? err?.data?.details : "批量导入失败",
          });
        });
    },

    /**模板下载 */
    modulesDownload() {
      this.downloadLoading = true;
      employeeTemplateDownload().then((res) => {
        this.downloadLoading = false;
        const elink = document.createElement("a");
        // 取 headers中content-disposition 拿到文件名
        // 如果没有 elink.download ='员工模板.zip'
        if (res.headers["content-disposition"]) {
          const encodedString = res.headers["content-disposition"];
          elink.download = decodeURIComponent(
            encodedString.split("filename=")[1]
          );
        } else {
          elink.download = "员工模板.zip";
        }
        elink.style.display = "none";
        const blob = new Blob([res.data], {
          type: "application/x-msdownload",
        });
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        document.body.removeChild(elink);
      });
    },

导入、模板下载（vue3）

//  <template>
<el-button type="success" @click="exportTap">批量导入 </el-button>
<el-button
   type="primary"
   :loading="downloadLoading"
   @click="modulesDownload"
 >模板下载
</el-button>

  <!-- 批量导入提示框 -->
  <div>
    <el-dialog
      destroy-on-close
      v-model="exportDialogVisible"
      width="500"
      align-center
      :before-close="exportTemplateClose"
    >
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="exportTemplateClose">取消</el-button>
          <el-button
            :loading="exportTemplateLoading"
            type="primary"
            @click="confirmExport"
            >确定
          </el-button>
        </div>
      </template>
      <el-form
        :inline="true"
        :model="exportFormInline"
        class="dialog-form"
        ref="exportFormInlineRef"
        :rules="exportRules"
        label-position="top"
      >
        <!-- @submit.prevent -->
        <el-form-item
          style="width: 100%"
          label="请选择存在相同案件的导入方式"
          prop="type"
        >
          <el-select
            v-model="exportFormInline.type"
            placeholder="请选择"
            size="large"
          >
            <el-option label="覆盖" :value="0" />
            <el-option label="跳过" :value="1" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #header="{ titleClass }">
        <div :class="titleClass" class="dialog-header">
          <span class="title-text">提示</span>
        </div>
      </template>
      // style     .select-file {display: none}
      <input
        class="select-file"
        type="file"
        ref="selectFile"
        accept=".xls,.xlsx"
        @change="handleFileChange"
      />
    </el-dialog>
  </div>
  <!-- 导入错误提示框 -->
  <div>
    <el-dialog
      destroy-on-close
      v-model="exportErrorDialogVisible"
      width="500"
      align-center
    >
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="exportErrorDialogVisible = false"
            >确定</el-button
          >
        </div>
      </template>
      <el-table
        :data="exportErrorTableData"
        :header-cell-style="errorTableHeaderStyle"
        empty-text="暂无数据"
      >
        <el-table-column fixed prop="num" label="序号" />
        <el-table-column prop="caseNo" label="案号" />
        <el-table-column prop="caseNum" label="庭次" />
        <el-table-column prop="errorMsg" label="错误信息" />
      </el-table>
      <template #header="{ titleClass }">
        <div :class="titleClass" class="dialog-header">
          <span class="title-text">存在用户导入失败</span>
        </div>
      </template>
    </el-dialog>
  </div>

// 定义和方法
// 下载  导入
//批量导入提示框状态
const exportDialogVisible = ref(false);
// 批量导入表单校验
const exportRules = ref({
  type: [
    {
      required: true,
      message: "请选择存在相同案件的导入方式",
      trigger: "blur",
    },
  ],
});
//导入错误提示框状态
const exportErrorDialogVisible = ref(false);
const exportErrorTableData = ref([
  // { index: "0", name: "name", userName: "{{!!@@$}}", error: "格式错误" },
]);
//模板下载按钮加载状态
const downloadLoading = ref(false);
//批量导入 确定导入模版加载状态
const exportTemplateLoading = ref(false);
//导入的文件
const excelFile = ref(null as File | null | string);
// 批量导入表单字段
const exportFormInline = ref({
  type: 0,
});
// 使用 ref 来管理 DOM 引用
const exportFormInlineRef: Ref<FormInstance | null> = ref(null);
const selectFile: Ref<HTMLInputElement | null> = ref(null);
/**模板下载 */
const modulesDownload = () => {
  downloadLoading.value = true;
  employeeTemplateDownload().then((res) => {
    downloadLoading.value = false;
    const elink = document.createElement("a");
    // 取 headers中content-disposition 拿到文件名
    // 如果没有  elink.download ='案件模板.zip'
    if (res.headers["content-disposition"]) {
      const encodedString = res.headers["content-disposition"];
      elink.download = decodeURIComponent(encodedString.split("filename=")[1]);
    } else {
      elink.download = "案件模板.zip";
    }
    elink.style.display = "none";
    const blob = new Blob([res.data], {
      type: "application/x-msdownload",
    });
    elink.href = URL.createObjectURL(blob);
    document.body.appendChild(elink);
    elink.click();
    document.body.removeChild(elink);
  });
};

/**导入模板请求*/
const exportTemplateRequest = () => {
  exportTemplateLoading.value = true;
  const formData = new FormData();
  if (excelFile.value instanceof File) {
    // 添加文件到 formData 对象中
    formData.append("file", excelFile.value);
  }
  formData.append("importType", String(exportFormInline.value.type));
  exportDialogVisible.value = false;
  employeeTemplateImport(formData)
    .then((res) => {
      exportTemplateLoading.value = false;
      判断条件根据实际更改
      if (res.data.statusCode === 0 && res.data.data.length > 0) {
        exportTemplateLoading.value = false;
        excelFile.value = null; //清除文件
        exportDialogVisible.value = false;
        exportErrorDialogVisible.value = true;
        exportErrorTableData.value = res.data.data; //显示导入模板的错误信息
        getCaseListByPage();
      } else if (res.data.statusCode === 0 && res.data.subStatusCode === 0) {
        ElMessage({
          showClose: true,
          message: "导入成功",
          type: "success",
        });
        excelFile.value = null; //清除文件
        exportDialogVisible.value = false;
        getCaseListByPage();
      } else {
        excelFile.value = null; //清除文件
        ElMessage({
          showClose: true,
          type: "error",
          message: res.data.details,
        });
      }
    })
    .catch((err) => {
      exportTemplateLoading.value = false;
      excelFile.value = null; //清除文件
      ElMessage({
        showClose: true,
        type: "error",
        message: err?.data?.details ? err?.data?.details : "批量导入失败",
      });
    });
};

/**导入模板关闭*/
const exportTemplateClose = () => {
  excelFile.value = "";
  exportDialogVisible.value = false;
};
/**
 * 批量导入 选择文件
 * 选择文件
 */
const handleFileChange = (e: any) => {
  const files = e?.target?.files[0];
  if (!files) return;
  excelFile.value = files;
  exportTemplateRequest();
  // 检查文件类型是否为 XLS 或 XLSX 文件
  if (files[0]) {
    const validTypes = [
      "application/vnd.ms-excel",
      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
    ];
    const isExcel = validTypes.includes(files[0].type);
    const isXLS = files[0].name.endsWith(".xls");
    const isXLSX = files[0].name.endsWith(".xlsx");

    if (!isExcel && !isXLS && !isXLSX) {
      ElMessage({
        showClose: true,
        message: "请选择正确的文件格式，只支持xls或xlsx",
        type: "warning",
      });
      // 清空选择
      e.target.value = "";
    }
  }
};

/**
 * @description 批量导入
 */
const exportTap = () => {
  exportDialogVisible.value = true;
};
/**导入确定 */
const confirmExport = () => {
  if (exportFormInline.value) {
    exportFormInlineRef.value.validate((valid: boolean) => {
      if (valid) {
        if (!excelFile.value) {
          if (selectFile.value) {
            selectFile.value.click();
          }
        } else {
          exportTemplateRequest();
        }
      }
    });
  }
};