关于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插件。

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理