【使用SheetJS实现在网页端导出 Excel 表格保存（js-xlsx）】

文前白话

• 通过使用 SheetJS 库可以通过点击按钮，实现页面数据以 excel 、CSV 等文件形式导出到本地。
• 官方网址: https://sheetjs.com/.

• 详细介绍与使用可以详读库文档介绍：README.md
• 链接: https://github.com/SheetJS/sheetjs.
  

引入库文件

• 不同的使用场景有不同的方式：
• 在浏览器中，只需添加一个script标签:

<script lang="javascript" src="dist/xlsx.full.min.js">script>

• 所需的文件：xlsx.full.min.js 或者 xlsx.min.js 可以在 github 官网文件仓库中的 dist 目录下。两个使用哪一个都可以。链接为：

• 链接: https://github.com/SheetJS/sheetjs/tree/master/dist.

• 引入页面位置放在要执行页面js的前面。

导出表格步骤

• 在点击按钮的函数下面添加导出步骤：（在对应的js文件中添加）

$('#button-content .title').on('click', function() {
  const btnDesc = $(this).find('span').html()
  if (btnDesc === '查询') {
    console.log('查询');
    getTableData({
      startTime: startTime,
      endTime: endTime
    })
    return
  }
  if (btnDesc.indexOf('导出报表') !== -1) {

  //使用 sheetjs 导出表格
  // 1、创建一个工作簿 workbook 
  console.log(XLSX);
  const wb = XLSX.utils.book_new()
  //  2、创建工作表 worksheet
  const ws = XLSX.utils.json_to_sheet([
      {id:1,name:"张三",age:20},
      {id:2,name:"李四",age:21},
      {id:3,name:"王五",age:20},
      {id:4,name:"麻子",age:20},
      {id:5,name:"狗蛋",age:20},
      {id:6,name:"七熊",age:20}
  ])
  // 3、把工作表放到工作簿中 
  XLSX.utils.book_append_sheet(wb,ws, 'sheet')
  // 4、生成数据保存
  XLSX.writeFile(wb,"测试表格.xls",{ 
      bookType: 'xls'
  })
    // alert(btnDesc) 
    return
  }
})

• 注意：

• 若出现导出文件后，打开 Excel 表格时候，出现 : “导出文件格式和扩展名不匹配”, 表格无法打开。尝试以下：

• 1、注意保存文件格式 xlsx / xls

• 2、注意方法前的 XLSX 的 大小写

• 3、检查引入文件xlsx.full.min.js的版本

• 在导出自己的数据时候，可以将后端的依照数据格式数据取出，放到 【 {id:1,name:“张三”,age:20},】 相对应得位置即可。

• 示例：

var queryDataResult = null  // 定义存储查询表格数据变量

// 局部代码
console.log(res);

    var result = JSON.parse(res)

    console.log(result);
    if (result.code === 200) {
      const data = result.data
      queryDataResult = result.data   // 引出搜索的表格数据
      renderTable(data)
    }
  }, 500)


//局部代码


// 顶部搜索栏按钮事件
$('#button-content .title').on('click', function() {
  const btnDesc = $(this).find('span').html()
  if (btnDesc === '查询') {
    console.log('查询');
    getTableData({
      startTime: startTime,
      endTime: endTime
    })
    return
  }
  if (btnDesc.indexOf('导出报表') !== -1) { 
    if (!queryDataResult || !queryDataResult.length) { // 判断数据是否为空
      return
    }
    console.log(queryDataResult)
    var  date55555 = queryDataResult

  console.log(XLSX);
  const wb = XLSX.utils.book_new()
  const ws = XLSX.utils.json_to_sheet(date55555)
  XLSX.utils.book_append_sheet(wb,ws, 'sheet')
  XLSX.writeFile(wb,"导出表格.xls",{
      bookType: 'xls'
  })

效果

RE:

• SheetJS js-xlsx 社区版文档: https://github.com/rockboom/SheetJS-docs-zh-CN.
• 前端使用SheetJS的js-xlsx实现表格生成: https://www.shangmayuan.com/a/7857789cedc34e6287561f11.html.