和上一例中在前端生成表格保存一样，这次我们在前端生成JSON文件并保存，而不需要后端发起命令

安装

  1. npm install --save file-saver

假设后端发来的数据是：

  1. [
  2.   {
  3.     name: '张三',
  4.     age: 19
  5.   },
  6.   {
  7.     name: '李四',
  8.     age: 20
  9.   },
  10.   {
  11.     name: '王五',
  12.     age: 21
  13.   },
  14.   {
  15.     name: 'foo',
  16.     age: 22
  17.   },
  18. ]

在前端

新建一个vue文件，template部分只要搞一个事件触发方法就行了，太简单不写了

JS部分

  1. import { saveAs } from 'file-saver'
  2. export {
  3.   data(){
  4.     table: 'student',
  5.     pick: [
  6.       {
  7.         name: '张三',
  8.         age: 19
  9.       },
  10.       {
  11.         name: '李四',
  12.         age: 20
  13.       },
  14.       {
  15.         name: '王五',
  16.         age: 21
  17.       },
  18.       {
  19.         name: 'foo',
  20.         age: 22
  21.       },
  22.         ]
  23.     },
  24.   methods: {
  25.     downloadJSON(){
  26.       let json = JSON.stringify(this.pick,null,2) //JSON的stringfy方法第一个传入一个js对象或者数组，第二个为自定义函数可选，第三个为生成的json的缩进 可选，一般为2
  27.       let bolb = new Blob([json],{type:'application/json,charset=utf-8;'}) //创建Blob数据流对象，记得Blob的数据参数必须是数组
  28.       saveAs(bolb,this.table + '.json') //保存，触发浏览器下载事件
  29.     },
  30.   }
  31. }

结束是不是很简单？但是里面涉及的几个重要知识还要学

Blob对象

JSON库及其方法