首页 前端知识 vue3 TypeScript实现导出Excel功能

vue3 TypeScript实现导出Excel功能

2024-05-08 10:05:44 前端知识 前端哥 407 156 我要收藏

上一篇博客👉链接在这,我们使用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);
  }
};

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7433.html
标签
评论
发布的文章

Pycharm创建json文件类型

2024-05-12 00:05:50

C#Post请求,带json参数。

2024-05-12 00:05:28

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!