just-xlsx-export

一个简陋的导出excel，文件格式为xlsx的包，测试vue2/vue3 webpack脚手架中使用没有问题，vite脚手架中使用出现问题，有待后续解决

1.引入npm包

npm i -s just-xlsx-export

2.项目中进行基本使用

<template>
    <button @click="exportExcel">导出excel</button>
</template>

<script>
import { getSheets, downloadExcel } from 'just-xlsx-export'

export default {
    data () {
        return {
            data:
                [
                    ["", "姓名", "性别", "出生年月", "民族", "籍贯", "政治面貌", "身份证号", "手机号码", "毕业院校", "专业"],
                    [1, "小虎", "男", "1999-06-04", "汉", "江苏-南京市-秦淮区", "共青团员", "123456789012345678", "12345678901", "南京大学", "计算机"],
                    [2, "小鱼", "女", "1999-06-04", "汉", "江苏-南京市-秦淮区", "共青团员", "123456789012345678", "12345678901", "南京大学", "计算机"],
                    [3, "大熊", "男", "1999-06-04", "汉", "江苏-南京市-秦淮区", "共青团员", "123456789012345678", "12345678901", "南京大学", "计算机"],
                    [4, "大牛", "男", "1999-06-04", "汉", "江苏-南京市-秦淮区", "共青团员", "123456789012345678", "12345678901", "南京大学", "计算机"]
                ]
        }
    },
    methods: {
        exportExcel () {
            // 获取相应数据生成的单元格对象，注意，数据格式为[[],[],[],[],[]]
            const sheet = getSheets(this.data)
            // 导出excel
            downloadExcel(sheet, 'xlsx文件名')
        },
    }
}
</script>

3.设置单元格宽度，使用单元格合并，单元格文本居中/Set the excel cell width, use cell merging, and center cell text

<template>
    <button @click="exportExcel">导出excel</button>
</template>

<script>
import { getSheets, downloadExcel } from 'just-xlsx-export'

export default {
    data () {
        return {
            data:
                [
                    ["", "姓名", "性别", "出生年月", "民族", "籍贯", "政治面貌", "身份证号", "手机号码", "毕业院校", "专业"],
                    [1, "小虎", "男", "1999-06-04", "汉", "江苏-南京市-秦淮区", "共青团员", "123456789012345678", "12345678901", "南京大学", "计算机"],
                    [2, "小鱼", "女", "1999-06-04", "汉", "江苏-南京市-秦淮区", "共青团员","123456789012345678", "12345678901",  "南京大学", "计算机"],
                    [3, "大熊", "男", "1999-06-04", "汉", "江苏-南京市-秦淮区", "共青团员","123456789012345678", "12345678901",  "南京大学", "计算机"],
                    [4, "大牛", "男", "1999-06-04", "汉", "江苏-南京市-秦淮区", "共青团员", "123456789012345678", "12345678901",  "南京大学", "计算机"]
                ]
        }
    },
    methods: {
        exportExcel () {
            const arr = Array(11).fill('')
            // 设置需要合并单元格的标题，注意，单元格合并会以单元格首位的文本覆盖所有合并后的单元格中文本，所以这里只需设置首位的文本
            arr[0] = '序号'
            arr[1] = '我的信息'
            arr[4] = '详情信息'
            arr[9] = '教育经历'
            // 数据是[[],[],[],[]]的形式
            const excelData = [arr].concat(this.data)
            const sheet = getSheets(excelData)
            /// 设置单元格合并，'!merges'相当于设置单元格对象的合并规则，r为纵向合并，c为横向合并
            sheet['!merges'] = [
                // r为纵向合并，范围是第1列的行1到行2
                { s: { r: 0, c: 0 }, e: { r: 1, c: 0 } },
                // c为横向合并，范围是第1行的列2到列4
                { s: { r: 0, c: 1 }, e: { r: 0, c: 3 } },
                { s: { r: 0, c: 4 }, e: { r: 0, c: 8 } },
                { s: { r: 0, c: 9 }, e: { r: 0, c: 10 } },
            ];
            // sheet[item].s代表单元格的style，item为单元格的坐标,这里可以设置单元格字体大小，颜色，居中对齐等等，具体参考xlsx-style文档即可
            const styleArr = ['A1', 'B1', 'E1', 'J1']
            styleArr.forEach(item => {
                sheet[item].s = {
                    // 文本居中
                    alignment: {
                        horizontal: 'center',
                        vertical: 'center',
                    }
                }
            })
            // 设置宽度，wpx宽度数值，有多少个单元格设置多少个宽度对象即可
            sheet['!cols'] = [
                {
                    wpx: 150,
                },
                {
                    wpx: 500,
                },
                {
                    wpx: 100,
                },
                {
                    wpx: 150,
                },
                {
                    wpx: 150,
                },
                {
                    wpx: 150,
                },
                {
                    wpx: 200,
                },
            ];
            downloadExcel(sheet, 'xlsx文件名')
        },
    }
}
</script>