保存数据为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')
相关推荐
勾勾圈圈蛋蛋8 小时前
黑马Vue_day11:Vue3的watch,ref和reactive,vue2->vue3,defineOptions、Model
前端
AlloyTeamZy8 小时前
我发现,一个人做小游戏最难的,根本不是写代码
前端·人工智能·程序员
亲亲小宝宝鸭9 小时前
离谱架构系列——我在祖传代码里发现了【智子】
javascript
触底反弹9 小时前
🚀 20 行代码手写前端路由 + React Router 核心 API 一篇搞定!
前端·javascript·react.js
灏仟亿前端技术团队9 小时前
企业级 Agent 中台建设方案
前端
程序员黑豆9 小时前
鸿蒙应用开发:一次开发多端适配与自适应布局实战
前端·harmonyos
布兰妮甜9 小时前
Vue 状态管理选型:Pinia 完整实战,对比 Vuex,模块化持久化
前端·javascript·vue.js·pinia·vuex
神王宝宝 王者小学9 小时前
面向领域驱动架构的查询实现方式
前端·python·架构
小林ixn10 小时前
React Router 从入门到实战:一篇搞定路由配置、懒加载与嵌套路由
前端·react.js·前端框架
labixiong10 小时前
async/await 到底是不是 Generator 的语法糖?手写执行器,Babel 编译产物里藏着答案
前端·javascript·babel