前端人员在开发时,有时为了满足用户需求,需要下载excel文件。这里通常有两种做法,一种是后端工程师将数据转化为excel,然后前端进行下载即可,还有一种方式,前端请求需要下载的数据,在浏览器端生成excel文件,然后进行下载。
今天就和大家聊一下第二种方式,如果用第二种方式的话,我们需要引入xlsx这个npm包,来看一下示例代码:
//1、定义导出文件名称
var filename = "write.xlsx";
// 定义导出数据
var data = [['第一列','第二列','第三列'],[1,2,3],[true, false, null, "sheetjs"],["foo","bar",new Date("2014-02-19T14:30Z"), "0.3"], ["baz", null, "qux"]]
// 定义excel文档的名称
var ws_name = "SheetJS";
// 初始化一个excel文件
var wb = XLSX.utils.book_new();
// 初始化一个excel文档,此时需要传入数据
var ws = XLSX.utils.aoa_to_sheet(data);
// 将文档插入文件并定义名称
XLSX.utils.book_append_sheet(wb, ws, ws_name);
// 执行下载
XLSX.writeFile(wb, filename);
使用xlse导出文件时,json数据需要转换为数组,通常为二维数组,通常第一行为表头,如:['第一列','第二列','第三列'],然后就是使用xlse的步骤了,通常分为如下几个步骤:
1、调用XLSX.utils.book_new()初始化excel文件。
2、调用XLSX.utils.aoa_to_sheet(data),初始化excel文档,此时需要传入数据,数据为二维数组,第一行通常为表头。
3、调用XLSX.utils.book_append_sheet(wb, ws, ws_name),将文档插入excel文件,并为文档命名。
4、调用XLSX.writeFile(wb, filename)下载excel文件,并为excel文件命名。
我在react中应用时的代码如下:
import XLSX from 'xlsx';
function App(){
const getClocks(){
//请求数据的方法
}
const OnExport=async ()=>{
const res = await getClocks();
let data = res.data;
let head = Object.keys(data[0])
data = data.map(e => Object.values(e))
data.unshift(head)
let filename = "write.xlsx";
let ws_name = "SheetJS";
let wb = XLSX.utils.book_new();
let ws = XLSX.utils.aoa_to_sheet(data);
XLSX.utils.book_append_sheet(wb, ws, ws_name);
XLSX.writeFile(wb, filename);
}
return <button onClick={OnExport} />
}
以上便是在前端项目中导出excel文件的方法,希望对你有所帮助。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。