vue json格式导出excel文件

1、下载xlsx、file-saver插件

npm install xlsx file-saver

2、页面中引入插件

import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';

3、创建excel导出结构 每一个数组表示一行

const data = [
    ["姓名", "性别", "电话"],
    ["张三", "男", "15888888888"],
];

4、将数据转换为工作表

// data为上面生命的数组
const worksheet = XLSX.utils.aoa_to_sheet(data);

5、设置列宽 根据需求是否修改，单位为：字符，下标以0开始

worksheet["!cols"] = []
worksheet["!cols"][0] = { wch : 17 }
worksheet["!cols"][1] = { wch : 17 }

6、创建工作簿并添加工作表

const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

7、生成Excel文件

const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });

8、使用blob和FileReader创建一个URL然后下载

const dataBlob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' });
saveAs(dataBlob, 'villageGroup.xlsx');

完整代码

import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';

const data = [
    ["姓名", "性别", "电话"],
    ["张三", "男", "15888888888"],
];

// 将数据转换为工作表
const worksheet = XLSX.utils.aoa_to_sheet(data);

// 设置列宽
worksheet["!cols"] = []
worksheet["!cols"][1] = { wch : 17 }
  
// 创建工作簿并添加工作表
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
  
// 生成Excel文件
const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
        
// 使用blob和FileReader创建一个URL然后下载
const dataBlob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' });
saveAs(dataBlob, 'villageGroup.xlsx');