vue+element 导出表格并设置表格宽度

最新推荐文章于 2025-01-07 14:49:20 发布

聆听HJ

最新推荐文章于 2025-01-07 14:49:20 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_41542329/article/details/130945455

该文章展示了如何利用npm安装xlsx和file-saver库，然后在代码中导入并使用它们来将HTML表格转换为Excel工作表。通过XLSX.utils.table_to_sheet方法创建工作表，设置列宽和行高，最后用XLSX.writeFile保存为Excel文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 安装
npm install --save xlsx file-saver
 
// 组件里引入
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
 
// 方法
mydncxd(){
        let table = document.getElementById("mydncxd");
        let worksheet = XLSX.utils.table_to_sheet(table);
        let workbook = XLSX.utils.book_new();
        let wscols = [    // 每列不同宽度px
          { wch: 20 },
          { wch: 50 },
          { wch: 20 },
          { wch: 50 },
        ];
        // workbook.SheetNames[0]获取到到是文件里的到第一个表格
        worksheet["!cols"] = wscols;
        let wsrows = [{ hpx: 20 }];  // 每行固定高度px
        for (let i = 0; i <= this.total; i++) {   // total  列表条数
          wsrows.push({ hpx: 20 });
        }
        worksheet["!rows"] = wsrows;
        XLSX.utils.book_append_sheet(workbook, worksheet, "sheet");
        try {
          XLSX.writeFile(workbook, '电脑咨询单.xlsx');  //  time_date 所选日期
        } catch (e) {
          console.log(e, workbook);
        }
      },