要导出下面的excel表格怎么办?
姓名 | 年龄 | 梦想 |
---|---|---|
路飞 | 19岁 | 找到ONE PIECE,并成为海贼王。 |
索隆 | 21岁 | 世界第一大剑豪 |
娜美 | 20岁 | 绘制出自己的世界地图、绘制全世界的航海图。 |
乌索普 | 19岁 | 成为勇敢的海上战士。 |
山治 | 21岁 | 寻找传说中的奇迹之海-ALL BLUE |
非常简单,看下面的代码:
<html>
<button onclick="createExcel()">导出</button>
<script>
const header = ["姓名", "年龄", "梦想"];
const data = [
{
name: "路飞",
age: "19岁",
dream: "找到ONE PIECE,并成为海贼王。",
},
{
name: "索隆",
age: "21岁",
dream: "世界第一大剑豪",
},
{
name: "娜美",
age: "20岁",
dream: "绘制出自己的世界地图、绘制全世界的航海图。",
},
{
name: "乌索普",
age: "19岁",
dream: "成为勇敢的海上战士。",
},
{
name: "山治",
age: "21岁",
dream: "寻找传说中的奇迹之海-ALL BLUE",
},
];
function createExcel() {
// '\n' 表示一行的结束
// ','表示数据依次放在新的单元格
const table =
header.join(",") +
"\n" +
data
.map((item) => {
let result = "";
for (const key in item) {
result += `${item[key] + "\t"},`; //增加\t为了不让表格显示科学计数法或者其他格式
}
return result;
})
.join("\n");
// encodeURIComponent解决中文乱码
let uri =
"data:text/csv;charset=utf-8,\ufeff" + encodeURIComponent(table);
//通过创建a标签实现
var link = document.createElement("a");
link.href = uri;
//对下载的文件命名
link.download = "数据表.csv";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
</script>
</html>
点击导出按钮,就可以生成一个csv后缀的文件,厉害吧!