vue xlsx组件 导出的excel表头插入内容

Posted 2023-06-01 HelloLLLLL

主要就是sheet_add_dom这个方法， dom是带有table标签元素的dom节点。

timeData是个二维数组：[["条件1","条件2"]，["值1","值2"]];

如果是要在表格内容行里面插入内容，可以直接在与表格绑定的对象上，插入内容就可以了。

/*timeData 是二维数组*/
  getExcelWithInfo(timeData,dom, title = \'默认标题\', fn = () => )
  
    //得到一个worksheet对象
    //var data =[["按单据日期", "开始时间：", "2023-5-12", "结束时间：", "2023-5-31"]];
    const ws = XLSX.utils.aoa_to_sheet(timeData);

    //追加一个表格dom到 worksheet对象
    //origin 默认值是从表格的最开始即A1开始追加，会覆盖前一个表格
    //origin：-1 表示从上一个表格的末尾行追加
    //origin: c:4, r:0 cellAddress 会从这个单元格的位置开始追加
    XLSX.utils.sheet_add_dom(ws, document.querySelector(dom),  origin: -1,raw: true )//原样格式

    let wb = XLSX.utils.book_new()

    var filename = title + ".xlsx"
    XLSX.utils.book_append_sheet(wb, ws, \'sheet1\')
    let wbout = XLSX.write(wb,  bookType: \'xlsx\', type: \'array\', bookSST: true, )
    fn && fn()
    try
    
      FileSaver.saveAs(new Blob([wbout],  type: \'application/octet-stream\' ), filename)
    
    catch (e)
    
      if (typeof console !== \'undefined\') console.log(e, wbout)
    
    return wbout
  ,

 

Vue 使用js-xlsx导出excel

安装js-xlsx

npm install xlsx --save

按钮添加导出事件

<button @click="exportData">导出</button>

定义导出方法

exportData() {
            let tableData = [
                [‘姓名‘, ‘年龄‘, ‘性别‘, ‘部门/小组‘]
            ] // 表格表头
            this.data.forEach (item => {
                let rowData = []
                rowData = [
                    item.name,
                    item.age,
                    item.sex,
                    item.department,
                ]
                tableData.push(rowData)
            })
            let ws = XLSX.utils.aoa_to_sheet(tableData)
            let wb = XLSX.utils.book_new()
            XLSX.utils.book_append_sheet(wb, ws, ‘数据‘) // 工作簿名称
            XLSX.writeFile(wb, ‘数据.xlsx‘) // 保存的文件名
        },