导出Excel表格(调用后端接口方式)

在开发中我们会遇到导出Excel表格的需求,但是导出分为前端生成和后端生成。
前端生成的方式CSDN其他小伙伴已经做出了很多教程,是依赖 xlsx插件。
但是,今天我讲的是,调用后端接口的方式生成Excel表格。

1.调用后端提供的导出接口,查看数据。

首先后端提供给我们了一个导出的接口,我们进行调用之后后端返回了3个数据。

filetoken和filetype还有filename

这三个数据是我们实现导出Excel表格的关键。

导出Excel表格(调用后端接口方式)_第1张图片

2.封装导出函数,借用H5的window下的location对象

//这个baseURL就是各位在开发环境下的接口地址
let baseURL = import.meta.env.VITE_API_URL;

//file:后端返回的数据,包含fileName和fileToken以及fileType
let useExportFile = (file: any) => {
    //采用字符串拼接的形式,将数据地址拼接出来
    const url = baseURL + '/api/File/DownloadTempFile?fileType=' + file.fileType + '&fileToken=' + file.fileToken + '&fileName=' + file.fileName
    //最主要的一步就是借用location.href跳转网页,然后就弹出了下载路劲选择框。
    location.href = url;
}

3.结果

导出Excel表格(调用后端接口方式)_第2张图片

其实,最重要的无非就是location跳转的这一步,这一步可以保证百分百弹出下载框,而有的别的方式因为浏览器问题不会弹出下载框,所以在此不再赘述。


抓紧时间练起来吧,兄dei,再不练你就废啦!

记得支持我哦,么么哒,祝您好事成双~~~~~~

你可能感兴趣的:(工作栏目,前端,vue.js)