• js xlsx自定义样式导出

    使用的技术：
    xlsx 用于解析和编写各种电子表格。比如excel、csv、html文件
    xlsx-style 为xlsx库添加样式，比如字体颜色，大小，行宽等。但是只支持xlsx、xlsm、xlsb格式
    FileSaver.js 负责下载保存文件。对各种兼容性比较好，对跨域文件也有处理
    lodash js常用工具库


    需要注意的地方
    一、引入xlsx-style报错

    1. This relative module was not found:
    2. ./cptable in ./node_modules/xlsx-style@0.8.13@xlsx-style/dist/cpexcel.js

    亲测两种解决方案：

    1. 在\node_modules\xlsx-style\dist\cpexcel.js 807行 的
    2.  var cpt = require(’./cpt’ + ‘able’);把这一行改成 var cpt = cptable;

    把xlsx的cpexcel.js文件复制到xlsx-style的dist文件夹，覆盖cpexcel.js。


    二、颜色添加不上

    xlsx-style 只 支持16进制的ARGB颜色，比如：{ rgb: "FFFFAA00" }。注意这里是没有#号的。
    添加背景色是使用fill的fgColor，而不是bgColor。这里需要驼峰编写。
    实现步骤
    1、需求描述

    将列表数据导出成Excel。所有的导出表格都固定表头样式，但是内容不固定，特殊列需要高亮（添加背景色），其他的数据列按需求设置宽度，可以添加换行等。（比如身份证号固定字符长度，地址列固定宽度、自动换行）

    2、实现导出核心代码

    使用xlsx的json_to_sheet工具方法，把数组的数据格式转换成xlsx需要worksheet。然后再添加xlsx-style支持的样式代码，使用xlsx-style编写成数据流，最后再使用FileSaver.js把数据流保存成文件

    创建工作簿

    let wb = XLSX.utils.book_new()

    创建显示表头

    1. const ws = XLSX.utils.json_to_sheet([
    2.   colNames
    3. ], { header: keys, skipHeader: true })

    追加数据到excel中，从第二行开始

    1.   XLSX.utils.sheet_add_json(ws, data, { header: keys, skipHeader: true, 
    2. origin: 'A2' })

    添加表头样式，设置背景色、字体大小、下边框线

    1. for (const key in ws) {
    2.   // 第一行
    3.   if(key.replace(/[^0-9]/ig, '') === '1') {
    4.     ws[key].s = {
    5.       fill: {
    6.         fgColor: { rgb: 'FFA3F4B1' } // 添加背景色
    7.       },
    8.       font: {
    9.         name: '宋体', // 字体
    10.         sz: 12, // 字体大小
    11.         bold: true // 加粗
    12.       },
    13.       border: {
    14.           // 下划线
    15.         bottom: {
    16.           style: 'thin',
    17.           color: 'FF000000'
    18.         }
    19.       }
    20.     }
    21.   }
    22. }


    生成xlsx导出类。这里必须使用xlsx-style才能生成指定样式

    1. wbOut = XLSXStyle.write(wb, { bookType: bookType, bookSST: false, 
    2. type: 'binary' })

    生成并下载文件

    saveAs(new Blob([s2ab(wbOut)], { type: '' }), filename)

    完整的代码

    1. import XLSX from 'xlsx'
    2. import XLSXStyle from 'xlsx-style'
    3. import { saveAs } from 'file-saver'
    4. import path from 'path'
    5. import _ from 'lodash'
    6.  
    7. const FILE_NAME = '云途教育表格.xlsx'
    8. const COL_PARAMS = ['hidden', 'wpx', 'width', 'wch', 'MDW']
    9. const STYLE_PARAMS = ['fill', 'font', 'alignment', 'border']
    10.  
    11. /**
    12.  * 数字转换成excel表头。 （递归处理）
    13.  * @param {Number} num 需要转换的数字
    14.  */
    15. // eslint-disable-next-line no-unused-vars
    16. function numToString(num) {
    17.   let strArray = []
    18.   let numToStringAction = function(o) {
    19.     let temp = o - 1
    20.     let a = parseInt(temp / 26)
    21.     let b = temp % 26
    22.     strArray.push(String.fromCharCode(64 + parseInt(b + 1)))
    23.     if (a > 0) {
    24.       numToStringAction(a)
    25.     }
    26.   }
    27.   numToStringAction(num)
    28.   return strArray.reverse().join('')
    29. }
    30.  
    31. /**
    32.  * 表头字母转换成数字。（进制转换）
    33.  * @param {string} str 需要装换的字母
    34.  */
    35. function stringToNum(str) {
    36.   let temp = str.toLowerCase().split('')
    37.   let len = temp.length
    38.   let getCharNumber = function(charx) {
    39.     return charx.charCodeAt() - 96
    40.   }
    41.   let numout = 0
    42.   let charnum = 0
    43.   for (let i = 0; i < len; i++) {
    44.     charnum = getCharNumber(temp[i])
    45.     numout += charnum * Math.pow(26, len - i - 1)
    46.   }
    47.   return numout
    48. }
    49.  
    50. /**
    51.  * worksheet转成ArrayBuffer
    52.  * @param {worksheet} s xlsx库中的worksheet
    53.  */
    54. function s2ab(s) {
    55.   if (typeof ArrayBuffer !== 'undefined') {
    56.     const buf = new ArrayBuffer(s.length)
    57.     const view = new Uint8Array(buf)
    58.     for (let i = 0; i !== s.length; ++i) {
    59.       view[i] = s.charCodeAt(i) & 0xFF
    60.     }
    61.     return buf
    62.   } else {
    63.     const buf = new Array(s.length)
    64.     for (let i = 0; i !== s.length; ++i) {
    65.       buf[i] = s.charCodeAt(i) & 0xFF
    66.     }
    67.     return buf
    68.   }
    69. }
    70.  
    71. /**


     * 导出成Excel

    1.  * @param {Array} data 数据
    2.  * @param {Object} columns 每列参数说明。可直接写对应的中文名称，也可以写这一列的样式

    。比如列宽，背景色

    1.  * @param {String} filename 文件名。可根据文件名后缀动态判断文件格式。
    2. 支持xlsx, xlsm, xlsb（这三个支持自定义样式）, html, csv等
    3.  * @param {Object} styleConf 其他xlsx-style的参数
    1.  *
    2.  * columns数据格式：{
    3.  *         name: '姓名',
    4.  *         sex: '性别',
    5.  *         birthday: {
    6.  *           name: '出生日期',
    7.  *           wch: 14
    8.  *         },
    9.  *         address: {
    10.  *           name: '地址',
    11.  *           wpx: 160,
    12.  *           alignment: { wrapText: true }
    13.  *         }
    14.  *       }
    15.  *
    16.  * styleConf数据格式: {
    17.  *          'E4': {
    18.  *             font: {
    19.  *               bold: true,
    20.  *               color: { rgb 'FFFF0000' }
    21.  *             }
    22.  *          },
    23.  *          '!merges': [ // 合并第一行
    24.  *             {
    25.  *               s: { c: 0, r: 0 },
    26.  *               e: { c: 7, r: 0 }
    27.  *             }
    28.  *          ]
    29.  *        }
    30.  */
    1. export function exportExcel(data, columns, filename = FILE_NAME, styleConf) {
    2.   let keys = _.keys(columns)
    3.   let colNames = _.mapValues(columns, o => {
    4.     if (_.isPlainObject(o)) {
    5.       return o.name
    6.     } else {
    7.       return o
    8.     }
    9.   })

      // 创建工作簿

      let wb = XLSX.utils.book_new()

      // 显示表头

    1.   const ws = XLSX.utils.json_to_sheet([
    2.     colNames
    3.   ], { header: keys, skipHeader: true })


      // 过滤数据，只显示表头包含的数据

    1.   for (let i = 0; i < data.length; i++) {
    2.     data[i] = _.pick(data[i], keys)
    3.   }


      // 追加数据到excel中，从第二行开始

    1.   XLSX.utils.sheet_add_json(ws, data, { header: keys, skipHeader: true, origin: 'A2' })
    2.  
    3.   wb.SheetNames.push('sheet1')
    4.   wb.Sheets['sheet1'] = ws

      // 根据不同的扩展名，导出不同格式的文件

    1.   let bookType = null
    2.   let ext = path.extname(filename)
    3.   if (ext == null) {
    4.     filename += '.xlsx'
    5.     bookType = 'xlsx'
    6.   } else {
    7.     bookType = ext.substr(1).toLowerCase()
    8.   }
    9.  
    10.   let wbOut


      // 如果是支持样式的格式

    1.   if (['xlsx', 'xlsm', 'xlsb'].includes(bookType)) {
    2.     // ws['!merges'] = [{// 合并第一行数据[B1,C1,D1,E1]
    3.     //   s: {// s为开始
    4.     //     c: 0, // 开始列
    5.     //     r: 0// 开始取值范围
    6.     //   },
    7.     //   e: {// e结束
    8.     //     c: 7, // 结束列
    9.     //     r: 0// 结束范围
    10.     //   }
    11.     // }]
    12.  
    13.     for (const key in ws) {
    14.       // 第一行，表头
    15.       if (key.replace(/[^0-9]/ig, '') === '1') {
    16.         ws[key].s = {
    17.           fill: {
    18.             fgColor: { rgb: 'FFA3F4B1' }
    19.           },
    20.           font: {
    21.             name: '宋体',
    22.             sz: 12,
    23.             bold: true
    24.           },
    25.           border: {
    26.             bottom: {
    27.               style: 'thin',
    28.               color: 'FF000000'
    29.             }
    30.           }
    31.         }
    32.       } else {
    33.         let str = key.replace(/[^A-Za-z]+$/ig, '')
    34.         let colIndex = stringToNum(str) - 1
    35.         if (keys[colIndex] && _.isPlainObject(columns[keys[colIndex]])) {
    36.           const a = _.pick(columns[keys[colIndex]], STYLE_PARAMS)
    37.           ws[key].s = _.assign(ws[key].s, a)
    38.         }
    39.       }
    40.     }
    41.     // 设置列宽
    42.     const colsP = []
    43.     _.mapValues(columns, o => {
    44.       colsP.push(_.pick(o, COL_PARAMS))
    45.     })
    46.     ws['!cols'] = colsP
    47.  
    48.     // 合并其他样式参数
    49.     if (styleConf) {
    50.       for (const key in styleConf) {
    51.         if (ws.hasOwnProperty(key)) {
    52.           ws[key].s = styleConf[key]
    53.         }
    54.       }
    55.     }
    56.     wbOut = XLSXStyle.write(wb, { bookType: bookType, bookSST: false, type: 'binary' })
    57.   } else {
    58.     wbOut = XLSX.write(wb, { bookType: bookType, bookSST: false, type: 'binary' })
    59.   }
    60.  
    61.   saveAs(new Blob([s2ab(wbOut)], { type: '' }), filename)
    62. }


    调用实例

    1. import { exportExcel } from '../../utils/xlsxUtils.js'
    2.  
    3. async exportStudent() {
    4.       const params = {
    5.         pageNum: this.pageNum,
    6.         pageSize: this.pageSize
    7.       }
    8.       params[this.queryForm.searchType] = this.queryForm.searchInput
    9.       this.exportLoading = true
    10.       try {
    11.         const res = await this.$http.get('/v1/ExportOrImport/exportStudentInfo', params)
    12.         res.data.forEach(item => {
    13.           item.courseStr = item.courses.map(o => o.name).join('，')
    14.           item.classStr = item.classes.map(o => o.name).join('，')
    15.         })
    16.         await exportExcel(res.data, {
    17.           name: '姓名',
    18.           sex: '性别',
    19.           idCard: {
    20.             name: '身份证号',
    21.             wch: 18
    22.           },
    23.           birthday: {
    24.             name: '出生日期',
    25.             wch: 14
    26.           },
    27.           primaryContactPhone: {
    28.             name: '联系人号码',
    29.             wch: 11
    30.           },
    31.           primaryContactName: '联系人姓名',
    32.           relation: '联系人关系',
    33.           nickName: '昵称',
    34.           school: '就读学校',
    35.           grade: '年级',
    36.           address: {
    37.             name: '地址',
    38.             wpx: 160,
    39.             alignment: { wrapText: true }
    40.           },
    41.           remark: {
    42.             name: '备注',
    43.             wpx: 240,
    44.             alignment: { wrapText: true }
    45.           },
    46.           courseStr: {
    47.             name: '报读课程',
    48.             wpx: 120,
    49.             font: { color: { rgb: 'ffff0000' } },
    50.             alignment: { wrapText: true }
    51.           },
    52.           classStr: {
    53.             name: '班级',
    54.             wpx: 120,
    55.             font: { color: { rgb: 'ffff0000' } },
    56.             alignment: { wrapText: true }
    57.           }
    58.         }, '学员信息表.xlsx', {
    59.           'E4': {
    60.             fill: { fgColor: { rgb: 'FFFF0000' } }
    61.           }
    62.         })
    63.       } catch (error) {
    64.  
    65.       }
    66.       this.exportLoading = false
    67.     }



    最后导出的样式：

     

  • 相关阅读:
    php jquery ajax 无法传递POST值的问题
    数字IC设计笔试常见大题整理（简答+手撕）
    【王道】操作系统OS第五章I/O管理(五)
    2022年湖北省科技计划项目“包干制”管理申报条件以及流程
    【NestJS系列】核心概念：Providers提供者
    Nginx 配置 SSL（HTTPS）详解
    golang适合做什么
    本地搭建Stackedit Markdown编辑器结合内网穿透实现远程访问
    带你深入浅出Vue
    【牛客网刷题系列 之 Verilog快速入门】~ 使用函数实现数据大小端转换
  • 原文地址：https://blog.csdn.net/weixin_51225684/article/details/127654860