• 在Vue.js中使用xlsx组件实现Excel导出

            在现代Web应用程序中，数据导出到Excel格式是一项常见的需求。Vue.js是一种流行的JavaScript框架，允许我们构建动态的前端应用程序。本文将介绍如何使用Vue.js和xlsx组件轻松实现Excel数据导出功能。

    1、项目设置

            首先，在控制台执行以下命令安装xlsx组件；

    1. npm install xlsx --save
    2.  
    3. 或
    4.  
    5. yarn add xlsx --save

            然后，在vue项目中引入xls组件；

    import XLSX from 'xlsx';

    2、准备数据

            要导出到Excel，您需要有数据。您可以使用本地数据或从API获取数据。在本示例中，我们将使用本地数据：

    1.  
    2. exportData: [
    3.   { name: "John", age: 30, city: "New York" },
    4.   { name: "Alice", age: 25, city: "Los Angeles" },
    5.   { name: "Bob", age: 35, city: "Chicago" }
    6. ]
    7.

    3、实现导出功能

            创建导出到Excel的方法。这个方法将触发Excel文件的生成和下载：

    1. exportToExcel() {
    2.     const worksheet = XLSX.utils.json_to_sheet(this.exportData);
    3.     const workbook = XLSX.utils.book_new();
    4.     XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
    5.     XLSX.writeFile(workbook, "exported-data.xlsx");
    6. }

            这个方法使用xlsx组件将数据转换为Excel工作表，然后创建一个工作簿并将工作表添加到工作簿中。最后，它使用XLSX.writeFile方法将工作簿保存为名为"exported-data.xlsx"的Excel文件。

    4、设置列宽自适应

            根据导出数据的长度，通过遍历计算每列的最大长度，然后通过worksheet['!cols']方法设置每列宽度；

    1. // 设置列宽
    2.   exportData.forEach((row, rowIndex) => {  
    3.     row.forEach((cell, cellIndex) => { 
    4.       const list = arrData.map(item => {
    5.         const val = item[cellIndex] as string;
    6.         if(isEmptyString(val)){
    7.           return 1;
    8.         } else if(val.toString().charCodeAt(0) > 255){ // 判断是否有中文
    9.           return val.toString().length * 2
    10.         } else{
    11.           return val.toString().length;
    12.         }
    13.       });
    14.       const maxLength = Math.max(...list);  
    15.       const width = maxLength * 1.1; // 根据实际内容长度自动调整列宽  
    16.       if(!worksheet["!cols"]) worksheet["!cols"] = [];
    17.       if(!worksheet["!cols"][cellIndex]) worksheet["!cols"][cellIndex] = {wch: 8};
    18.       worksheet['!cols'][cellIndex].wch = width; // 使用worksheet的 '!cols' 来设置列宽
    19.     });
    20.   });

    5、设置合并单元格

            通过worksheet["!merges"]方法可以设置合并单元格；

    1. // 合并单元格
    2.   merges.forEach((item) => {
    3.     if(!worksheet["!merges"]){
    4.       worksheet["!merges"] = [];
    5.     };
    6.     worksheet["!merges"].push(item);
    7.     // worksheet["!merges"].push({
    8.     //   s: { r: 2, c: 1 }, // s ("start"): c = 1 r = 2 -> "B3"
    9.     //   e: { r: 3, c: 4 }  // e ("end"):   c = 4 r = 3 -> "E4"
    10.     // });
    11.   });

    6、设置导出Excel表格的样式

            xlsx组件库是不支持设置Excel表格样式的，但是可以通过引入xlsx-style-vite组件库来实现样式的设置；然后通过file-saver导出文件；

    6.1 安装并引入xlsx-style-vite和file-saver组件
    1. yarn add xlsx-style-vite --save
    2.  
    3. yarn add file-saver --save
    1. import XLSXStyle from 'xlsx-style-vite';
    2. import XLSX_SAVE from 'file-saver';

    其中 xlsx-style-vite组件是xlsx-style组件的vite版本，用于解决在vite下引入xlsx-style异常的问题；

    6.2 设置单元格居中

           遍历所有单元格，然后通过worksheet[column].s方法设置每个单元格的样式；

    1. exportData.forEach((row, rowIndex) => {  
    2.     row.forEach((cell, cellIndex) => { 
    3.       // 设置所有单元格居中
    4.       let column = utils.encode_cell({c: cellIndex, r: rowIndex});      
    5.           worksheet[column].s = {
    6.             alignment: {
    7.               horizontal: 'center',
    8.               vertical: 'center',
    9.               wrapText: false, // 自动换行
    10.             },
    11.           }        
    12.     });
    13.   });
    6.3 设置单元格背景色和字体
    1. exportData.forEach((row, rowIndex) => {  
    2.     row.forEach((cell, cellIndex) => { 
    3.       // 设置所有单元格居中
    4.       let column = utils.encode_cell({c: cellIndex, r: rowIndex});
    5.       if(worksheet[column]){
    6.         // 设置背景色、加粗展示
    7.           worksheet[column].s = {
    8.             font: {
    9.               name: "微软雅黑",
    10.               sz: 16,
    11.               color: { rgb: "000000" },
    12.               bold: true,
    13.               italic: false,
    14.               underline: false,
    15.             },
    16.             fill: {
    17.               fgColor: { rgb: "C5D9F1" },
    18.             },
    19.             alignment: {
    20.               horizontal: 'center',
    21.               vertical: 'center',
    22.               wrapText: false, // 自动换行
    23.             },
    24.           }
    25.         }
    26.       }
    27.     });
    28.   });
    6.4 设置单元格边框
    1.   //单元格外侧框线
    2.   const borderAll = {
    3.     top: {
    4.       style: "thin",
    5.     },
    6.     bottom: {
    7.       style: "thin",
    8.     },
    9.     left: {
    10.       style: "thin",
    11.     },
    12.     right: {
    13.       style: "thin",
    14.     },
    15.   };
    16.  
    17.   // 设置单元格边框
    18.   arrData.forEach((row, rowIndex) => {  
    19.     row.forEach((cell, cellIndex) => { 
    20.       let column = utils.encode_cell({c: cellIndex, r: rowIndex});
    21.       if(worksheet[column]){       
    22.           worksheet[column].s = {
    23.             border: borderAll,
    24.           }
    25.         }
    26.       }
    27.     });
    28.   });
    6.5 导出文件

           必须通过file-saver组件导出Excel文件，不能通过xlsx组件的writeFile方法导出文件，否则样式无法生效；

    1. const wbout = XLSXStyle.write(workbook, {
    2.     type: 'binary',
    3.     bookType: 'xlsx',
    4.   });
    5.   XLSX_SAVE.saveAs(
    6.     new Blob([s2ab(wbout)], {
    7.       type: 'application/octet-stream',
    8.     }),
    9.     'exported-data.xlsx',
    10.   );
    11.  
    12.  
    13. // 数据转换
    14. function s2ab(s) {
    15.   var buf = new ArrayBuffer(s.length);
    16.   var view = new Uint8Array(buf);
    17.   for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
    18.   return buf;
    19. }

    7、完整代码示例

    1. import * as xlsx from 'xlsx';
    2. import type { WorkBook } from 'xlsx';
    3. import type { JsonToSheet, AoAToSheet } from './typing';
    4. import XLSXStyle from 'xlsx-style-vite';
    5. import XLSX_SAVE from 'file-saver';
    6. import { isEmptyString } from '@/utils/table';
    7.  
    8. const { utils, writeFile } = xlsx;
    9.  
    10. const DEF_FILE_NAME = 'excel-list.xlsx';
    11.  
    12. export function aoaToSheetXlsx({
    13.   data,
    14.   header,
    15.   filename = DEF_FILE_NAME,
    16.   write2excelOpts = { bookType: 'xlsx' },
    17.   merges = [],
    18. }: AoAToSheet) {
    19.   const arrData = [...data];  
    20.   if (header) {    
    21.     arrData.unshift(header);
    22.   }
    23.  
    24.   const worksheet = utils.aoa_to_sheet(arrData);
    25.  
    26.   /* add worksheet to workbook */
    27.   const workbook: WorkBook = {
    28.     SheetNames: [filename],
    29.     Sheets: {
    30.       [filename]: worksheet,
    31.     },
    32.   };
    33.  
    34.   //单元格外侧框线
    35.   const borderAll = {
    36.     top: {
    37.       style: "thin",
    38.     },
    39.     bottom: {
    40.       style: "thin",
    41.     },
    42.     left: {
    43.       style: "thin",
    44.     },
    45.     right: {
    46.       style: "thin",
    47.     },
    48.   };
    49.  
    50.   // 设置列宽
    51.   arrData.forEach((row, rowIndex) => {  
    52.     row.forEach((cell, cellIndex) => { 
    53.       const list = arrData.map(item => {
    54.         const val = item[cellIndex] as string;
    55.         if(isEmptyString(val)){
    56.           return 1;
    57.         } else if(val.toString().charCodeAt(0) > 255){ // 判断是否有中文
    58.           return val.toString().length * 2
    59.         } else{
    60.           return val.toString().length;
    61.         }
    62.       });
    63.       const maxLength = Math.max(...list);  
    64.       const width = maxLength * 1.1; // 根据实际内容长度自动调整列宽  
    65.       if(!worksheet["!cols"]) worksheet["!cols"] = [];
    66.       if(!worksheet["!cols"][cellIndex]) worksheet["!cols"][cellIndex] = {wch: 8};
    67.       worksheet['!cols'][cellIndex].wch = width; // 使用worksheet的 '!cols' 来设置列宽
    68.  
    69.       // 设置所有单元格居中
    70.       let column = utils.encode_cell({c: cellIndex, r: rowIndex});
    71.       if(worksheet[column]){
    72.         if(rowIndex === 0) {  // 标题行设置背景色、加粗展示
    73.           worksheet[column].s = {
    74.             border: borderAll,
    75.             font: {
    76.               // name: "微软雅黑",
    77.               // sz: 16,
    78.               color: { rgb: "000000" },
    79.               bold: true,
    80.               italic: false,
    81.               underline: false,
    82.             },
    83.             fill: {
    84.               fgColor: { rgb: "C5D9F1" },
    85.             },
    86.             alignment: {
    87.               horizontal: 'center',
    88.               vertical: 'center',
    89.               wrapText: false, // 自动换行
    90.             },
    91.           }
    92.         } else {
    93.           worksheet[column].s = {
    94.             alignment: {
    95.               horizontal: 'center',
    96.               vertical: 'center',
    97.               wrapText: false, // 自动换行
    98.             },
    99.           }
    100.         }
    101.       }
    102.     });
    103.   });  
    104.  
    105.   // 合并单元格
    106.   merges.forEach((item) => {
    107.     if(!worksheet["!merges"]){
    108.       worksheet["!merges"] = [];
    109.     };
    110.     worksheet["!merges"].push(item);
    111.     // worksheet["!merges"].push({
    112.     //   s: { r: 2, c: 1 }, // s ("start"): c = 1 r = 2 -> "B3"
    113.     //   e: { r: 3, c: 4 }  // e ("end"):   c = 4 r = 3 -> "E4"
    114.     // });
    115.   });
    116.  
    117.   const wbout = XLSXStyle.write(workbook, {
    118.     type: 'binary',
    119.     bookType: 'xlsx',
    120.   });
    121.   XLSX_SAVE.saveAs(
    122.     new Blob([s2ab(wbout)], {
    123.       type: 'application/octet-stream',
    124.     }),
    125.     `${filename}.${write2excelOpts.bookType}`,
    126.   );
    127.  
    128.   /* output format determined by filename */
    129.   // writeFile(workbook, filename, write2excelOpts);
    130.   /* at this point, out.xlsb will have been downloaded */
    131. }
    132.  
    133. // 数据转换
    134. function s2ab(s) {
    135.   var buf = new ArrayBuffer(s.length);
    136.   var view = new Uint8Array(buf);
    137.   for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
    138.   return buf;
    139. }

    新时代农民工

  • 相关阅读:
    进化：元宇宙明天的主题
    “深入理解机器学习性能评估指标：TP、TN、FP、FN、精确率、召回率、准确率、F1-score和mAP”
    vue3接口、数据懒加载,回滚不重复加载
    零基础重庆自考本科行政管理难吗？
    JavaScript Promise
    layer 弹框让按钮取消自动获取焦点
    react 可视化编辑器1
    C++提高：04STL- 函数对象
    Ubuntu系统apt添加第三方PPA源
    go 获取文件类型
  • 原文地址：https://blog.csdn.net/sg_knight/article/details/134003709