Json生成Excel文件并下载到本地

项目中后端返回 JSON 数据，我们前端需要生成 Excel 文件并保存

第一种方法

安装

我这里使用了 vue-cli. 安装依赖包

npm i  file-saver xlsx  script-loader -S

使用

在项目中创建一个文件夹（比如 vendor，一般是在 src 目录下创建）
把 Blob.js 和 Export2Excel.js 这两个文件夹放到新建的文件夹内
由于这几个文件不支持 import 引入，所以我们需要 script-loader 来将他们挂载到全局环境下
添加到 export2Excel.js

require('script-loader!file-saver'); //保存文件用
require('script-loader!vendor/Blob'); //转二进制用
require('script-loader!xlsx/dist/xlsx.core.min'); //xlsx核心

注意 Bolb 的引入上面的引入需要修改成这样

require('script-loader!@/vendor/Blob'); //引入之前下载的Bolo.js

使用方法

在 vue 的 methods 钩子中新增方法

代码如下

handleDownload() {
   require.ensure([], () = {
     const { export_json_to_excel } = require("@/vendor/Export2Excel");
     const tHeader = ["日期", "姓名", "地址"];
     const data = ["111",'456','666'];
     export_json_to_excel(tHeader, data, "列表excel");
   });
 }

参考文档

不是官方的,网上的参考文档

第二种方法

npm i js-export-excel -S

使用

const option = {};
option.fileName = 'excel';
option.datas = [
  {
    sheetData: [
      { one: '一行一列', two: '一行二列' },
      { one: '二行一列', two: '二行二列' }
    ],
    sheetName: 'sheet',
    sheetFilter: ['two', 'one'],
    sheetHeader: ['第一列', '第二列'],
    columnWidths: [20, 20]
  },
  {
    sheetHeader: ['姓名', '性别'],
    sheetData: [
      ['wxh', '男'],
      ['xh', '女']
    ]
  }
];
const toExcel = new ExportJsonExcel(option); //new
toExcel.saveExcel(); //保存

选项

数据数据

/*多个sheet*/
/*每个sheet为一个object */
[{
sheetData:[], // 数据
sheetName:'', // sheet名字
sheetFilter:[], //列过滤
sheetHeader:[] // 第一行
columnWidths: [] //列宽 需与列顺序对应
}]

fileName 下载文件名（默认：下载）
表格选项

sheetName sheet 名字（可有可无）（默认 sheet1）
**sheetHeader **标题（excel 第一行数据）

sheetHeader: ["姓名", "性别"],

columnWidths列宽非必须

// number 屏幕宽度为100 20即为 1/5屏幕大小
columnWidths = [20, ''];

sheetData数据源（必须）

//第一种方式 Object
sheetData: [
  { one: '一行一列', two: '一行二列' },
  { one: '二行一列', two: '二行二列' }
];
//第二种方法 Array
sheetData: [
  ['wxh', '男'],
  ['xh', '女']
];

sheetFilter 列过滤（只有在数据为对象下起作用）（可有可无）

sheetFilter = ['two', 'one'];

参考文档

npm 地址 js-export-excel
使用参考文档参考文档
安装