其实前端和后端导出都可以，我之前公司是后端导出的，这次我就前端导吧
核心代码就是上面这截图,如果没有特别要求，只要可以导出excel可以打开看，那就没什么大问题
- 需要了解
outerHTML和 innerHTML的区别new Blob()Blob 对象表示一个不可变、原始数据的类文件对象,它的数据可以按文本或二进制的格式进行读取，代表二进制类型的大对象,通俗点说，就是Blob对象是二进制数据，但它是类似文件对象的二进制数据，因此可以像操作File对象一样操作Blob对象，实际上，File继承自Blobblob参数是一个File对象或者Blob对象
window.URL.createObjectURL
- 创建一个新的对象URL,该对象URL可以代表某一个指定的
File对象或Blob对象. window.URL.createObjectURL你可以创建用于引用任何数据的简单URL字符串，也可以引用一个包括用户电脑上的本地文件的DOMFile对象,这个对象URL是一个标识File对象的字符串,每次你调用window.URL.createObjectURL()，就会产生一个唯一的对象URL，即使是你对一个已创建了对象URL的文件再次创建一个对象URL，每个创建了的对象URL必须要释放objectURL是生成的对象URL.通过这个URL,可以获取到所指定文件的完整内容.- 在你不需要这些对象URL的时候,你应该通过调用
window.URL.revokeObjectURL()方法来释放它们所占用的内容.虽然即使你不主动释放它们,浏览 器也会在当前文档被卸载的时候替你释放,不过,考虑到更好的性能和更少的内存占用,你应该在安全的时候主动施放它们.
const toExcel = () =>{
var exportFileContent = document.getElementById("table_1").outerHTML;
//使用Blob //解决中文乱码问题
var blob = new Blob([exportFileContent], {type: "text/plain;charset=utf-8"});
blob = new Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type});
//设置链接
var link = window.URL.createObjectURL(blob);
var a = document.createElement("a"); //创建a标签
a.download = "温度湿度表.xls"; //设置被下载的超链接目标（文件名）
a.href = link; //设置a标签的链接
document.body.appendChild(a); //a标签添加到页面
a.click(); //设置a标签触发单击事件
document.body.removeChild(a); //移除a标签
}
简单的table导出为excel就好了
导出的excel打开会提示不安全，如下图：你直接点击【是】就可以正常打开了
- 这是个假的excel文件只有
xlsx格式可以在Excel中打开xls不行
利用 xlsx 插件来导出excel表
- 方法
- 调用
const handle = ()=>{
exportXls(
['time','check_power','mes_power'], // 导出表要用到的title，可以理解为有几列，数据结构要对应
excelData, // 导出表的数据
'出力值集图.xlsx' // 表名字
)
}
- 数据结构
// resData为API得到的数据
// excelData为导出到excel表需要用到的数据集合
// 最终结构 [["a","b","c"],["a","b","c"],……]，每一个index下的数据，与表的title相互对应
let excelData = []
resData.forEach((item, index) => {
excelData[index] = [
item["event_time"],
item["check_power"],
item["mes_power"]
]
})
参考文献
结语
前端react QQ群：
788023830----React/Redux - 地下老英雄前端交流 QQ群：
249620372----FRONT-END-JS前端（我们的宗旨是，为了加班，为了秃顶……，仰望大佬），希望小伙伴们加群一起学习
