vue中使用XLSX实现简单的excel导入导出

Darling_大羚

已于 2023-10-26 18:12:08 修改

阅读量603

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript 前端 vue.js

于 2023-10-26 18:11:49 首次发布

本文链接：https://blog.csdn.net/Darling_DL/article/details/134061835

本文介绍了在Vue项目中如何利用XLSX库实现Excel文件的导入和导出功能，包括安装XLSX库、导出数据到Excel以及从Excel文件中导入数据的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue中使用XLSX实现简单的excel导入导出

1、安装xlsx

yarn add xlsx

2、引入

import * as XLSX from 'xlsx';

导出

function exportExcel(){
      let {utils, writeFile} = XLSX; //解构
      let book = utils.book_new(); //新建工作簿

	  //二维数组格式如下
      let sheetValue = [
		  ['姓名', '年龄'],
 		  ['张三', 10],
  		  ['李四', 18],
	  ]; 
	  //json格式如下
	  let sheetValue = [
	      { id: 1, name: '张三', age: 16 },
    	  { id: 2, name: '李四', age: 18 },
	  ];

      let sheet = utils.aoa_to_sheet(sheetValue); //创建工作表（二维数组格式）
      let sheet = utils.json_to_sheet(sheetValue); //创建工作表（json格式）
      
      utils.book_append_sheet(book, sheet); //将工作表放入工作簿中
      
      let xlsxName = 'test.xlsx'; //自定义导出文件名
      writeFile(book, xlsxName, {bookType: 'xlsx'});
}

导入

function importExcel(){
	  let {utils, read} = XLSX; //解构
	  
      let fileSelector = document.createElement('input');
      fileSelector.setAttribute('type', 'file');
      fileSelector.click();

      fileSelector.onchange = e => {
        let files = e.target.files; //文件信息
        let fileReader = new FileReader(); //创建读取器
        fileReader.readAsBinaryString(files[0]); //读取文件的内容为二进制
        // 读取完成
        fileReader.onload = event => {
          let data = event.target.result;
          let workbook = read(data, {type: 'binary'}); //读取工作簿
          let sheetName = workbook.SheetNames[0]; //取第一张表
          let worksheet = workbook.Sheets[sheetName];
          let jsonData = utils.sheet_to_json(worksheet, {header: 1}); //生成json表格内容
          console.log(jsonData);
        }
     }
}