vue+xlsx-js-style导出Excel自定义样式

1.安装插件 npm install xlsx-js-style@1.2.0 --save

2.封装导出方法 export_array_to_STYLES

//excel.js
import XLSXS from 'xlsx-js-style'
export const export_array_to_STYLES = ({ key, data, widthList, align, title, filename, styles }) => {

  let workbook = XLSXS.utils.book_new(); // 工作簿
  const arr = json_to_array(key, data);
  const excelData = [title, ...arr];
  let worksheet = XLSXS.utils.aoa_to_sheet(excelData); // 数据表
  let cols = []; // 设置每列的宽度
  let rows = [];//行高
  // wpx 字段表示以像素为单位，wch 字段表示以字符为单位
  if (!(align && align.length > 0)) { return false; }
  for (let i = 0; i <= excelData[0].length; i++) {
    let col = {};
    col.wpx = widthList&&widthList.length>0?widthList[i]:30;
    cols.push(col);
  }
  for (let i = 1; i <= excelData.length; i++) {
    rows.push({ hpx: 32 });
  }
  worksheet['!cols'] = cols; // 设置列宽信息到工作表
  worksheet['!rows'] = rows;// 设置列高信息到工作表
  //以下是样式设置，样式设置放在组织完数据之后，xlsx-js-style的核心API就是SheetJS的

  const set = { "A": 0, "B": 1, "C": 2, "D": 3, "E": 4, "F": 5, "G": 6, "H": 7, "I": 8, "J": 9, "K": 10, "L": 11, "M": 12, "N": 13, "O": 14, "P": 15, "Q": 16, "R": 17, "S": 18, "T": 19, "U": 20, "V": 21, "W": 22, "X": 23, "Y": 24, "Z": 25 }
  Object.keys(worksheet).forEach((key, i) => {
    // 非!开头的属性都是单元格
    if (!key.startsWith("!")) {
      if (i < title.length) {
        //表头设置
        worksheet[key].s = {
          font: {
            bold: true,
            sz: 11,
            name: '宋体',
          },
          // alignment 对齐方式
          alignment: {
            vertical: 'center', // 垂直居中
            horizontal: 'center'
          },
          // border 边框属性
          border: {
            top: { style: 'thin' },
            bottom: { style: 'thin' },
            left: { style: 'thin' },
            right: { style: 'thin' }
          },
          // fill 颜色填充属性
          fill: {
            fgColor: { rgb: 'FFFFFF' },
          }
        };
      } else {
        //默认样式
        const styleCss = {
          font: {
            bold: false,
            sz: 10,
            name: '宋体',
          },
          // alignment 对齐方式
          alignment: {
            vertical: 'center', // 垂直居中
            horizontal: align[set[key.charAt(0)]] // 水平居中
          },
          // border 边框属性
          border: {
            top: { style: 'thin' },
            bottom: { style: 'thin' },
            left: { style: 'thin' },
            right: { style: 'thin' }
          },
          // fill 颜色填充属性
          fill: {
            fgColor: { rgb: 'FFFFFF' },
          }
        };
        if (styles && styles[key]) {
          styles[key].alignment.horizontal = align[set[key.charAt(0)]];
        }
        worksheet[key].s = styles && styles[key] ? styles[key] : styleCss;

      }

    }
  })
  XLSXS.utils.book_append_sheet(workbook, worksheet, "Sheet1");
  XLSXS.writeFile(workbook, filename + ".xlsx");
};

使用

import { export_array_to_STYLES } from '@/utils/excel.js';
export default {
      data(){
          return {
                  list:[]//表格数据
                  columns:[],//表格列配置
          }
    },
    methods:{
          Excel(){
                var title = [], key = [],align = [],widthList = [],styles={};
                //根据业务需要过滤不需要的列
                var columnsProp = this.columns.filter((e) => {
                    return e.prop == e.isProp;
                })
              function generateBig_1() {
                var str = [];
                for (var i = 65; i < 91; i++) {
                  str.push(String.fromCharCode(i));
                }
                return str;
              }
               this.list.map((e, i) => {
                  title.map((es, j) => {
                  let arr = generateBig_1();
                  const name = arr[j] + (i + 2);
                  styles[name] = {
                    font: {
                      bold: false,
                      sz: 10,
                      name: '宋体',
                    },
                    // alignment 对齐方式
                    alignment: {
                      vertical: 'center', // 垂直居中
                      horizontal: 'center', // 水平居中 默认已经强制设置为表格对齐方式 此处可不填
                    },
                    border: {
                      top: { style: 'thin' },
                      bottom: { style: 'thin' },
                      left: { style: 'thin' },
                      right: { style: 'thin' }
                    },
                    // fill 颜色填充属性
                    fill: {
                      fgColor: { rgb: 'ffffff' },
                    }
                  }
                })
               })
                columnsProp.map((e, i) => {
                    title.push(e.label);
                    key.push(e.property);
                    widthList.push(e.minWidth);
                    align.push(columnsProp[i].align);
                });
              export_array_to_STYLES({
                   key: key,//表格prop
                  styles:styles,//导出表格每个单元格样式（不含表头，表头样式固定写死，见excel.js）
                   widthList:widthList,//表格列width
                   title: title,//表格标题文字
                   data: this.list,//表格数据
                  align: align,//表格对齐方式，默认表头写死居中（见excel.js），此处设置为表格内容居中方式
                  filename: 'xxxxx'//导出表格名称
                });
          }
    }
}

最后编辑于：2023.03.23 14:02:36