sheetJs / xlsx-js-style 純前端實(shí)現(xiàn)導(dǎo)出 excel 表格及自定義單元格樣式

這篇具有很好參考價(jià)值的文章主要介紹了sheetJs / xlsx-js-style 純前端實(shí)現(xiàn)導(dǎo)出 excel 表格及自定義單元格樣式。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

一、安裝

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

二、創(chuàng)建基礎(chǔ)工作表

<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 = () => {
    // 創(chuàng)建一個(gè)工作簿 workbook
    const workBook = utils.book_new()
    // 創(chuàng)建工作表 worksheet
    // json_to_sheet 	是將【由對(duì)象組成的數(shù)組】轉(zhuǎn)化成sheet
    // aoa_to_sheet  	是將【一個(gè)二維數(shù)組】轉(zhuǎn)化成 sheet
    // table_to_sheet  	是將【table的dom】直接轉(zhuǎn)成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')
    // 生成數(shù)據(jù)保存
    writeFileXLSX(workBook, `SheetJSVueAoO.xlsx`, {
        bookType: 'xlsx',
    })
}
</script>

<template>
    <div>
        <button @click="exportFile">創(chuàng)建工作表</button>
    </div>
</template>

sheetjs 樣式,sheetjs,xlsx-js-style,純前端導(dǎo)出excel,vue 前端導(dǎo)出excel,前端自定義單元格樣式

三、設(shè)置單元格寬度/高度/隱藏單元格

!cols 設(shè)置列寬
cols 為一個(gè)對(duì)象數(shù)組，依次表示每一列的寬度
wpx 字段表示以像素為單位，wch 字段表示以字符為單位
hidden 如果為真，則隱藏該列
!rows 設(shè)置行高
rows 為一個(gè)對(duì)象數(shù)組，依次表示每一行的高度

<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 = () => {
    // 創(chuàng)建一個(gè)工作簿 workbook
    const workBook = utils.book_new()
    // 創(chuàng)建工作表 worksheet
    const workSheet = utils.json_to_sheet(list)

    // 設(shè)置列寬
    // cols 為一個(gè)對(duì)象數(shù)組，依次表示每一列的寬度
    // wpx 字段表示以像素為單位，wch 字段表示以字符為單位
    // hidden 如果為真，則隱藏該列
    workSheet['!cols'] = [
        { wpx: 100 },
        { wch: 50 },
        { width: 30 },
        { hidden: true },
    ]

    // 設(shè)置行高
    // rows 為一個(gè)對(duì)象數(shù)組，依次表示每一行的高度
    workSheet['!rows'] = [{ hpx: 30 }, { hpt: 50 }, { hidden: true }]

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

<template>
    <div>
        <button @click="exportFile">設(shè)置單元格寬度/高度/隱藏</button>
    </div>
</template>

sheetjs 樣式,sheetjs,xlsx-js-style,純前端導(dǎo)出excel,vue 前端導(dǎo)出excel,前端自定義單元格樣式

四、分配數(shù)字格式

<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 = () => {
    // 創(chuàng)建一個(gè)工作簿 workbook
    const workBook = utils.book_new()
    // 創(chuàng)建工作表 worksheet
    const workSheet = utils.json_to_sheet(list)

    // 分配數(shù)字格式
    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')
    // 生成數(shù)據(jù)保存
    writeFileXLSX(workBook, `SheetJSVueAoO.xlsx`, {
        bookType: 'xlsx',
    })
}
</script>

<template>
    <div>
        <button @click="exportFile">分配數(shù)字格式</button>
    </div>
</template>

五、超鏈接

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

const list = [
    { Name: 'https://sheetjs.com' },
    { Name: '電子郵箱' },
    { Name: '訪問(wèn) C 盤文件' },
    { Name: '選中指定單元格' },
    { Name: '跳轉(zhuǎn)指定 Sheet' },
    { Name: 'Joseph Biden' },
]

const exportFile = () => {
    // 創(chuàng)建一個(gè)工作簿 workbook
    const workBook = utils.book_new()
    // 創(chuàng)建工作表 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' }

    // 訪問(wèn)本地 C 盤文件
    workSheet['A4'].l = { Target: 'file:///C:/Users/pc/Downloads/receipts.xls' }

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

    // 跳轉(zhuǎn)指定 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')

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

    // 定義的名稱, ref 選中的是當(dāng)前超鏈接所在單元格位置
    workBook.Workbook = {
        Names: [{ Name: 'SheetJSDN', Ref: 'Data2!A1:A1' }],
    }

    // 生成數(shù)據(jù)保存
    writeFileXLSX(workBook, `SheetJSVueAoO.xlsx`, {
        bookType: 'xlsx',
    })
}
</script>

<template>
    <div>
        <button @click="exportFile">超鏈接</button>
    </div>
</template>

鼠標(biāo)移上去看到小手標(biāo)識(shí)及提示語(yǔ)，點(diǎn)擊即可看到對(duì)應(yīng)的超鏈接效果；

六、單元格注釋

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

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

const exportFile = () => {
    // 創(chuàng)建一個(gè)工作簿 workbook
    const workBook = utils.book_new()
    // 創(chuàng)建工作表 worksheet
    const workSheet = utils.json_to_sheet(list)

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

    if (!workSheet.A3.c) workSheet.A3.c = []
    // 如果設(shè)置為 true，則只有當(dāng)用戶將鼠標(biāo)懸停在注釋上時(shí)，注釋才可見；
    workSheet.A3.c.hidden = true
    workSheet.A3.c.push({
        a: 'React',
        t: 'React 用于構(gòu)建 Web 和原生交互界面的庫(kù)',
    })

    if (!workSheet.A4.c) workSheet.A4.c = []
    // 如果設(shè)置為 true，則只有當(dāng)用戶將鼠標(biāo)懸停在注釋上時(shí)，注釋才可見；
    workSheet.A4.c.hidden = true
    workSheet.A4.c.push({
        a: 'Angular',
        t: 'Angular 是一個(gè)應(yīng)用設(shè)計(jì)框架與開發(fā)平臺(tái)，旨在創(chuàng)建高效而精致的單頁(yè)面應(yīng)用',
    })

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

    // 生成數(shù)據(jù)保存
    writeFileXLSX(workBook, `SheetJSVueAoO.xlsx`, {
        bookType: 'xlsx',
    })
}
</script>

<template>
    <div>
        <button @click="exportFile">單元格注釋</button>
    </div>
</template>

sheetjs 樣式,sheetjs,xlsx-js-style,純前端導(dǎo)出excel,vue 前端導(dǎo)出excel,前端自定義單元格樣式

七、公式

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

const list = [
    ['姓名', '語(yǔ)文', '數(shù)學(xué)', '英語(yǔ)', '總數(shù)', '最大值', '姓名去重'],
    ['張三', 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 函數(shù)
        [{ t: 'n', v: 3, f: 'CONCAT("concat：",A1,A2)' }], // CONCAT 函數(shù)
    ])
    var wb = utils.book_new()
    utils.book_append_sheet(wb, ws, 'Sheet1')
    writeFile(wb, 'SheetJSFormula.xlsx')
}

const exportFile = () => {
    // 創(chuàng)建一個(gè)工作簿 workbook
    const workBook = utils.book_new()
    // 創(chuàng)建工作表 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')

    // 生成數(shù)據(jù)保存
    writeFileXLSX(workBook, `SheetJSVueAoO.xlsx`, {
        bookType: 'xlsx',
    })
}
</script>

<template>
    <div>
        <button @click="exportSimpleFormula">簡(jiǎn)單公式</button>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button @click="exportFile">數(shù)組公式</button>
    </div>
</template>

給單元格增加公式，比如下面：求指定單元格中的最大值(MAX函數(shù))；
在 “結(jié)果” 雙擊即可看到對(duì)應(yīng)的公式，按 " ESC" 即可退出；

八、合并單元格

!merges 設(shè)置單元格合并
merges 為一個(gè)對(duì)象數(shù)組，每個(gè)對(duì)象設(shè)定了單元格合并的規(guī)則
方法一：通過(guò) decode_range 設(shè)置范圍合并單元格
方法二：手動(dòng)設(shè)置 A1-C1 的單元格合并（s:開始位置, e:結(jié)束位置, r:行, c:列）

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

const exportFile = () => {
    var ws = utils.aoa_to_sheet([
        // 特別注意合并的地方后面預(yù)留 2 個(gè) null， 否則后面的內(nèi)容（本例中是第四列其它信息）會(huì)被覆蓋
        ['主要信息', null, null, '其它信息'],
        ['姓名', '性別', '年齡', '注冊(cè)時(shí)間'],
        ['張三', '男', 18, new Date()],
        ['李四', '女', 22, new Date()],
    ])
    if (!ws['!merges']) ws['!merges'] = []

    // 方法一：通過(guò) decode_range 設(shè)置范圍合并單元格
    ws['!merges'].push(utils.decode_range('A1:C1'))

    // 方法二：手動(dòng)設(shè)置 A1-C1 的單元格合并
    // merges 為一個(gè)對(duì)象數(shù)組，每個(gè)對(duì)象設(shè)定了單元格合并的規(guī)則
    // s:開始位置, e:結(jié)束位置, 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,純前端導(dǎo)出excel,vue 前端導(dǎo)出excel,前端自定義單元格樣式

九、自定義單元格樣式

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

const header = [
    [[]], // 占位
    [
        {}, // 占位
        {
            v: `工廠統(tǒng)計(jì)表 ${'\n'}`,
            t: 's',
            s: {
                font: {
                    sz: 15, //設(shè)置標(biāo)題的字號(hào)
                    bold: true, //設(shè)置標(biāo)題是否加粗
                    name: '宋體',
                },
                //設(shè)置標(biāo)題水平豎直方向居中，并自動(dòng)換行展示
                alignment: {
                    horizontal: 'center',
                    vertical: 'center',
                    wrapText: true,
                },
                fill: {
                    fgColor: { rgb: '9FE3FF' },
                },
            },
        },
    ],
]

const info = [
    [
        null,
        {
            v: '                                                                                                                                                                                                                                                                                                                                                                                                    統(tǒng)計(jì)時(shí)間：2023/01/01 00:00',
            t: 's',
            s: {
                fill: {
                    fgColor: { rgb: '9FE3FF' },
                },
            },
        },
    ],
    [
        null,
        {
            v: '                                                                                                                                                                                                                                                                                                                                                                                                    統(tǒng)計(jì)維度：按月',
            t: 's',
            s: {
                fill: {
                    fgColor: { rgb: '9FE3FF' },
                },
            },
        },
    ],
    [
        null,
        {
            v: '                                                                                                                                                                                                                                                                                                                                                                                                    統(tǒng)計(jì)周期：2023/01/01 至 2023/01/01',
            t: 's',
            s: {
                alignment: {
                    vertical: 'top',
                },
                fill: {
                    fgColor: { rgb: '9FE3FF' },
                },
            },
        },
    ],
]

const risk = [
    '序號(hào)',
    '險(xiǎn)別',
    '企財(cái)險(xiǎn)',
    '家財(cái)險(xiǎn)',
    '機(jī)動(dòng)車',
    '責(zé)任險(xiǎn)',
    '意外險(xiǎn)',
    '貨運(yùn)險(xiǎn)',
    '保證險(xiǎn)',
    '其他險(xiǎn)',
]

const data = risk.map((e) => {
    return {
        v: e,
        t: 's',
        s: {
            font: {
                bold: true, //設(shè)置標(biāo)題是否加粗
                name: '宋體',
            },
            //設(shè)置標(biāo)題水平豎直方向居中，并自動(dòng)換行展示
            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'))

    // 設(shè)置列寬
    // cols 為一個(gè)對(duì)象數(shù)組，依次表示每一列的寬度
    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 },
    ]

    // 設(shè)置行高
    // rows 為一個(gè)對(duì)象數(shù)組，依次表示每一行的高度
    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,純前端導(dǎo)出excel,vue 前端導(dǎo)出excel,前端自定義單元格樣式

十、項(xiàng)目地址

項(xiàng)目地址：https://github.com/aibujin/xlsx-js-style文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-742169.html

到了這里，關(guān)于sheetJs / xlsx-js-style 純前端實(shí)現(xiàn)導(dǎo)出 excel 表格及自定義單元格樣式的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

Toy模板網(wǎng)

sheetJs / xlsx-js-style 純前端實(shí)現(xiàn)導(dǎo)出 excel 表格及自定義單元格樣式

一、安裝

二、創(chuàng)建基礎(chǔ)工作表

三、設(shè)置單元格寬度/高度/隱藏單元格

四、分配數(shù)字格式

五、超鏈接

六、單元格注釋

七、公式

八、合并單元格

九、自定義單元格樣式

十、項(xiàng)目地址

覺(jué)得文章有用就打賞一下文章作者

支付寶掃一掃打賞

微信掃一掃打賞

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)

二維碼1

二維碼2

sheetJs / xlsx-js-style 純前端實(shí)現(xiàn)導(dǎo)出 excel 表格及自定義單元格樣式

一、安裝

二、創(chuàng)建基礎(chǔ)工作表

三、設(shè)置單元格寬度/高度/隱藏單元格

四、分配數(shù)字格式

五、超鏈接

六、單元格注釋

七、公式

八、合并單元格

九、自定義單元格樣式

十、項(xiàng)目地址

相關(guān)文章

覺(jué)得文章有用就打賞一下文章作者

支付寶掃一掃打賞

微信掃一掃打賞

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)

二維碼1

二維碼2

二、創(chuàng)建基礎(chǔ)工作表

三、設(shè)置單元格寬度/高度/隱藏單元格

四、分配數(shù)字格式

五、超鏈接

六、單元格注釋

七、公式

八、合并單元格

九、自定義單元格樣式

十、項(xiàng)目地址

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)