乐趣区

关于xlsx:vue2xlsxxlsxstyleFileSaver实现复杂表格的下载

<el-table
ref="report-table">
....
</el-table>
import FileSaver from 'file-saver';
import XLSXS from "xlsx-style";
import * as XLSX from 'xlsx';
export default {data() {
    return {
      // 表格
      table: {
        loading: false,
        loadingText: '',
        data: [],
        total: 0,
      }
    };
  },
  created() {this.init();
  },
  methods: {
    /** 导出按钮操作 */
    handleExport(excelName) {
      this.table.loading = true;
      this.table.loadingText = '导出中,请稍后....';
      setTimeout(() => {
        try {const $e = this.$refs['report-table'].$el;
          let $table = $e.querySelector('.el-table__fixed');
          if(!$table) {$table = $e;}
  
          let wb = XLSX.utils.table_to_book($table, {raw:true});
          this.xlsxStyle(wb);
          var ws = XLSXS.write(wb, {type: "buffer",});
          // const wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST:true, type: 'array'});
          FileSaver.saveAs(new Blob([ws],{type: 'application/octet-stream'}),
            `${excelName}.xlsx`,
          )
        } catch (e) {if (typeof console !== 'undefined') console.error(e);
        }
        this.table.loading = false;
        this.table.loadingText = '';
      }, 1000);
    },
    xlsxStyle(wb) {let ws = wb.Sheets["Sheet1"];
      for (let key in ws) {// console.log(key, ws[key])
        const num = key.slice(1, key.length);
        // 表头
        if (num === '1' && ws[key].t !== 'z') {
          // 留神:border 未开启,如果开启,在跨行、跨列的状况下会呈现少边框的问题。ws[key].s = {
            font: { // 字体相干款式
              name: '宋体', // 字体类型
              sz: 11, // 字体大小
              color: {rgb: ''}, // 字体色彩
              bold: true, // 是否加粗
            },
            // border: {
            //   top: {
            //     style: "thin",
            //     color: {
            //       auto: 1,
            //     },
            //   },
            //   left: {
            //     style: "thin",
            //     color: {
            //       auto: 1,
            //     },
            //   },
            //   right: {
            //     style: "thin",
            //     color: {
            //       auto: 1,
            //     },
            //   },
            //   bottom: {
            //     style: "thin",
            //     color: {
            //       auto: 1,
            //     },
            //   },
            // },
            alignment: {
              /// 主动换行
              wrapText: 1,
              // 居中
              horizontal: "center",
              vertical: "center",
              indent: 0
            }
          }
        } else {
          // 所有表格
          if (key !== '!rows' && key !== '!cols' && key !== '!ref' && key !== '!fullref' && ws[key].t !== 'z') {ws[key].s = {
              font: {
                // 字体相干款式
                name: "宋体", // 字体类型
                sz: 11, // 字体大小
                color: {rgb: ""}, // 字体色彩
              },
              // border: {
              //   top: {
              //     style: "thin",
              //     color: {
              //       auto: 1,
              //     },
              //   },
              //   left: {
              //     style: "thin",
              //     color: {
              //       auto: 1,
              //     },
              //   },
              //   right: {
              //     style: "thin",
              //     color: {
              //       auto: 1,
              //     },
              //   },
              //   bottom: {
              //     style: "thin",
              //     color: {
              //       auto: 1,
              //     },
              //   },
              // },
              alignment: {
                /// 主动换行
                wrapText: 1,
                // 居中
                horizontal: "center",
                vertical: "center",
                indent: 0,
              },
            };
          }
        }
      }
    },
  },
};

目前满足简单表格的需要,只有 el-table 能画进去的表格,导出格局都没问题。
惟一的问题是,导出的表格,单元格字体款式批改未胜利。
单元格款式可能批改,应用 xlsx-style 插件。

退出移动版