vue3常用表格导出导入

不是山谷.:.

已于 2023-03-20 09:35:05 修改

阅读量475

点赞数 1

文章标签：前端 javascript 开发语言

于 2023-03-09 09:56:42 首次发布

本文链接：https://blog.csdn.net/qq_67118860/article/details/129416838

版权

文章介绍了在Vue项目中如何实现表格数据的导出和导入功能。导出功能使用axios调用API，处理响应的Blob对象来生成Excel文件。导入功能通过监听文件输入元素的change事件，读取文件并上传至指定API。整个过程涉及到HTTP请求、文件处理和前端交互。

摘要由CSDN通过智能技术生成

导出表格

// 导出和导入的html都是一样的，根据需要的参数进行导入或导出
// base-button 是封装好的button按钮 handleExportAll(参数1，参数2)
<base-button text="导出所有" checked @click="handleExportAll('接口名称',传递的参数)" />

  /**
   * 导出到表格
   * @param exportApi {String} Api接口名称
   * @param formData {Object} 查询数据
   * @return void
  */

const handleExportAll = (exportApi, formData = {}) => {
  if (total.value === 0) { // 获取总条数
    ElMessage.warning('无数据,不能执行导出操作')
  } else {
    axios.post(`${import.meta.env.VITE_APP_API}${exportApi}`, formData, {
      responseType: 'blob',
      headers: {
        token: getToken()
      }
    }).then((res) => {
        // 获取到请求头中的content-disposition 并用decodeURIComponent进行转换
      const newName = decodeURIComponent(res.headers['content-disposition']?.split('=')[1]).length > 9 ? decodeURIComponent(res.headers['content-disposition']?.split('=')[1]) : '设备检查列表导出.xlsx'
      const blob = new Blob([res.data], { type: 'applicationnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' })
      const downloadElement = document.createElement('a')
      const href = window.URL.createObjectURL(blob) // 创建下载的链接
      downloadElement.href = href
      downloadElement.download = newName // 下载后文件名
      document.body.appendChild(downloadElement)
      downloadElement.click() // 点击下载
      document.body.removeChild(downloadElement) // 下载完成移除元素
      window.URL.revokeObjectURL(href) // 释放掉blob对象
      ElMessage.success('导出成功')
    }).catch((error) => {
      console.log(error)
      ElMessage.error('导出失败')
    })
  }
}

导入表格

  /**
   * 导入excel模版
   * @param importApi {String} 导入的api
   * * @param id{String} 导入的参数
   */
  const handleImportExcel = (importApi, id) => {
    const element = document.getElementById("global-upload");
    element.click();
    element.onchange = (e) => {
      const { files } = e.target;
      if (files[0]) {
        const param = new FormData();
        param.append("file", files[0]); // 通过append向form对象添加数据
        if (id === Number) {  // param  携带的参数
          param.append("id", id); // 通过append向form对象添加数据
        } else {
          param.append("exeId", id.exeId); // 通过append向form对象添加数据
          param.append("exeName", id.exeName);
        }
        axios
          .post(`${import.meta.env.VITE_URL}${importApi}`, param)
          .then((response) => {
            const res = response.data;
            if (res.code === 0) {
              ElMessage.success("上传成功");
            } else {
              ElMessage.error(res.msg);
            }
            element.value = null; // 调取接口成功后 需清空input 的数据
          })
          .catch((error) => {
            ElMessage.error(error);
          });
      }
    };
  };