vue3 TypeScript实现导出Excel功能

上一篇博客👉链接在这，我们使用 vue3+ts 实现了导入的功能，接下来，还是使用同一个组件（element-plus 上传组件）来实现导出，在上篇博客中，我们在使用这个组件的同时写了一个下载模板的功能，接下来，这篇博客，我们就帮助大家完善下载模板的功能以及实现导出的功能。✌️✌️✌️

一、效果展示

我们通过两个按钮来实现导入导出功能、具体模板的样式如下
具体样式，请参考上篇博客

二、模板下载

	el-button
        class="excel-btn"
        size="small"
        type="primary"
        icon="download"
        @click="downloadTemplate('导入用户模板文件.xlsx')">
        点击下载
    el-button>

export const downloadTemplate = fileName =>{
	return service({
    url: 'XXXX',
    method: 'post',
    params: {
      fileName: fileName,
    },
    responseType: 'blob',
  }).then(res => {
    handleFileError(res, fileName);
  });
}

const handleFileError = (res, fileName) => {
  if (typeof res.data !== 'undefined') {
    if (res.data.type === 'application/json') {
      const reader = new FileReader();
      reader.onload = function () {
        const message = JSON.parse(reader.result).msg;
        ElMessage({
          showClose: true,
          message: message,
          type: 'error',
        });
      };
      reader.readAsText(new Blob([res.data]));
    }
  } else {
    var downloadUrl = window.URL.createObjectURL(new Blob([res]));
    var a = document.createElement('a');
    a.style.display = 'none';
    a.href = downloadUrl;
    a.download = fileName;
    var event = new MouseEvent('click');
    a.dispatchEvent(event);
  }
};

以上就是下载模板的功能实现

导出文件

		el-button
            class="excel-btn"
            size="small"
            icon="download"
            @click="handleExcelExport('用户列表.xlsx')">
            导出
          el-button>

const tableData = ref([]);
const handleExcelExport = fileName => {
  if (!fileName || typeof fileName !== 'string') {
    fileName = 'ExcelExport.xlsx';
  }
  exportExcel(tableData.value, fileName);
};


 export const exportExcel = (tableData, fileName) => {
  return service({
    url: 'XXX',
    method: 'post',
    data: {
      fileName: fileName,
      infoList: tableData,
    },
    responseType: 'blob',
  }).then(res => {
    handleFileError(res, fileName);
  });
};
const handleFileError = (res, fileName) => {
  if (typeof res.data !== 'undefined') {
    if (res.data.type === 'application/json') {
      const reader = new FileReader();
      reader.onload = function () {
        const message = JSON.parse(reader.result).msg;
        ElMessage({
          showClose: true,
          message: message,
          type: 'error',
        });
      };
      reader.readAsText(new Blob([res.data]));
    }
  } else {
    var downloadUrl = window.URL.createObjectURL(new Blob([res]));
    var a = document.createElement('a');
    a.style.display = 'none';
    a.href = downloadUrl;
    a.download = fileName;
    var event = new MouseEvent('click');
    a.dispatchEvent(event);
  }
};

这样我们就实现了导出功能，同时很多时候我们可能会遇到按需导出的需求，这是，我们只需要在接口中传递相应的参数即可。