在Vue中使用xlsx组件实现Excel导出功能的步骤详解

更新时间：2023年10月25日 11:31:31 作者：sg_knight

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

1、项目设置

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

npm install xlsx --save
 
或
 
yarn add xlsx --save

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

2、准备数据

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

 
exportData: [
  { name: "John", age: 30, city: "New York" },
  { name: "Alice", age: 25, city: "Los Angeles" },
  { name: "Bob", age: 35, city: "Chicago" }
]

3、实现导出功能

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

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

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

4、设置列宽自适应

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

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

5、设置合并单元格

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

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

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

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

6.1 安装并引入xlsx-style-vite和file-saver组件

yarn add xlsx-style-vite --save
 
yarn add file-saver --save

import XLSXStyle from 'xlsx-style-vite';
import XLSX_SAVE from 'file-saver';

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

6.2 设置单元格居中

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

exportData.forEach((row, rowIndex) => {  
    row.forEach((cell, cellIndex) => { 
      // 设置所有单元格居中
      let column = utils.encode_cell({c: cellIndex, r: rowIndex});      
          worksheet[column].s = {
            alignment: {
              horizontal: 'center',
              vertical: 'center',
              wrapText: false, // 自动换行
            },
          }        
    });
  });

6.3 设置单元格背景色和字体

exportData.forEach((row, rowIndex) => {  
    row.forEach((cell, cellIndex) => { 
      // 设置所有单元格居中
      let column = utils.encode_cell({c: cellIndex, r: rowIndex});
      if(worksheet[column]){
        // 设置背景色、加粗展示
          worksheet[column].s = {
            font: {
              name: "微软雅黑",
              sz: 16,
              color: { rgb: "000000" },
              bold: true,
              italic: false,
              underline: false,
            },
            fill: {
              fgColor: { rgb: "C5D9F1" },
            },
            alignment: {
              horizontal: 'center',
              vertical: 'center',
              wrapText: false, // 自动换行
            },
          }
        }
      }
    });
  });

6.4 设置单元格边框

  //单元格外侧框线
  const borderAll = {
    top: {
      style: "thin",
    },
    bottom: {
      style: "thin",
    },
    left: {
      style: "thin",
    },
    right: {
      style: "thin",
    },
  };
 
  // 设置单元格边框
  arrData.forEach((row, rowIndex) => {  
    row.forEach((cell, cellIndex) => { 
      let column = utils.encode_cell({c: cellIndex, r: rowIndex});
      if(worksheet[column]){       
          worksheet[column].s = {
            border: borderAll,
          }
        }
      }
    });
  });

6.5 导出文件

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

const wbout = XLSXStyle.write(workbook, {
    type: 'binary',
    bookType: 'xlsx',
  });
  XLSX_SAVE.saveAs(
    new Blob([s2ab(wbout)], {
      type: 'application/octet-stream',
    }),
    'exported-data.xlsx',
  );
 
 
// 数据转换
function s2ab(s) {
  var buf = new ArrayBuffer(s.length);
  var view = new Uint8Array(buf);
  for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
  return buf;
}

7、完整代码示例

import * as xlsx from 'xlsx';
import type { WorkBook } from 'xlsx';
import type { JsonToSheet, AoAToSheet } from './typing';
import XLSXStyle from 'xlsx-style-vite';
import XLSX_SAVE from 'file-saver';
import { isEmptyString } from '@/utils/table';
 
const { utils, writeFile } = xlsx;
 
const DEF_FILE_NAME = 'excel-list.xlsx';
 
export function aoaToSheetXlsx<T = any>({
  data,
  header,
  filename = DEF_FILE_NAME,
  write2excelOpts = { bookType: 'xlsx' },
  merges = [],
}: AoAToSheet<T>) {
  const arrData = [...data];  
  if (header) {    
    arrData.unshift(header);
  }
 
  const worksheet = utils.aoa_to_sheet(arrData);
 
  /* add worksheet to workbook */
  const workbook: WorkBook = {
    SheetNames: [filename],
    Sheets: {
      [filename]: worksheet,
    },
  };
 
  //单元格外侧框线
  const borderAll = {
    top: {
      style: "thin",
    },
    bottom: {
      style: "thin",
    },
    left: {
      style: "thin",
    },
    right: {
      style: "thin",
    },
  };
 
  // 设置列宽
  arrData.forEach((row, rowIndex) => {  
    row.forEach((cell, cellIndex) => { 
      const list = arrData.map(item => {
        const val = item[cellIndex] as string;
        if(isEmptyString(val)){
          return 1;
        } else if(val.toString().charCodeAt(0) > 255){ // 判断是否有中文
          return val.toString().length * 2
        } else{
          return val.toString().length;
        }
      });
      const maxLength = Math.max(...list);  
      const width = maxLength * 1.1; // 根据实际内容长度自动调整列宽  
      if(!worksheet["!cols"]) worksheet["!cols"] = [];
      if(!worksheet["!cols"][cellIndex]) worksheet["!cols"][cellIndex] = {wch: 8};
      worksheet['!cols'][cellIndex].wch = width; // 使用worksheet的 '!cols' 来设置列宽
 
      // 设置所有单元格居中
      let column = utils.encode_cell({c: cellIndex, r: rowIndex});
      if(worksheet[column]){
        if(rowIndex === 0) {  // 标题行设置背景色、加粗展示
          worksheet[column].s = {
            border: borderAll,
            font: {
              // name: "微软雅黑",
              // sz: 16,
              color: { rgb: "000000" },
              bold: true,
              italic: false,
              underline: false,
            },
            fill: {
              fgColor: { rgb: "C5D9F1" },
            },
            alignment: {
              horizontal: 'center',
              vertical: 'center',
              wrapText: false, // 自动换行
            },
          }
        } else {
          worksheet[column].s = {
            alignment: {
              horizontal: 'center',
              vertical: 'center',
              wrapText: false, // 自动换行
            },
          }
        }
      }
    });
  });  
 
  // 合并单元格
  merges.forEach((item) => {
    if(!worksheet["!merges"]){
      worksheet["!merges"] = [];
    };
    worksheet["!merges"].push(item);
    // worksheet["!merges"].push({
    //   s: { r: 2, c: 1 }, // s ("start"): c = 1 r = 2 -> "B3"
    //   e: { r: 3, c: 4 }  // e ("end"):   c = 4 r = 3 -> "E4"
    // });
  });
 
  const wbout = XLSXStyle.write(workbook, {
    type: 'binary',
    bookType: 'xlsx',
  });
  XLSX_SAVE.saveAs(
    new Blob([s2ab(wbout)], {
      type: 'application/octet-stream',
    }),
    `${filename}.${write2excelOpts.bookType}`,
  );
 
  /* output format determined by filename */
  // writeFile(workbook, filename, write2excelOpts);
  /* at this point, out.xlsb will have been downloaded */
}
 
// 数据转换
function s2ab(s) {
  var buf = new ArrayBuffer(s.length);
  var view = new Uint8Array(buf);
  for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
  return buf;
}

以上就是在Vue中使用xlsx组件实现Excel导出功能的步骤详解的详细内容，更多关于Vue xlsx组件实现Excel导出的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

element-ui中el-upload多文件一次性上传的实现
这篇文章主要介绍了element-ui中el-upload多文件一次性上传的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-12-12
基于vue-ssr服务端渲染入门详解
这篇文章主要介绍了基于vue-ssr服务端渲染入门详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
vue中的文本空格占位符说明
这篇文章主要介绍了vue中的文本空格占位符说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
基于Vue3和Element Plus实现自动导入功能
在 Vue 3 项目中,结合 Element Plus 实现自动导入可以显著减少代码量,提升开发效率,Element Plus 提供了官方的自动导入插件 unplugin-vue-components 和 unplugin-auto-import,以下是如何配置和使用的详细步骤,需要的朋友可以参考下
2025-03-03
vue嵌套组件传参实例分享
这篇文章主要介绍了vue嵌套组件传参实例分享,本文以一个vue递归组件为例,探究多层嵌套后事件无法触发的问题,我们可以通过查看一Demo,便于快速了解,下文列举例子需要的小伙伴可以参考一下
2022-04-04
如何利用vue实现登陆界面及其跳转详解
在开发中我们经常遇到这样的需求,需要用户直接点击一个链接进入到一个页面,下面这篇文章主要给大家介绍了关于如何利用vue实现登陆界面及其跳转的相关资料,需要的朋友可以参考下
2023-04-04
vue用递归组件写树形控件的实例代码
最近在vue项目中遇到需要用树形控件的部分，比如导航目录是不确定的，所以必须要用树形结构，下面脚本之家小编给大家带来了vue用递归组件写树形控件的实例代码，需要的朋友参考下吧
2018-07-07
vue3实现表格编辑和删除功能的示例代码
这篇文章主要为大家详细介绍了vue3实现表格编辑和删除功能的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2024-01-01
vue+antv实现雷达图的示例代码
这篇文章主要介绍了vue+antv实现雷达图，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2021-12-12
利用Vue3+Element Plus封装公共表格组件(带源码)
最近公司项目中频繁会使用到table表格,而且前端技术这一块也用到了vue3来开发,所以基于element plus table做了一个二次封装的组件,这篇文章主要给大家介绍了关于利用Vue3+Element Plus封装公共表格组件的相关资料,需要的朋友可以参考下
2023-11-11