1. Toy模板网首页
  2. > Toy博客

sheetJs / xlsx-js-style 纯前端实现导出 excel 表格及自定义单元格样式

7月前 作者：aibujin 分类：Toy博客 阅读(28) 违法举报

这篇具有很好参考价值的文章主要介绍了sheetJs / xlsx-js-style 纯前端实现导出 excel 表格及自定义单元格样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、安装

  • xlsx 地址：https://www.npmjs.com/package/xlsx
  • SheetJs 地址：https://docs.sheetjs.com/docs/
  • xlsx-js-style 地址：https://www.npmjs.com/package/xlsx-js-style 
npm install xlsx-js-style

二、创建基础工作表

<script lang="ts" setup>
import { utils, writeFileXLSX } from 'xlsx'

const list = [
    { Name: 'Bill Clinton', Index: 42 },
    { Name: 'GeorgeW Bush', Index: 43 },
    { Name: 'Barack Obama', Index: 44 },
    { Name: 'Donald Trump', Index: 45 },
    { Name: 'Joseph Biden', Index: 46 },
]

const exportFile = () => {
    // 创建一个工作簿 workbook
    const workBook = utils.book_new()
    // 创建工作表 worksheet
    // json_to_sheet 	是将【由对象组成的数组】转化成sheet
    // aoa_to_sheet  	是将【一个二维数组】转化成 sheet
    // table_to_sheet  	是将【table的dom】直接转成sheet
    // 这里我们使用 json_to_sheet
    const workSheet = utils.json_to_sheet(list)
    // 将工作表放入工作簿中
    // utils.book_append_sheet(workbook, worksheet, name, true);
    utils.book_append_sheet(workBook, workSheet, 'Data')
    // 生成数据保存
    writeFileXLSX(workBook, `SheetJSVueAoO.xlsx`, {
        bookType: 'xlsx',
    })
}
</script>

<template>
    <div>
        <button @click="exportFile">创建工作表</button>
    </div>
</template>

sheetjs 样式,sheetjs,xlsx-js-style,纯前端导出excel,vue 前端导出excel,前端自定义单元格样式

三、设置单元格宽度/高度/隐藏单元格

  • !cols 设置列宽
    cols 为一个对象数组，依次表示每一列的宽度
    wpx 字段表示以像素为单位，wch 字段表示以字符为单位
    hidden 如果为真，则隐藏该列

  • !rows 设置行高
    rows 为一个对象数组，依次表示每一行的高度

<script lang="ts" setup>
import { utils, writeFileXLSX } from 'xlsx-js-style'

const list = [
    {
        Name: 'Bill Clinton',
        Date: '2023-01-01',
        'Source category name': 'Excise Taxes',
        'Source subcategory name': 'Corporation Income Taxes',
    },
    {
        Name: 'GeorgeW Bush',
        Date: '2023-01-01',
        'Source category name': 'Excise Taxes',
        'Source subcategory name': 'Corporation Income Taxes',
    },
    {
        Name: 'Barack Obama',
        Date: '2023-01-01',
        'Source category name': 'Excise Taxes',
        'Source subcategory name': 'Corporation Income Taxes',
    },
    {
        Name: 'Donald Trump',
        Date: '2023-01-01',
        'Source category name': 'Excise Taxes',
        'Source subcategory name': 'Corporation Income Taxes',
    },
    {
        Name: 'Joseph Biden',
        Date: '2023-01-01',
        'Source category name': 'Excise Taxes',
        'Source subcategory name': 'Corporation Income Taxes',
    },
]

const exportFile = () => {
    // 创建一个工作簿 workbook
    const workBook = utils.book_new()
    // 创建工作表 worksheet
    const workSheet = utils.json_to_sheet(list)

    // 设置列宽
    // cols 为一个对象数组，依次表示每一列的宽度
    // wpx 字段表示以像素为单位，wch 字段表示以字符为单位
    // hidden 如果为真，则隐藏该列
    workSheet['!cols'] = [
        { wpx: 100 },
        { wch: 50 },
        { width: 30 },
        { hidden: true },
    ]

    // 设置行高
    // rows 为一个对象数组，依次表示每一行的高度
    workSheet['!rows'] = [{ hpx: 30 }, { hpt: 50 }, { hidden: true }]

    // 将工作表放入工作簿中
    // utils.book_append_sheet(workbook, worksheet, name, true);
    utils.book_append_sheet(workBook, workSheet, 'Data')
    // 生成数据保存
    writeFileXLSX(workBook, `SheetJSVueAoO.xlsx`, {
        bookType: 'xlsx',
    })
}
</script>

<template>
    <div>
        <button @click="exportFile">设置单元格宽度/高度/隐藏</button>
    </div>
</template>

sheetjs 样式,sheetjs,xlsx-js-style,纯前端导出excel,vue 前端导出excel,前端自定义单元格样式

四、分配数字格式

<script lang="ts" setup>
import { utils, writeFileXLSX } from 'xlsx-js-style'

const list = [
    { Name: 'Barack Obama', Taxes: 726223 },
    { Name: 'GeorgeW Bush', Taxes: 3.5 },
    { Name: 'Bill Clinton', Taxes: 45571 },
    { Name: 'Donald Trump', Taxes: 0.0219 },
    { Name: 'Donald Trump', Taxes: new Date() },
    { Name: 'Joseph Biden', Taxes: 666666 },
]

const exportFile = () => {
    // 创建一个工作簿 workbook
    const workBook = utils.book_new()
    // 创建工作表 worksheet
    const workSheet = utils.json_to_sheet(list)

    // 分配数字格式
    workSheet['B3'].z = '"$"#,##0.00_);\\("$"#,##0.00\\)'
    workSheet['B4'].z = '#,##0'
    workSheet['B5'].z = '0.00%'
    workSheet['B6'].z = 'yyyy-mm-dd hh:mm:ss AM/PM'
    workSheet['B7'].z = '[Red](#,##0)'

    // 将工作表放入工作簿中
    // utils.book_append_sheet(workbook, worksheet, name, true);
    utils.book_append_sheet(workBook, workSheet, 'Data')
    // 生成数据保存
    writeFileXLSX(workBook, `SheetJSVueAoO.xlsx`, {
        bookType: 'xlsx',
    })
}
</script>

<template>
    <div>
        <button @click="exportFile">分配数字格式</button>
    </div>
</template>

五、超链接

<script lang="ts" setup>
import { utils, writeFileXLSX } from 'xlsx-js-style'

const list = [
    { Name: 'https://sheetjs.com' },
    { Name: '电子邮箱' },
    { Name: '访问 C 盘文件' },
    { Name: '选中指定单元格' },
    { Name: '跳转指定 Sheet' },
    { Name: 'Joseph Biden' },
]

const exportFile = () => {
    // 创建一个工作簿 workbook
    const workBook = utils.book_new()
    // 创建工作表 worksheet
    const workSheet = utils.json_to_sheet(list)

    // 链接 https://sheetjs.com
    workSheet['A2'].l = {
        Target: 'https://sheetjs.com',
        Tooltip: 'https://sheetjs.com',
    }

    // 链接电子邮箱
    workSheet['A3'].l = { Target: 'mailto:ignored@dev.null' }

    // 访问本地 C 盘文件
    workSheet['A4'].l = { Target: 'file:///C:/Users/pc/Downloads/receipts.xls' }

    // 选中指定单元格 A1:C5
    workSheet['A5'].l = { Target: '#A1:C5', Tooltip: '选中 A1:C5 ' }

    // 跳转指定 Sheet
    workSheet['A6'].l = { Target: '#Data2!A1:C6', Tooltip: 'Data2' }

    workSheet['A7'].l = { Target: '#SheetJSDN', Tooltip: 'Defined Name' }

    // 将工作表放入工作簿中
    // utils.book_append_sheet(workbook, worksheet, name, true);
    utils.book_append_sheet(workBook, workSheet, 'Data')

    // 创建工作表2 worksheet
    var worksheet2 = utils.aoa_to_sheet([['Same', 'Cross', 'Name']])
    utils.book_append_sheet(workBook, worksheet2, 'Data2')

    // 定义的名称, ref 选中的是当前超链接所在单元格位置
    workBook.Workbook = {
        Names: [{ Name: 'SheetJSDN', Ref: 'Data2!A1:A1' }],
    }

    // 生成数据保存
    writeFileXLSX(workBook, `SheetJSVueAoO.xlsx`, {
        bookType: 'xlsx',
    })
}
</script>

<template>
    <div>
        <button @click="exportFile">超链接</button>
    </div>
</template>
  • 鼠标移上去看到小手标识及提示语，点击即可看到对应的超链接效果；
    sheetjs 样式,sheetjs,xlsx-js-style,纯前端导出excel,vue 前端导出excel,前端自定义单元格样式

六、单元格注释

<script lang="ts" setup>
import { utils, writeFileXLSX } from 'xlsx-js-style'

const list = [{ Name: 'Vue' }, { Name: 'React' }, { Name: 'Angular' }]

const exportFile = () => {
    // 创建一个工作簿 workbook
    const workBook = utils.book_new()
    // 创建工作表 worksheet
    const workSheet = utils.json_to_sheet(list)

    // 添加注释
    if (!workSheet.A2.c) workSheet.A2.c = []
    workSheet.A2.c.push({
        a: 'Vue',
        t: 'Vue 是一款用于构建用户界面的 JavaScript 框架',
    })

    if (!workSheet.A3.c) workSheet.A3.c = []
    // 如果设置为 true，则只有当用户将鼠标悬停在注释上时，注释才可见；
    workSheet.A3.c.hidden = true
    workSheet.A3.c.push({
        a: 'React',
        t: 'React 用于构建 Web 和原生交互界面的库',
    })

    if (!workSheet.A4.c) workSheet.A4.c = []
    // 如果设置为 true，则只有当用户将鼠标悬停在注释上时，注释才可见；
    workSheet.A4.c.hidden = true
    workSheet.A4.c.push({
        a: 'Angular',
        t: 'Angular 是一个应用设计框架与开发平台，旨在创建高效而精致的单页面应用',
    })

    // 将工作表放入工作簿中
    utils.book_append_sheet(workBook, workSheet, 'Data')

    // 生成数据保存
    writeFileXLSX(workBook, `SheetJSVueAoO.xlsx`, {
        bookType: 'xlsx',
    })
}
</script>

<template>
    <div>
        <button @click="exportFile">单元格注释</button>
    </div>
</template>

sheetjs 样式,sheetjs,xlsx-js-style,纯前端导出excel,vue 前端导出excel,前端自定义单元格样式

七、公式

<script lang="ts" setup>
import { utils, writeFileXLSX, writeFile } from 'xlsx-js-style'

const list = [
    ['姓名', '语文', '数学', '英语', '总数', '最大值', '姓名去重'],
    ['张三', 80, 100, 100],
    ['李四', 90, 100, 80],
    ['李四', 85, 80, 100],
    ['王五', 100, 85, 90],
    ['张三', 90, 70, 90],
    ['赵六', 95, 90, 80],
    ['张三', 100, 80, 90],
]

const exportSimpleFormula = () => {
    var ws = utils.aoa_to_sheet([
        [6], // A1
        [8], // A2
        [{ t: 'n', v: 3, f: 'SUM(A1,A2)' }], // SUM 函数
        [{ t: 'n', v: 3, f: 'CONCAT("concat：",A1,A2)' }], // CONCAT 函数
    ])
    var wb = utils.book_new()
    utils.book_append_sheet(wb, ws, 'Sheet1')
    writeFile(wb, 'SheetJSFormula.xlsx')
}

const exportFile = () => {
    // 创建一个工作簿 workbook
    const workBook = utils.book_new()
    // 创建工作表 worksheet
    const workSheet = utils.aoa_to_sheet(list)

    utils.sheet_set_array_formula(workSheet, 'E2:E8', 'B2:B8+C2:C8+D2:D8', true)

    list.forEach((e: (string | number)[], index: number) => {
        if (index > 0) {
            utils.sheet_set_array_formula(
                workSheet,
                `F${index + 1}`,
                `MAX(B${index + 1},C${index + 1},D${index + 1})`,
                true
            )
        }
    })

    utils.sheet_set_array_formula(
        workSheet,
        'G2:G8',
        '_xlfn.UNIQUE(A2:A8)',
        true
    )

    // 将工作表放入工作簿中
    utils.book_append_sheet(workBook, workSheet, 'Data')

    // 生成数据保存
    writeFileXLSX(workBook, `SheetJSVueAoO.xlsx`, {
        bookType: 'xlsx',
    })
}
</script>

<template>
    <div>
        <button @click="exportSimpleFormula">简单公式</button>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button @click="exportFile">数组公式</button>
    </div>
</template>
  • 给单元格增加公式，比如下面：求指定单元格中的最大值(MAX函数)；
  • 在 “结果” 双击即可看到对应的公式，按 " ESC" 即可退出；
    sheetjs 样式,sheetjs,xlsx-js-style,纯前端导出excel,vue 前端导出excel,前端自定义单元格样式

八、合并单元格

  • !merges 设置单元格合并
  • merges 为一个对象数组，每个对象设定了单元格合并的规则
  • 方法一：通过 decode_range 设置范围合并单元格
  • 方法二：手动设置 A1-C1 的单元格合并（s:开始位置, e:结束位置, r:行, c:列）
<script lang="ts" setup>
import { utils, writeFile } from 'xlsx-js-style'

const exportFile = () => {
    var ws = utils.aoa_to_sheet([
        // 特别注意合并的地方后面预留 2 个 null， 否则后面的内容（本例中是第四列其它信息）会被覆盖
        ['主要信息', null, null, '其它信息'],
        ['姓名', '性别', '年龄', '注册时间'],
        ['张三', '男', 18, new Date()],
        ['李四', '女', 22, new Date()],
    ])
    if (!ws['!merges']) ws['!merges'] = []

    // 方法一：通过 decode_range 设置范围合并单元格
    ws['!merges'].push(utils.decode_range('A1:C1'))

    // 方法二：手动设置 A1-C1 的单元格合并
    // merges 为一个对象数组，每个对象设定了单元格合并的规则
    // s:开始位置, e:结束位置, r:行, c:列

    // ws['!merges'] = [
    //     { s: { r: 0, c: 0 }, e: { r: 0, c: 2 } },
    // ]

    var wb = utils.book_new()
    utils.book_append_sheet(wb, ws, 'Sheet1')
    writeFile(wb, 'SheetJSVueAoO.xlsx')
}
</script>

<template>
    <div>
        <button @click="exportFile">合并单元格</button>
    </div>
</template>

sheetjs 样式,sheetjs,xlsx-js-style,纯前端导出excel,vue 前端导出excel,前端自定义单元格样式

九、自定义单元格样式

<script lang="ts" setup>
import { utils, writeFile } from 'xlsx-js-style'

const header = [
    [[]], // 占位
    [
        {}, // 占位
        {
            v: `工厂统计表 ${'\n'}`,
            t: 's',
            s: {
                font: {
                    sz: 15, //设置标题的字号
                    bold: true, //设置标题是否加粗
                    name: '宋体',
                },
                //设置标题水平竖直方向居中，并自动换行展示
                alignment: {
                    horizontal: 'center',
                    vertical: 'center',
                    wrapText: true,
                },
                fill: {
                    fgColor: { rgb: '9FE3FF' },
                },
            },
        },
    ],
]

const info = [
    [
        null,
        {
            v: '                                                                                                                                                                                                                                                                                                                                                                                                    统计时间：2023/01/01 00:00',
            t: 's',
            s: {
                fill: {
                    fgColor: { rgb: '9FE3FF' },
                },
            },
        },
    ],
    [
        null,
        {
            v: '                                                                                                                                                                                                                                                                                                                                                                                                    统计维度：按月',
            t: 's',
            s: {
                fill: {
                    fgColor: { rgb: '9FE3FF' },
                },
            },
        },
    ],
    [
        null,
        {
            v: '                                                                                                                                                                                                                                                                                                                                                                                                    统计周期：2023/01/01 至 2023/01/01',
            t: 's',
            s: {
                alignment: {
                    vertical: 'top',
                },
                fill: {
                    fgColor: { rgb: '9FE3FF' },
                },
            },
        },
    ],
]

const risk = [
    '序号',
    '险别',
    '企财险',
    '家财险',
    '机动车',
    '责任险',
    '意外险',
    '货运险',
    '保证险',
    '其他险',
]

const data = risk.map((e) => {
    return {
        v: e,
        t: 's',
        s: {
            font: {
                bold: true, //设置标题是否加粗
                name: '宋体',
            },
            //设置标题水平竖直方向居中，并自动换行展示
            alignment: {
                horizontal: 'center',
                vertical: 'center',
                wrapText: true,
            },
            border: {
                top: { style: 'thin', color: { rgb: '000000' } },
                bottom: { style: 'thin', color: { rgb: '000000' } },
                left: { style: 'thin', color: { rgb: '000000' } },
                right: { style: 'thin', color: { rgb: '000000' } },
            },
            fill: {
                fgColor: { rgb: '9FE3FF' },
            },
        },
    }
})

const random = (min: number, max: number): number => {
    return Math.floor(Math.random() * (max - min)) + min
}

const dataArr = () => {
    const items: (Object | null)[][] = []
    Array.apply(null, { length: 18 } as any).map((e, index: number) => {
        const item: (Object | null)[] = [null]
        Array.apply(null, { length: 10 } as any).map((ele, idx: number) => {
            item.push({
                v: idx === 0 ? index + 1 : random(1, 100000),
                t: 's',
                s: {
                    font: {
                        name: '宋体',
                    },
                    alignment: {
                        horizontal: 'center',
                        vertical: 'center',
                    },
                    border: {
                        top: { style: 'thin', color: { rgb: '000000' } },
                        bottom: { style: 'thin', color: { rgb: '000000' } },
                        left: { style: 'thin', color: { rgb: '000000' } },
                        right: { style: 'thin', color: { rgb: '000000' } },
                    },
                },
            })
        })
        items.push(item)
    })
    return items
}

const exportFile = () => {
    var ws = utils.aoa_to_sheet([
        ...header,
        ...info,
        [null, ...data],
        ...dataArr(),
    ])

    // 合并单元格
    if (!ws['!merges']) ws['!merges'] = []
    ws['!merges'].push(utils.decode_range('B2:K2'))
    ws['!merges'].push(utils.decode_range('B3:K3'))
    ws['!merges'].push(utils.decode_range('B4:K4'))
    ws['!merges'].push(utils.decode_range('B5:K5'))
    ws['!merges'].push(utils.decode_range('A2:A5'))
    ws['!merges'].push(utils.decode_range('L2:L5'))

    // 设置列宽
    // cols 为一个对象数组，依次表示每一列的宽度
    if (!ws['!cols']) ws['!cols'] = []
    ws['!cols'] = [
        { wpx: 70 },
        { wpx: 118 },
        { wpx: 118 },
        { wpx: 118 },
        { wpx: 118 },
        { wpx: 118 },
        { wpx: 118 },
        { wpx: 118 },
        { wpx: 118 },
        { wpx: 118 },
        { wpx: 200 },
    ]

    // 设置行高
    // rows 为一个对象数组，依次表示每一行的高度
    if (!ws['!rows']) ws['!rows'] = []
    ws['!rows'] = [
        { hpx: 0 },
        { hpx: 40 },
        { hpx: 15 },
        { hpx: 15 },
        { hpx: 20 },
        { hpx: 20 },
        ...Array.apply(null, { length: dataArr().length } as any).map(() => {
            return { hpx: 20 }
        }),
    ]
    var wb = utils.book_new()
    utils.book_append_sheet(wb, ws, 'Sheet1')
    writeFile(wb, 'SheetJSVueAoO.xlsx')
}
</script>

<template>
    <div>
        <button @click="exportFile">单元格样式</button>
    </div>
</template>

sheetjs 样式,sheetjs,xlsx-js-style,纯前端导出excel,vue 前端导出excel,前端自定义单元格样式

十、项目地址

项目地址：https://github.com/aibujin/xlsx-js-style文章来源地址https://www.toymoban.com/news/detail-742169.html

到了这里，关于sheetJs / xlsx-js-style 纯前端实现导出 excel 表格及自定义单元格样式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • xlsx库实现纯前端导入导出Excel

    xlsx库实现纯前端导入导出Excel

    最近做了前端导入、导出 Excel 的需求，用到了 js-xlsx 这个库，该库文档提供的用例很少，并不是很友好。本文总结一下我是如何实现需求的。 提供一个 Excel 文件，将里面的内容转成 JSON 导入数据 提供一个 JSON 文件，生成 Excel 文件并导出 导入与导出既可以前端做，也可以后

    2023年04月08日
    浏览(40)
  • 前端导出表格 修改样式（xlsx-style）用法

    前端导出表格 修改样式（xlsx-style）用法

            xlsx-style 修改样式的机制  就是选中哪一行，那一列或者哪一个  然后去修改  比如表格最左上角的一个格子 坐标是 （0， 0） 下标  也可以叫做  A1 选中之后   可以修改其样式  1. 下载依赖   首先下载依赖到项目 2. 引入到项目 3. 创建导出表格         为什么

    2024年02月13日
    浏览(38)

  • 前端JS实现导出xlsx文件

    需求背景： 需要导出表格的数据，由于后端不提供导出接口，所以由前端通过JSON数据导出实现。 使用的插件： js-export-excel 安装： npm install js-export-excel 使用： 亲测有用，只要前端能拿到的是表格全量数据，就能直接导出表格所有数据。但如果是后端分页查询的表格，前端

    2024年02月04日
    浏览(42)
  • vue+xlsx实现前端模版下载、导入和导出excel文件

    vue+xlsx实现前端模版下载、导入和导出excel文件

    产品需求：后端不想写下载，导入和导出的接口，让我们前端自己实现。 这里我们就可以用xlsx插件来实现，我们不多说了，先放一下实现的图片，下面我们分别把模版下载、导入和导出的代码放上来，想用的话，直接复制粘贴即可！ 模版下载图片 导出图片： 好了，下面我

    2024年02月13日
    浏览(37)

  • vue导入导出excel、设置单元格背景色、文字居中、合并单元格、设置列宽（使用xlsx库和xlsx-style库）

    xlsx 是由 SheetJS 开发的一个处理excel文件的npm库 适用于前端开发者实现导入导出excel文件的经典需求 为了区别于xlsx文件，突出其应用语言，该库通常又被称为 js-xlsx 需要以下步骤： 安装 xlsx 库 你可以使用 npm 包管理器安装 xlsx 库，也可以将 xlsx 下载到本地，然后在 HTML 文件中

    2024年02月16日
    浏览(37)
  • 前端基于XLSX实现数据导出到Excel表格，以及提示“文件已经被损坏，无法打开”的解决方法

    前端基于XLSX实现数据导出到Excel表格，以及提示“文件已经被损坏，无法打开”的解决方法

    一、vue实现导出excel 1、前端实现 xlsx是一个用于读取、解析和写入Excel文件的JavaScript库。它提供了一系列的API来处理Excel文件。使用该库，你可以将数据转换为Excel文件并下载到本地。这种方法适用于在前端直接生成Excel文件的场景。 更多介绍可参见官网 1、安装xlsx依赖 2、引

    2024年01月23日
    浏览(52)

  • 使用JavaScript和XLSX.js将数据导出为Excel文件

    导出数据是Web应用程序中常见的功能之一。在许多情况下，我们需要将数据导出为Excel文件，以便用户可以在本地计算机上查看和编辑数据。在本篇博客中，我们将介绍如何使用JavaScript和XLSX.js将数据导出为Excel文件。 XLSX.js是一个JavaScript库，它提供了一组API，可以将数据转换

    2024年04月26日
    浏览(30)

  • js 实现纯前端将数据导出excel两种方式

    将table标签，包括tr、td等对json数据进行拼接，将table输出到表格上实现，这种方法的弊端在于输出的是伪excel，虽说生成xls为后缀的文件，但文件形式上还是html，代码如下 通过将json遍历进行字符串拼接，将字符串输出到csv文件，代码如下

    2024年02月15日
    浏览(20)
  • 前端excel文件处理，vue2 、file-saver、xlsx, excel文件生成与excel文件链接数据导出

    前端excel文件处理，vue2 、file-saver、xlsx, excel文件生成与excel文件链接数据导出

    安装插件 如使用TS开发，可安装file-saver的TypeScript类型定义 下载文件流 本地文件下载 文件下载（列宽自适应） 表格显示，每列列宽自适应 xlsx文件链接数据导出 方法调用

    2024年02月11日
    浏览(41)
  • 纯前端 —— 200行JS代码、实现导出Excel、支持DIY样式，纵横合并

    纯前端 —— 200行JS代码、实现导出Excel、支持DIY样式，纵横合并

    前期回顾 Vue3 + TS + Element-Plus 封装Tree组件 《亲测可用》_vue3+ts 组件封装-CSDN博客 https://blog.csdn.net/m0_57904695/article/details/131664157?spm=1001.2014.3001.5501 目录 具体思路： 1. 准备HTML结构 2. 定义CSS样式 3. 初始化表格数据 4. 创建表格函数createTable 5. 将表格添加到页面中 6. 导出表格为E

    2024年02月02日
    浏览(27)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包