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

文章目录

  • 前言
  • 一、引入插件
  • 二、使用
  • 1.导出单个json文件
  • 2.导出多个json文件为压缩包
  • 三.示意图
  • 1.图
  • 2.单个json文件
  • 3.压缩包


前言

需求:为了项目数据的可移植性,决定以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.图

json 压缩 java json压缩包_vue.js


2.单个json文件

json 压缩 java json压缩包_json 压缩 java_02

3.压缩包

json 压缩 java json压缩包_json 压缩 java_03