提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
- 前言
- 一、引入插件
- 二、使用
- 1.导出单个json文件
- 2.导出多个json文件为压缩包
- 三.示意图
- 1.图
- 2.单个json文件
- 3.压缩包
前言
需求:为了项目数据的可移植性,决定以json文件的方式进行数据移植。对于单个数据项,可能涉及其关联的一系列数据,如根据数据项的id查询出相关联的子项数据,故导出的话希望以单数据项单json文件的方式。但为了方便,又需要批量导出并合并为一个压缩包。(此处只涉及前端导出解决方案)
一、引入插件
文件导出插件:FileSaver(点击进入官网)
安装:npm install file-saver --save
引入:import FileSaver from 'file-saver'
zip操作插件:
安装: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.图
2.单个json文件
3.压缩包