下载数据生成json文件，csv文件_json下载csv文件-优快云博客

本文链接：https://blog.youkuaiyun.com/wyk760629476/article/details/116937333

本文介绍了如何使用JavaScript实现CSV和JSON文件的导出功能，包括构造文件内容、创建Blob对象、生成临时链接并触发下载等步骤。适用于前端开发者学习和参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下载CSV文件

/**
 * 导出excel
 * @param {Object} title  标题列key-val
 * @param {Object} data   值列key-val
 * @param {Object} fileName  文件名称
 */
exportCSV (title, data, fileName) {
  let CSV = ''
  let row = ''
  for (let i = 0; i < title.length; i++) {
    if (title[i].label) {
      row += title[i].label + ','
    }
  }
  row = row.slice(0, -1)
  CSV += row + '\r\n'
  for (let i = 0; i < data.length; i++) {
    let row = ''
    for (let j = 0; j < title.length; j++) {
      if (title[j].label) {
        row += '"' + (data[i][title[j].label] ? data[i][title[j].label] : '') + '"\t,'
      }
    }
    row.slice(0, row.length - 1)
    CSV += row + '\r\n'
  }
  let uri = new Blob(['\ufeff' + CSV], { type: 'text/csv' })
  if (window.navigator && window.navigator.msSaveOrOpenBlob) { // for IE
    window.navigator.msSaveOrOpenBlob(CSV, fileName + '.csv')
  } else { // for Non-IE（chrome、firefox etc.）
    let link = document.createElement('a')
    link.href = URL.createObjectURL(uri)
    link.style = 'visibility:hidden'
    link.download = fileName + '.csv'
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }
},

调用方法

this.exportCSV(this.parameter.list.columns, this.list, 'data.csv')

下载json文件

exportJSON (data, filename) {
  if (!data) {
    return
  }
  data = JSON.stringify(data, undefined, 4)
  let url = window.URL.createObjectURL(new Blob([data], { type: 'text/json' }))
  let link = document.createElement('a')
  link.style.display = 'none'
  link.href = url
  link.download = filename // 下载后文件名
  link.click()
  document.body.removeChild(link)// 下载完成移除元素
  window.URL.revokeObjectURL(url)// 释放掉blob对象
}

调用方法