Wuxh

Front-end Development

0%

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

发表于 更新于

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

第一种方法

安装

  • 我这里使用了 vue-cli. 安装依赖包
1
npm i  file-saver xlsx  script-loader -S

使用

  1. 在项目中创建一个文件夹（比如 vendor，一般是在 src 目录下创建）

  2. 把 Blob.js 和  Export2Excel.js 这两个文件夹放到新建的文件夹内

  3. 由于这几个文件不支持 import 引入，所以我们需要 script-loader 来将他们挂载到全局环境下

  4. 添加到 export2Excel.js

1
2
3
require('script-loader!file-saver'); //保存文件用
require('script-loader!vendor/Blob'); //转二进制用
require('script-loader!xlsx/dist/xlsx.core.min'); //xlsx核心
  1. 注意 Bolb 的引入 上面的引入需要修改成这样
1
require('script-loader!@/vendor/Blob'); //引入之前下载的Bolo.js

使用方法

在 vue 的 methods 钩子中新增方法

代码如下

1
2
3
4
5
6
7
8
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");
   });
 }

参考文档

第二种方法

1
npm i js-export-excel -S

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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(); //保存

选项

  • 数据数据
1
2
3
4
5
6
7
8
9
/*多个sheet*/
/*每个sheet为一个object */
[{
sheetData:[], // 数据
sheetName:'', // sheet名字
sheetFilter:[], //列过滤
sheetHeader:[] // 第一行
columnWidths: [] //列宽 需与列顺序对应
}]

  • fileName 下载文件名（默认：下载）

  • 表格选项

  1. sheetName sheet 名字（可有可无）（默认 sheet1）
  2. **sheetHeader **标题（excel 第一行数据）
1
sheetHeader: ["姓名", "性别"],
  1. columnWidths列宽非必须
1
2
// number 屏幕宽度为100 20即为 1/5屏幕大小
columnWidths = [20, ''];
  1. sheetData数据源（必须）
1
2
3
4
5
6
7
8
9
10
//第一种方式 Object
sheetData: [
  { one: '一行一列', two: '一行二列' },
  { one: '二行一列', two: '二行二列' }
];
//第二种方法 Array
sheetData: [
  ['wxh', '男'],
  ['xh', '女']
];
  1. sheetFilter 列过滤（只有在数据为对象下起作用）（可有可无）
1
sheetFilter = ['two', 'one'];

参考文档

欢迎关注我的其它发布渠道