欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

前端使用xlsx導出數據生成Excel文件的全過程

 更新時間：2023年08月29日 09:52:38   作者：swimxu  
這篇文章主要給大家介紹了關于前端使用xlsx導出數據生成Excel文件的相關資料,最近在做項目中,后端偷懶不做導出功能,讓我前端實現,所以在這里記錄下前端導出功能,需要的朋友可以參考下

安裝 xlsx

xlsx 算是基礎版本，不能對單元格進行樣式（對齊方式、文字顏色、背景顏色等）的修飾，如果需要修飾單元格，可使用 xlsx-js-style

npm i xlsx

引入 xlsx

import xlsx from 'xlsx';

需要導出的數據源

// 一般我們拿到的是從接口中請求到的對象數組，在使用是需要轉成二維數組，下面有介紹
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 },
]

將數據源轉成需要的二維數組

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]))
// 轉換后的數據為一個二維數組
[
  ['商品01', 50, 5000, 30, 3000, 80, 8000]
  ['商品02', 50, 5000, 30, 3000, 80, 8000]
  ['商品03', 50, 5000, 30, 3000, 80, 8000]
]

定義 Excel 表頭

// 根據需要導出的目標 Excel格式，先定義好表頭
const header = [
  ['一月（2022年01月）'], 
  ['商品名稱', '手機客戶端', '', '電腦客戶端', '', '總計', ''], 
  ['', '銷售數量', '銷售金額', '銷售數量', '銷售金額', '銷售數量', '銷售金額']
]

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

body.unshift(...header);
//分別為每一行單元格內的值，需要合并的單元格給一個空值進行站位
[
  ['一月（2022年01月）','','','','','','']
  ['商品名稱', '手機客戶端', '', '電腦客戶端', '', '總計', '']
  ['', '銷售數量', '銷售金額', '銷售數量', '銷售金額', '銷售數量', '銷售金額']
  ['商品01', 50, 5000, 30, 3000, 80, 8000]
  ['商品02', 50, 5000, 30, 3000, 80, 8000]
  ['商品03', 50, 5000, 30, 3000, 80, 8000]
]

1 創(chuàng)建虛擬的 workbook

Excel整個表格可稱為 workbook里面的每張表分別是 sheet

const workbook = xlsx.utils.book_new();

2 將二維數組轉成 sheet

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

!merges 設置單元格合并

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中
// merges 為一個對象數組，每個對象設定了單元格合并的規(guī)則
// { s: { r: 0, c: 0 }, e: { r: 0, c: 2 } }, 即為一個規(guī)則，s:開始位置, e:結束位置, r:行, c:列

!cols 設置列寬

// cols 為一個對象數組，依次表示每一列的寬度
const cols = [
    { wch: 10 },
    { wch: 10 }, 
    { wch: 10 },
    { wch: 10 },
    { wch: 10 },
    { wch: 10 }, 
    { wch: 10 }
];
sheet['!cols'] = cols; // 添加到sheet中

!rows 設置行高

// rows 為一個對象數組，依次表示每一行的高度
const rows = [
    { hpx: 20 }, 
    { hpx: 16 },
    { hpx: 18 }
]
sheet['!rows'] = rows; // 添加到sheet中

3 向 workbook 中添加 sheet

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

4 導出 workbook

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

完整示例：

import xlsx from 'xlsx'; // 引入 xlsx
......
// 需要導出的數據源
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 },
]
// 將數據源轉成我們需要的二維數組
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]))
// 定義Excel表頭
const header = [
  ['一月（2022年01月）'],
  ['商品名稱', '手機客戶端', '', '電腦客戶端', '', '總計', ''],
  ['', '銷售數量', '銷售金額', '銷售數量', '銷售金額', '銷售數量', '銷售金額']
]
body.unshift(...header);// 將定義好的表頭添加到 body 中
const workbook = xlsx.utils.book_new();// 創(chuàng)建虛擬的 workbook
const sheet = xlsx.utils.aoa_to_sheet(body);// aoa_to_sheet 將二維數組轉成 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中，設置行高
xlsx.utils.book_append_sheet(workbook, sheet, 'sheet名稱'); // 向 workbook 中添加 sheet
xlsx.writeFile(workbook, 'excel名稱.xlsx'); // 導出 workbook
// 注意：定義導出 excel 的名稱時需要加上后綴 .xlsx

總結

其中，創(chuàng)建虛擬的 workbook、將數組轉成 sheet、向workbook中添加sheet和導出workbook，這四個步驟是必要的。
設置合并單元格、設置列寬、設置行高是可選的，根據需求進行添加。

到此這篇關于前端使用xlsx導出數據生成Excel文件的文章就介紹到這了,更多相關前端導出數據生成Excel內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論