前端js使用xlsx-js-style導(dǎo)出Excel文件并修飾單元格樣式

更新時(shí)間：2023年08月29日 09:52:12 作者：swimxu

這篇文章主要給大家介紹了關(guān)于前端js使用xlsx-js-style導(dǎo)出Excel文件并修飾單元格樣式的相關(guān)資料,前端開發(fā)過程中經(jīng)常遇到導(dǎo)出excel的需求,需要的朋友可以參考下

安裝
引入
需要導(dǎo)出的數(shù)據(jù)源
將數(shù)據(jù)源轉(zhuǎn)成需要的二維數(shù)組
定義 Excel 表頭
將定義好的表頭添加到 body 中
將二維數(shù)組轉(zhuǎn)成 sheet
!merges 設(shè)置單元格合并
!cols 設(shè)置列寬
!rows 設(shè)置行高
創(chuàng)建虛擬的 workbook
向 workbook 中添加 sheet
導(dǎo)出 workbook
完整示例
效果圖
總結(jié)

安裝

導(dǎo)出 excel 較常見的 js 庫是之一是 xlsx，xlsx 算是基礎(chǔ)版本，不能對(duì)單元格進(jìn)行樣式（對(duì)齊方式、文字顏色、背景顏色等）的修飾，如果需要修飾單元格，可使用 xlsx-js-style

npm install xlsx-js-style

引入

import XLSXS from 'xlsx-js-style';

需要導(dǎo)出的數(shù)據(jù)源

// 一般我們拿到的是從接口中請(qǐng)求到的對(duì)象數(shù)組，在使用是需要轉(zhuǎn)成二維數(shù)組，下面有介紹
const data = [
  { name: '商品01', mb_num: 50, mb_sum: 5000, pc_num: 30, pc_sum: 3000, total_num: 80, total_sum: 8000 },
  { name: '商品02', mb_num: 50, mb_sum: 5000, pc_num: 30, pc_sum: 3000, total_num: 80, total_sum: 8000 },
  { name: '商品03', mb_num: 50, mb_sum: 5000, pc_num: 30, pc_sum: 3000, total_num: 80, total_sum: 8000 },
]

將數(shù)據(jù)源轉(zhuǎn)成需要的二維數(shù)組

const body = data.map(x => ([x.name, x.mb_num, x.mb_sum, x.pc_num, x.pc_sum, x.total_num, x.total_sum]))
// 轉(zhuǎn)換后的數(shù)據(jù)為一個(gè)二維數(shù)組
[
  ['商品01', 50, 5000, 30, 3000, 80, 8000]
  ['商品02', 50, 5000, 30, 3000, 80, 8000]
  ['商品03', 50, 5000, 30, 3000, 80, 8000]
]

定義 Excel 表頭

/*
    定義表頭，每一行即是一個(gè)數(shù)組，數(shù)組中的元素即是一個(gè)個(gè)單元格內(nèi)容。
    如果單元格不需要樣式，那么每個(gè)元素類型為字符串即可。如：['一月（2022年01月）'], 
    如果單元格需要樣式，那么數(shù)組中的元素就需要為一個(gè)個(gè)對(duì)象，在此對(duì)象中定義單元格的樣式等等。
*/
    const header = [
      // 第一行，需要樣式，則數(shù)組中元素為對(duì)象，進(jìn)行定義樣式。
      [
        {
          v: '一月（2023年01月）',
          t: 's',
          s: {
            // font 字體屬性
            font: {
              bold: true,
              sz: 14,
              name: '宋體',
            },
            // alignment 對(duì)齊方式
            alignment: {
              vertical: 'center', // 垂直居中
              horizontal: 'center', // 水平居中
            },
            // border 邊框?qū)傩?
            border: {
              top: { style: 'thin' },
              bottom: { style: 'thin' },
              left: { style: 'thin' },
              right: { style: 'thin' }
            },
            // fill 顏色填充屬性
            fill: {
              fgColor: { rgb: '87CEEB' },
            },
          },
        },
      ],
      ['商品名稱', '手機(jī)客戶端', '', '電腦客戶端', '', '總計(jì)', ''],
      ['', '銷售數(shù)量', '銷售金額', '銷售數(shù)量', '銷售金額', '銷售數(shù)量', '銷售金額']
    ]

將定義好的表頭添加到 body 中

body.unshift(...header);

將二維數(shù)組轉(zhuǎn)成 sheet

// 這里我們舉例是用 aoa_to_sheet ，所以是需要將數(shù)據(jù)源轉(zhuǎn)成一個(gè)二維數(shù)組
const sheet = XLSXS.utils.aoa_to_sheet(body);
// aoa_to_sheet  	是將【一個(gè)二維數(shù)組】轉(zhuǎn)化成 sheet
// json_to_sheet 	是將【由對(duì)象組成的數(shù)組】轉(zhuǎn)化成sheet
// table_to_sheet  	是將【table的dom】直接轉(zhuǎn)成sheet

!merges 設(shè)置單元格合并

如果需要設(shè)置單元格合并，則定義好merges ，添加到 sheet 中。

merges 為一個(gè)對(duì)象數(shù)組，每個(gè)對(duì)象設(shè)定了單元格合并的規(guī)則。

{ s: { r: 0, c: 0 }, e: { r: 0, c: 2 } }, 即為一個(gè)規(guī)則，s:開始位置, e:結(jié)束位置, r:行, c:列

const merges = [
  { s: { r: 0, c: 0 }, e: { r: 0, c: 6 } },
  { s: { r: 1, c: 1 }, e: { r: 1, c: 2 } },
  { s: { r: 1, c: 3 }, e: { r: 1, c: 4 } },
  { s: { r: 1, c: 5 }, e: { r: 1, c: 6 } },
  { s: { r: 1, c: 0 }, e: { r: 2, c: 0 } },
]
sheet['!merges'] = merges; // 添加到sheet中

!cols 設(shè)置列寬

cols 為一個(gè)對(duì)象數(shù)組，依次表示每一列的寬度。

const cols = [
    { wch: 10 },
    { wch: 10 }, 
    { wch: 10 },
    { wch: 10 },
    { wch: 10 },
    { wch: 10 }, 
    { wch: 10 }
];
sheet['!cols'] = cols; // 添加到sheet中

!rows 設(shè)置行高

rows 為一個(gè)對(duì)象數(shù)組，依次表示每一行的高度

const rows = [
    { hpx: 20 }, 
    { hpx: 16 },
    { hpx: 18 }
]
sheet['!rows'] = rows; // 添加到sheet中

創(chuàng)建虛擬的 workbook

Excel整個(gè)表格可稱為 workbook。里面的每張表分別是 sheet

const workbook = xlsx.utils.book_new();

向 workbook 中添加 sheet

XLSXS.utils.book_append_sheet(workbook, sheet, 'sheet名稱');
// 一個(gè) workbook 允許添加多個(gè) sheet，即可以同時(shí)創(chuàng)建多個(gè)表
// xlsx.utils.book_append_sheet(workbook, sheet2, 'sheet名稱2');

導(dǎo)出 workbook

// 注意：定義導(dǎo)出 excel 的名稱時(shí)需要加上后綴 .xlsx
xlsx.writeFile(workbook, 'excel名稱.xlsx');

完整示例

import XLSXS from 'xlsx-js-style';
......
// 需要導(dǎo)出的數(shù)據(jù)源
const data = [
  { name: '商品01', mb_num: 50, mb_sum: 5000, pc_num: 30, pc_sum: 3000, total_num: 80, total_sum: 8000 },
  { name: '商品02', mb_num: 50, mb_sum: 5000, pc_num: 30, pc_sum: 3000, total_num: 80, total_sum: 8000 },
  { name: '商品03', mb_num: 50, mb_sum: 5000, pc_num: 30, pc_sum: 3000, total_num: 80, total_sum: 8000 },
]
// 將數(shù)據(jù)源轉(zhuǎn)成我們需要的二維數(shù)組
const body = data.map(x => ([x.name, x.mb_num, x.mb_sum, x.pc_num, x.pc_sum, x.total_num, x.total_sum]))
/* 定義表頭
    定義表頭，每一行即是一個(gè)數(shù)組，數(shù)組中的元素即是一個(gè)個(gè)單元格內(nèi)容。
    如果單元格不需要樣式，那么每個(gè)元素類型為字符串即可。如：['一月（2022年01月）'], 
    如果單元格需要樣式，那么數(shù)組中的元素就需要為一個(gè)個(gè)對(duì)象，在此對(duì)象中定義單元格的樣式等等。
    這里只針對(duì)第一行進(jìn)行舉例：
*/
const header = [
  [
    {
      v: '一月（2023年01月）',
      t: 's',
      s: {
        // font 字體屬性
        font: {
          bold: true,
          sz: 14,
          name: '宋體',
        },
        // alignment 對(duì)齊方式
        alignment: {
          vertical: 'center', // 垂直居中
          horizontal: 'center', // 水平居中
        },
        // fill 顏色填充屬性
        fill: {
          fgColor: { rgb: '87CEEB' },
        },
      },
    },
  ],
  ['商品名稱', '手機(jī)客戶端', '', '電腦客戶端', '', '總計(jì)', ''],
  ['', '銷售數(shù)量', '銷售金額', '銷售數(shù)量', '銷售金額', '銷售數(shù)量', '銷售金額']
]
body.unshift(...header);// 將定義好的表頭添加到 body 中
const sheet = xlsx.utils.aoa_to_sheet(body);// aoa_to_sheet 將二維數(shù)組轉(zhuǎn)成 sheet
// 設(shè)置合并單元格
const merges = [
  { s: { r: 0, c: 0 }, e: { r: 0, c: 6 } },
  { s: { r: 1, c: 1 }, e: { r: 1, c: 2 } },
  { s: { r: 1, c: 3 }, e: { r: 1, c: 4 } },
  { s: { r: 1, c: 5 }, e: { r: 1, c: 6 } },
  { s: { r: 1, c: 0 }, e: { r: 2, c: 0 } },
]
sheet['!merges'] = merges; // 將merges添加到sheet中
// 設(shè)置列寬
const cols = [ { wch: 10 },{ wch: 10 },{ wch: 10 },{ wch: 10 },{ wch: 10 },{ wch: 10 },{ wch: 10 } ];
sheet['!cols'] = cols; // 將cols添加到sheet中
// 
const rows = [ { hpx: 20 },{ hpx: 16 },{ hpx: 18 }]
sheet['!rows'] = rows; // 將rows添加到sheet中，設(shè)置行高
const workbook = XLSXS.utils.book_new();// 創(chuàng)建虛擬的 workbook
XLSXS.utils.book_append_sheet(workbook, sheet, 'sheet名稱'); // 向 workbook 中添加 sheet
XLSXS.writeFile(workbook, 'excel名稱.xlsx'); // 導(dǎo)出 workbook
// 注意：定義導(dǎo)出 excel 的名稱時(shí)需要加上后綴 .xlsx

效果圖

總結(jié)

創(chuàng)建虛擬的 workbook、將數(shù)組轉(zhuǎn)成 sheet、向workbook中添加sheet和導(dǎo)出workbook，這四個(gè)步驟是必要的。
設(shè)置合并單元格、設(shè)置列寬、設(shè)置行高是可選的，根據(jù)需求進(jìn)行添加。
如果添加樣式需要 border 則需要在被合并的單元格位置進(jìn)行占位。

到此這篇關(guān)于前端js使用xlsx-js-style導(dǎo)出Excel文件并修飾單元格樣式的文章就介紹到這了,更多相關(guān)前端導(dǎo)出Excel并修飾單元格內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: