0
0

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

文章目录

一、安装

npminstall 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},]constexportFile=()=>{// 创建一个工作簿 workbookconst workBook = utils.book_new()// 创建工作表 worksheet// json_to_sheet     是将【由对象组成的数组】转化成sheet// aoa_to_sheet      是将【一个二维数组】转化成 sheet// table_to_sheet      是将【table的dom】直接转成sheet// 这里我们使用 json_to_sheetconst 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 / xlsx-js-style 纯前端实现导出 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',},]constexportFile=()=>{// 创建一个工作簿 workbookconst workBook = utils.book_new()// 创建工作表 worksheetconst 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 / xlsx-js-style 设置单元格宽度/高度/隐藏单元格

四、分配数字格式

<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:newDate()},{ Name:'Joseph Biden', Taxes:666666},]constexportFile=()=>{// 创建一个工作簿 workbookconst workBook = utils.book_new()// 创建工作表 worksheetconst 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>

sheetJs / xlsx-js-style 单元格分配数字格式

五、超链接

<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'},]constexportFile=()=>{// 创建一个工作簿 workbookconst workBook = utils.book_new()// 创建工作表 worksheetconst 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:[email protected]'}// 访问本地 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 worksheetvar 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 / xlsx-js-style 单元格添加超链接

六、单元格注释

<script lang="ts" setup>import{ utils, writeFileXLSX }from'xlsx-js-style'const list =[{ Name:'Vue'},{ Name:'React'},{ Name:'Angular'}]constexportFile=()=>{// 创建一个工作簿 workbookconst workBook = utils.book_new()// 创建工作表 worksheetconst 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 / xlsx-js-style 单元格注释

七、公式

<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],]constexportSimpleFormula=()=>{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')}constexportFile=()=>{// 创建一个工作簿 workbookconst workBook = utils.book_new()// 创建工作表 worksheetconst 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 / xlsx-js-style 单元格添加公式

八、合并单元格

  • !merges 设置单元格合并
  • merges 为一个对象数组，每个对象设定了单元格合并的规则
  • 方法一：通过 decode_range 设置范围合并单元格
  • 方法二：手动设置 A1-C1 的单元格合并（s:开始位置, e:结束位置, r:行, c:列）
<script lang="ts" setup>import{ utils, writeFile }from'xlsx-js-style'constexportFile=()=>{var ws = utils.aoa_to_sheet([// 特别注意合并的地方后面预留 2 个 null， 否则后面的内容（本例中是第四列其它信息）会被覆盖['主要信息',null,null,'其它信息'],['姓名','性别','年龄','注册时间'],['张三','男',18,newDate()],['李四','女',22,newDate()],])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 / xlsx-js-style 合并单元格

九、自定义单元格样式

<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
}constdataArr=()=>{const items:(Object |null)[][]=[]Array.apply(null,{ length:18}asany).map((e, index:number)=>{const item:(Object |null)[]=[null]Array.apply(null,{ length:10}asany).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
}constexportFile=()=>{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 }asany).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 / xlsx-js-style 纯前端实现导出 excel 表格及自定义单元格样式

十、项目地址

项目地址：https://github.com/aibujin/xlsx-js-style

标签： sheetjs xlsx-js-style 纯前端导出excel
本文转载自: https://blog.csdn.net/aibujin/article/details/131633256
版权归原作者 aibujin 所有， 如有侵权，请联系我们删除。
登录后发布评论

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

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航