前端导出word/excle文档

这篇博客介绍了如何在前端利用Typescript结合FileSaver插件实现word和excel文档的导出,提供了一个简单的demo,并展示了最终效果。
摘要由CSDN通过智能技术生成

导出word/excle文档

最近工作中需要导出文档到本地,然后综合网上资料和自己的一些实践,整理了一个案例,供大家参考。后期也会把图片的本地导出整理出来,做个笔记存档。

下面的代码我是用Typescript写的,有些地方和js可能不大一样,但本质是一样的。

首先引入FileSaver插件:

 <script src="FileSaver.min.js"></script>

创建一个小demo:

/**点击下载 */
download() {
   
    //表头
    let title = [
      [["统计报表标题", 3, 1, "Titclass"]],
      [["编号", 1, 1, " "], ["时间", 1, 1, " "], ["日期", 1, 1, " "]]
    ];
    //内容
    let dataArr = [["第一行", "星期一", "10-01"
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端可以通过使用 JavaScript 库来导出 Excel 文件,其中比较常用的库有 SheetJS 和 ExcelJS。 SheetJS 是一个开源库,支持将数据导出为 Excel 文件,它可以在浏览器中运行,也可以在 Node.js 中使用。使用 SheetJS,你需要先将数据转换成 Excel 格式,然后通过浏览器下载即可。 下面是使用 SheetJS 导出 Excel 的示例代码: ```javascript // 导出数据到 Excel function exportToExcel(data, filename) { const worksheet = XLSX.utils.json_to_sheet(data); const workbook = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(workbook, worksheet, filename); XLSX.writeFile(workbook, filename + '.xlsx'); } // 示例数据 const data = [ { name: '张三', age: 18, gender: '男' }, { name: '李四', age: 20, gender: '女' }, { name: '王五', age: 22, gender: '男' } ]; // 调用导出函数 exportToExcel(data, '用户信息'); ``` ExcelJS 也是一个开源库,它支持更多的 Excel 功能,包括图表、图像、样式等。使用 ExcelJS,你需要先创建一个工作簿,然后添加工作表和数据,最后保存文件即可。 下面是使用 ExcelJS 导出 Excel 的示例代码: ```javascript // 导出数据到 Excel function exportToExcel(data, filename) { const workbook = new ExcelJS.Workbook(); const worksheet = workbook.addWorksheet('Sheet1'); worksheet.columns = [ { header: '姓名', key: 'name' }, { header: '年龄', key: 'age' }, { header: '性别', key: 'gender' } ]; worksheet.addRows(data); workbook.xlsx.writeFile(filename + '.xlsx'); } // 示例数据 const data = [ { name: '张三', age: 18, gender: '男' }, { name: '李四', age: 20, gender: '女' }, { name: '王五', age: 22, gender: '男' } ]; // 调用导出函数 exportToExcel(data, '用户信息'); ``` 以上两个库都有详细的文档和示例代码,你可以根据自己的需求选择合适的库。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值