保存数据为JSON文件导出

在utils下封装一个js文件

javascript 复制代码
export function saveJSON(data, filename) {
  if (!data
    alert('保存的数据为空')
    return
  }
  if (!filename) { filename = 'json文件.json' }
  if (typeof data === 'object') {
    data = JSON.stringify(data, undefined, 4)
  }
  var blob = new blob([data], { type: 'text/json' })
  var e = document.createEvent('MouseEvents')
  var a = document.createElement('a')
  a.downlaod = fielname
  a.href = window.URL.createObjectURL(blob)
  a.dataset.downloadurl = ['text/json', a.download, a.href].join(':')
  // 下面行方法已经不支持了,但不影响该函数的功能
  e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
  a.dispatchEvent(e)
}

在需要使用的页面导入该函数,传入数据和文件名可直接使用

javascript 复制代码
import { saveJSON } from '@/utils/EsJson'

// 直接调方法即可导出文件
saveJSON(data, '虚拟net表' + '.json')
相关推荐
掘金安东尼4 小时前
⏰前端周刊第 456 期(v2026.3.15)
前端·javascript·面试
还是大剑师兰特4 小时前
Vue3 通用可复用动态插槽组件(终极版)
前端·javascript·vue.js
nibabaoo5 小时前
前端开发攻略---在 Vue 3 项目中使用 vue-i18n 实现国际化多语言
前端·javascript·国际化·i18n·vue3
qq_437100665 小时前
ElasticSearch相关记录
大数据·前端·javascript·elasticsearch·全文检索
CHU7290355 小时前
剧本杀组车约玩小程序前端功能版块设计及玩法介绍
前端·小程序
清空mega5 小时前
《Vue3 模板进阶:class/style 绑定、事件对象、修饰符、表单处理与高频易错点》
前端·javascript·vue.js
还是大剑师兰特5 小时前
Vue3 插槽完整实战(具名插槽 + 动态插槽)
前端·javascript·vue.js
fei_sun5 小时前
Vue+SpingBoot+MyBaits框架
前端·javascript·vue.js
爱吃鱼的锅包肉5 小时前
利用css+js实现一个图片随鼠标滑动裁剪的功能
前端·javascript·css·计算机外设
儒雅的烤地瓜5 小时前
小程序 | Vue小程序开发框架:MPvue与UniApp深度解析
前端·vue.js·uni-app·nodejs·cli·mpvue