前端js使用xlsx-js-style導出Excel文件并修飾單元格樣式
更新時間：2023年08月29日 09:52:12 作者：swimxu
這篇文章主要給大家介紹了關于前端js使用xlsx-js-style導出Excel文件并修飾單元格樣式的相關資料,前端開發(fā)過程中經(jīng)常遇到導出excel的需求,需要的朋友可以參考下
安裝
導出 excel 較常見的 js 庫是之一是 xlsx，xlsx 算是基礎版本，不能對單元格進行樣式（對齊方式、文字顏色、背景顏色等）的修飾，如果需要修飾單元格，可使用 xlsx-js-style
npm install xlsx-js-style
引入
import XLSXS from 'xlsx-js-style';
需要導出的數(shù)據(jù)源
// 一般我們拿到的是從接口中請求到的對象數(shù)組，在使用是需要轉成二維數(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ù)源轉成需要的二維數(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])) // 轉換后的數(shù)據(jù)為一個二維數(shù)組 [ ['商品01', 50, 5000, 30, 3000, 80, 8000] ['商品02', 50, 5000, 30, 3000, 80, 8000] ['商品03', 50, 5000, 30, 3000, 80, 8000] ]
定義 Excel 表頭
/*
定義表頭，每一行即是一個數(shù)組，數(shù)組中的元素即是一個個單元格內(nèi)容。
如果單元格不需要樣式，那么每個元素類型為字符串即可。如：['一月（2022年01月）'],
如果單元格需要樣式，那么數(shù)組中的元素就需要為一個個對象，在此對象中定義單元格的樣式等等。
*/
const header = [
// 第一行，需要樣式，則數(shù)組中元素為對象，進行定義樣式。
[
{
v: '一月（2023年01月）',
t: 's',
s: {
// font 字體屬性
font: {
bold: true,
sz: 14,
name: '宋體',
},
// alignment 對齊方式
alignment: {
vertical: 'center', // 垂直居中
horizontal: 'center', // 水平居中
},
// border 邊框屬性
border: {
top: { style: 'thin' },
bottom: { style: 'thin' },
left: { style: 'thin' },
right: { style: 'thin' }
},
// fill 顏色填充屬性
fill: {
fgColor: { rgb: '87CEEB' },
},
},
},
],
['商品名稱', '手機客戶端', '', '電腦客戶端', '', '總計', ''],
['', '銷售數(shù)量', '銷售金額', '銷售數(shù)量', '銷售金額', '銷售數(shù)量', '銷售金額']
]將定義好的表頭添加到 body 中
body.unshift(...header);
將二維數(shù)組轉成 sheet
// 這里我們舉例是用 aoa_to_sheet ，所以是需要將數(shù)據(jù)源轉成一個二維數(shù)組 const sheet = XLSXS.utils.aoa_to_sheet(body); // aoa_to_sheet 是將【一個二維數(shù)組】轉化成 sheet // json_to_sheet 是將【由對象組成的數(shù)組】轉化成sheet // table_to_sheet 是將【table的dom】直接轉成sheet
!merges 設置單元格合并
如果需要設置單元格合并，則定義好merges ，添加到 sheet 中。
merges 為一個對象數(shù)組，每個對象設定了單元格合并的規(guī)則。
{ s: { r: 0, c: 0 }, e: { r: 0, c: 2 } }, 即為一個規(guī)則，s:開始位置, e:結束位置, 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 設置列寬
cols 為一個對象數(shù)組，依次表示每一列的寬度。
const cols = [
{ wch: 10 },
{ wch: 10 },
{ wch: 10 },
{ wch: 10 },
{ wch: 10 },
{ wch: 10 },
{ wch: 10 }
];
sheet['!cols'] = cols; // 添加到sheet中!rows 設置行高
rows 為一個對象數(shù)組，依次表示每一行的高度
const rows = [
{ hpx: 20 },
{ hpx: 16 },
{ hpx: 18 }
]
sheet['!rows'] = rows; // 添加到sheet中創(chuàng)建虛擬的 workbook
Excel整個表格可稱為 workbook。里面的每張表分別是 sheet
const workbook = xlsx.utils.book_new();
向 workbook 中添加 sheet
XLSXS.utils.book_append_sheet(workbook, sheet, 'sheet名稱'); // 一個 workbook 允許添加多個 sheet，即可以同時創(chuàng)建多個表 // xlsx.utils.book_append_sheet(workbook, sheet2, 'sheet名稱2');
導出 workbook
// 注意：定義導出 excel 的名稱時需要加上后綴 .xlsx xlsx.writeFile(workbook, 'excel名稱.xlsx');
完整示例
import XLSXS from 'xlsx-js-style';
......
// 需要導出的數(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ù)源轉成我們需要的二維數(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]))
/* 定義表頭
定義表頭，每一行即是一個數(shù)組，數(shù)組中的元素即是一個個單元格內(nèi)容。
如果單元格不需要樣式，那么每個元素類型為字符串即可。如：['一月（2022年01月）'],
如果單元格需要樣式，那么數(shù)組中的元素就需要為一個個對象，在此對象中定義單元格的樣式等等。
這里只針對第一行進行舉例：
*/
const header = [
[
{
v: '一月（2023年01月）',
t: 's',
s: {
// font 字體屬性
font: {
bold: true,
sz: 14,
name: '宋體',
},
// alignment 對齊方式
alignment: {
vertical: 'center', // 垂直居中
horizontal: 'center', // 水平居中
},
// fill 顏色填充屬性
fill: {
fgColor: { rgb: '87CEEB' },
},
},
},
],
['商品名稱', '手機客戶端', '', '電腦客戶端', '', '總計', ''],
['', '銷售數(shù)量', '銷售金額', '銷售數(shù)量', '銷售金額', '銷售數(shù)量', '銷售金額']
]
body.unshift(...header);// 將定義好的表頭添加到 body 中
const sheet = xlsx.utils.aoa_to_sheet(body);// aoa_to_sheet 將二維數(shù)組轉成 sheet
// 設置合并單元格
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中
// 設置列寬
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中，設置行高
const workbook = XLSXS.utils.book_new();// 創(chuàng)建虛擬的 workbook
XLSXS.utils.book_append_sheet(workbook, sheet, 'sheet名稱'); // 向 workbook 中添加 sheet
XLSXS.writeFile(workbook, 'excel名稱.xlsx'); // 導出 workbook
// 注意：定義導出 excel 的名稱時需要加上后綴 .xlsx效果圖
總結
創(chuàng)建虛擬的 workbook、將數(shù)組轉成 sheet、向workbook中添加sheet和導出workbook，這四個步驟是必要的。設置合并單元格、設置列寬、設置行高是可選的，根據(jù)需求進行添加。- 如果添加樣式需要
border則需要在被合并的單元格位置進行占位。
到此這篇關于前端js使用xlsx-js-style導出Excel文件并修飾單元格樣式的文章就介紹到這了,更多相關前端導出Excel并修飾單元格內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
一個網(wǎng)頁打印相關功能的擴展演示特效，在實現(xiàn)了打印功能外，還實現(xiàn)了打印預覽、打印前的頁眉頁腳設置，直接打印等功能，以前對JS打印前設置頁腳見的不多，所以這一個也算是挺有價值的，希望閑暇時參閱2013-05-05
這篇文章主要為大家詳細介紹了js實現(xiàn)隨機點名，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
詳解JavaScript中js對象與JSON格式字符串的相互轉換
本篇文章主要介紹了JavaScript中js對象與JSON格式字符串的相互轉換，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-02-02
本篇文章主要是對JS操作Array數(shù)組的方法及屬性進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
這篇文章主要給大家介紹了關于JS算法教程之字符串去重與字符串反轉的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
bootstrap 通過加減按鈕實現(xiàn)輸入框組功能
這篇文章主要介紹了bootstrap 輸入框組 通過加減按鈕來增加刪除內(nèi)嵌輸入框組,當我點擊 + 按鈕時，會添加一行輸入框組；當點擊 - 按鈕時，會刪除這一行輸入框組。具體實現(xiàn)代碼大家參考下本文2017-11-11
這篇文章主要為大家詳細介紹了JS實現(xiàn)前端分頁效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
關于JavaScript使用export和import的兩個報錯解決
說來慚愧es6寫了這么久,連最基本的export和import都沒搞明白,下面這篇文章主要給大家介紹了關于JavaScript使用export和import的兩個報錯的解決方法,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了JS實現(xiàn)中文漢字按拼音排序的方法,涉及javascript針對中文字符串的轉換、遍歷、排序等相關操作技巧,需要的朋友可以參考下2017-10-10
JavaScript如何將后端獲取到的byte數(shù)組轉為文件
這篇文章主要給大家介紹了關于JavaScript如何將后端獲取到的byte數(shù)組轉為文件的相關資料,文中通過代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-04-04