前端如何将接口传来的列表数据(数组)直接下载成csv文件

前言:最近遇到一个需求,需要实现一个下载表格数据的操作,一般来说是前端请求后端的下载接口,将文件流下载下来,但是因为这个项目任务时间比较紧,后端没时间做下载接口,所以暂时由前端直接调列表的git接口,把后端传给我们的数组直接下载成csv文件,情况如下图:

实现步骤:

1、先在util文件夹下新增一个js文件:Export2Csv.js,放转csv的插件代码:

javascript 复制代码
function processRow(row) {
  let finalVal = ''
  for (let j = 0; j < row.length; j++) {
    let innerValue = row[j] === null ? '' : row[j].toString()
    if (row[j] instanceof Date) {
      innerValue = row[j].toLocaleString()
    }

    let result = innerValue.replace(/"/g, '""')
    if (result.search(/("|,|\n)/g) >= 0) { result = '"' + result + '"' }
    if (j > 0) { finalVal += ',' }
    finalVal += result
  }
  return finalVal + '\n'
}

export function exportToCsv(filename, rows) {
  let csvFile = ''
  for (let i = 0; i < rows.length; i++) {
    csvFile += processRow(rows[i])
  }

  // 添加\ufeff头,标识excel可以打开UTF8编码的文件
  const blob = new Blob(['\ufeff', csvFile], { type: 'text/csv;charset=utf-8;' })
  if (navigator.msSaveBlob) { // IE 10+
    navigator.msSaveBlob(blob, filename)
  } else {
    const link = document.createElement('a')
    if (link.download !== undefined) { // feature detection
      // Browsers that support HTML5 download attribute
      const url = URL.createObjectURL(blob)
      link.setAttribute('href', url)
      link.setAttribute('download', filename)
      link.style.visibility = 'hidden'
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
  }
}

export function exportDictArray2csv(data, filename) {
  const keys = Object.keys(data[0])

  const rows = []

  // writer header
  rows.push(keys)

  data.forEach(dict => {
    const row = []
    keys.forEach(key => {
      row.push(dict[key])
    })
    rows.push(row)
  })

  exportToCsv(filename, rows)
}

export default exportDictArray2csv

2、在需要用的页面引入

javascript 复制代码
import { exportDictArray2csv } from "@/utils/Export2Csv.js";

3、使用

javascript 复制代码
const filename = `data.csv`;
exportDictArray2csv(tableData.value, filename);

filename就是下载的文件名,可以自己自定义

tableData.value就是接口传给我们的数据

tableData.value的数据格式:

{aaa:1,bbb:2},{aaa:3,bbb:4}

下载下来的csv文件:

|-----|-----|
| aaa | bbb |
| 1 | 2 |
| 3 | 4 |

相关推荐
阿珊和她的猫4 分钟前
深入剖析 Vue Router History 路由刷新页面 404 问题:原因与解决之道
前端·javascript·vue.js
IT_陈寒40 分钟前
Vue3性能提升30%的秘密:5个90%开发者不知道的组合式API优化技巧
前端·人工智能·后端
我是华为OD~HR~栗栗呀1 小时前
华为od-22届考研-C++面经
java·前端·c++·python·华为od·华为·面试
老黄编程1 小时前
FireFox如何滚动截屏?
前端·firefox
_殊途2 小时前
HTML-CSS项目练习
前端·css·html
@AfeiyuO2 小时前
el-table 表格嵌套表格
前端·elementui·vue
我是华为OD~HR~栗栗呀3 小时前
华为OD-23届-测试面经
java·前端·c++·python·华为od·华为·面试
β添砖java4 小时前
vivo响应式官网
前端·css·html·1024程序员节
web打印社区9 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗9 小时前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架