vue使用xlsx导出excel

封装xlsx并导出excel文件

介绍

封装方法基于掘金大神一杠，我只是拿过来改造成适合自己使用
使用了简单的封装，可以自定义行高列宽等样式，应该满足大部分导出的需要

感谢： 一杠大神

安装

npm 安装

npm install xlsx@0.16.8
npm install file-saver
npm install xlsx-style-medalsoft

xlsx-style-medalsoft 解决报错问题

在node_modules/xlsx-style-medalsoft/xlsx.js文件里找到write_ws_xml_data方法，在方法上方添加以下代码即可

var DEF_PPI = 96, PPI = DEF_PPI;
function px2pt(px) { return px * 96 / PPI; }
function pt2px(pt) { return pt * PPI / 96; }

xlsx封装的js文件 附带我自己写好的Dome

示例地址 Demo

封装好的ExportExcel.js文件

config 参数说明

config - size 设置列宽-行高大小

参数	说明	类型	默认值	可选值
cols	列宽，每一个对象对应每一列	Array	–	[{wpx}]、[{wch}]
rows	行高，每一个对象对应每一行	Array	–	[{hpx}]、[{hch}]

size 举例

<script>
export default {
  data() {
    return {
      config: {
        size: {
          cols: [
            // 第一列
            { wch: 15 },
            // 第二列
            { wch: 15 },
          ],
          rows: [
            // 第一行
            { hpx: 20 },
            // 第二行
            { hpx: 40 },
          ],
        },
      },
    }
  },
}
</script>

config - merge 合并单元格

参数	说明	类型	默认值	可选值
s	开始	Object	–	范围选择：{ c：列, r：行 }
e	结束	Object	–	范围选择：{ c：列, r：行 }
s-c:s-r；e-c:e-r	----	------	------	--------------------------
c	列坐标	Number	–	–
r	行坐标	Number	–	–

merge 举例

<script>
export default {
  data() {
    return {
      config: {
        merge: [
          // A1 - K1 合并
          { s: { c: 0, r: 0 }, e: { c: 10, r: 0 } }
          // A3 - K3 合并
          {
            s: { c: 0, r: 2 },
            e: { c: 10, r: 2 },
          },
        ],
      },
    }
  },
}
</script>

config - myStyle 样式设置

具体可以参考xslx官网 npm xlsx-style

参数	说明	类型	默认值	可选值
all	默认所有样式	Object	–	–
rowCells	统一设置某一行的样式	Object	–	–
sepcialCol	定义特殊列的样式	Object	–	–
mergeBorder	对导出合并单元格无边框的处理，只针对dom导出，因为只有dom导出会出现合并无边框的情况	Array	[]	–

all 举例

all: {
    font: { name: '宋体', sz: 11, color: { auto: 1
        }
    },
    // 设置边框
    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,
    },
}

rowCells 举例

// 设置第6行样式
6: {
    s: {
        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,
        },
        font: {
            name: '黑体',
            sz: 11,
            bold: true,
        },
    },
}

sepcialCol 举例

// 设置A1样式，也就是第一列第一行
A1: {
    s: {
      font: {
        name: '黑体',
        sz: 16,
        bold: true,
      },
      alignment: {
        horizontal: 'center',
        vertical: 'center',
      },
    },
}

mergeBorder

设置 mergeBorder=[] 即可