前端生成及导出表格

Ne￡

已于 2022-11-24 11:33:43 修改

阅读量574

点赞数

文章标签：前端

于 2022-10-18 00:11:35 首次发布

本文链接：https://blog.csdn.net/weixin_45549737/article/details/127379943

版权

1.SheetJS

目前excel表格的导入导出最流行的方案就是使用SheetJS.
SheetJS:中文文档链接https://github.com/rockboom/SheetJS-docs-zh-CN/

使用

//安装依赖
npm install xlsx

//使用页面引入
import xlsx from 'xlsx'
//使用
1.创建一个工作簿
const wb=xlsx.utils.book_new();
2.创建工作表
const ws=xlsx.utils.json_to_sheet([
	{id:1,name:'张三',age:18}
])
3.把工作表放到工作簿中
xlsx.utils.book_append_sheet(wb,ws)
4.生成数据保存
xlsx.writeFile(wb,'测试表格.xlsx',{
	//保存文件的类型
	bookType:'xlsx'
})

2.表格导出

1. 在前端HTML上绘制想要导出的表格（包含后端获取的数据）

<div class="exportExcel" id="exportOutTable" style="display:none">
       <table></table>
</div>

2. 导出

let excelHtml: any = document.getElementById("exportOutTable")?.outerHTML;
  let html =
    "<html><head><meta charset='utf-8' /></head><body>" +
    excelHtml +
    "</body></html>";
  let blob = new Blob([html], { type: "application/vnd.msexcel" });

  if ((window.navigator as any).msSaveOrOpenBlob) {
    (window.navigator as any).msSaveOrOpenBlob(blob, "表格名称.xls");
  } else {
    let a = document.createElement("a");
    let url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = "表格名称.xls";
    a.style.display = "none";
    document.body.appendChild(a);
    a.click();
    a.remove();
    window.URL.revokeObjectURL(url);
  }