在vue中将json数据导出为单个json文件或者包含多个json文件的压缩包

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

需求：为了项目数据的可移植性，决定以json文件的方式进行数据移植。对于单个数据项，可能涉及其关联的一系列数据，如根据数据项的id查询出相关联的子项数据，故导出的话希望以单数据项单json文件的方式。但为了方便，又需要批量导出并合并为一个压缩包。（此处只涉及前端导出解决方案）

---

一、引入插件

文件导出插件：FileSaver（点击进入官网）

安装：npm install file-saver --save
引入：import FileSaver from 'file-saver'

zip操作插件： JSZip（点击进入官网）

安装：npm i jszip -S
引入：import JSZip from 'jszip'

二、使用

1.导出单个json文件

/** 
 * data: 封装好的json数据 
 * JSON.stringify(data, null, 2): 格式化json数据 方便阅读
 * new Blob(parame1, parame2): 转为Blob文件流.
 * parame1 [] 数据源 
 * parame2 文件流类型
 */
const blob = new Blob([JSON.stringify(data, null, 2)], {type: 'application/json'})

/** 
 * FileSaver.saveAs(parame1, parame2)  浏览器保存文件
 * parame1: Blob文件流
 * parame2：文件名
 */
FileSaver.saveAs(blob, res.modelName)

2.导出多个json文件为压缩包

/** 批量导出 (单个导出和批量导出可公用此函数 只需在此处根据传参row做判别) */
exportModel (row) { // modelIds: 多选的数据项id数组
	// 循环封装
	for (let i = 0, len = modelIds.length; i < len; i++) {
	  // 根据多选选择的id从数据项列表中找到对应数据项
	  let rowData = this.modelList.find(f => f.modelId == modelIds[i])
	  // 调用同步函数将所需id关联的其它数据拿到 加入到zip.file中
	  this.getModelJsonData(rowData).then(res => {
	    // 转为blob文件流
	    const blob = new Blob([JSON.stringify(res, null, 2)], {type: 'application/json'})
	    // 加入zip.file
	    zip.file(res.modelName + '.json', blob, { blob: true })
	
	    // 出口 如果到了最后一个文件 则进行保存下载
	    if (i === len - 1) {
	      zip.generateAsync({ // 转换文件
	        type: 'blob'
	      }).then(function (blob) {
	        FileSaver.saveAs(blob, '产品模型.zip'); // 保存下载
	      }, err => {
	        console.log("批量导出失败", err)
	      })
	    }
	  })
	}
}
          
/** 同步函数 */
async getModelJsonData (ginRow) {
	  /** 以下处理非必须 实际根据封装的json处理 */
      let row = {...ginRow}  // 不直接处理传参 否则可能改变源数据
      row.modelTag = JSON.parse(row.modelTag) // 将数据为json字符串的数据转为对象
      delete row.searchValue  // 去除多余属性

      // 查询指定模型下所有测点
      await listModelPoint({modelId: row.modelId}).then(response => {
        // 遍历测点将measConfig数据为json字符串的数据转为对象 处理非必须 实际根据封装的json处理
        response.rows.forEach(item => {
          item.measConfig = JSON.parse(item.measConfig) // 将数据为json字符串的数据转为对象
          delete item.searchValue  // 去除多余属性
        })
        
        row.modelPoint = response.rows
      })
      return row
    }

三.示意图

1.图

![在这里插入图片描述](https://img-blog.csdnimg.cn/7a4c24e9ba6e494bb5e246820c292fe3.png

2.单个json文件

3.压缩包