实现 CSV 样例数据 工具

分类：general ｜ 标签：CSV、样例、数据 生成示例 CSV 测试数据

2.1 功能说明

生成示例 CSV 测试数据

2.1.1 使用指南

功能说明

一键生成含姓名/邮箱/手机/日期等字段的示例 CSV，用于接口与表格测试。

使用场景

导入功能联调、批量数据演示。

2.2 代码实现

2.2.1 组件结构

本工具是一个基于 Vue 3 <script setup> 语法的单文件组件（SFC），统一包裹在 ToolPageShell 组件内，由它提供页面标题、工具 ID、分类与「使用指南」插槽等通用外壳；核心业务逻辑（响应式状态、计算属性、事件处理函数）全部写在 <script setup> 中，输入/输出通过 el-input、el-button 等 Element Plus 组件与用户交互，所有数据均在浏览器本地处理，不会上传服务器。

2.2.2 核心逻辑概览

<script setup> 中定义的主要函数/方法：

• pick()
• gen()
• copy()
• download()
• clear()

2.2.3 关键实现代码

以下是该工具的完整 <script setup> 实现（核心代码）。模板（<template>）与样式（<style>）已省略。

import { ref } from 'vue'
import ToolPageShell from '@/components/ToolPageShell.vue'

const allCols = ['id', 'name', 'email', 'phone', 'date', 'city', 'amount']
const cols = ref(['id', 'name', 'email', 'phone'])
const rows = ref(20)
const csv = ref('')

const SUR = '王李张刘陈杨黄赵周吴徐孙马朱胡郭何高林郑谢罗'.split('')
const GIV = '伟芳娜秀英敏静丽强磊洋勇艳杰娟涛明超霞平刚桂兰'.split('')
const CITY = ['北京', '上海', '广州', '深圳', '杭州', '成都', '武汉', '西安']
function pick(a) { return a[Math.floor(Math.random() * a.length)] }
function gen() {
  const n = Math.min(Math.max(Number(rows.value) || 1, 1), 5000)
  const fields = cols.value.length ? cols.value : ['id']
  const lines = [fields.join(',')]
  for (let i = 1; i <= n; i++) {
    const row = fields.map(f => {
      if (f === 'id') return i
      if (f === 'name') return pick(SUR) + pick(GIV)
      if (f === 'email') return 'user' + i + '@example.com'
      if (f === 'phone') return '1' + (3 + Math.floor(Math.random() * 6)) + Math.floor(Math.random() * 1e8).toString().padStart(8, '0')
      if (f === 'date') return new Date(Date.now() - Math.floor(Math.random() * 1e10)).toISOString().slice(0, 10)
      if (f === 'city') return pick(CITY)
      if (f === 'amount') return (Math.random() * 10000).toFixed(2)
      return ''
    })
    lines.push(row.join(','))
  }
  csv.value = lines.join('\n')
}
function copy() { if (csv.value) navigator.clipboard?.writeText(csv.value) }
function download() {
  if (!csv.value) return
  const b = new Blob(['\ufeff' + csv.value], { type: 'text/csv' })
  const a = document.createElement('a'); a.href = URL.createObjectURL(b); a.download = 'sample.csv'; a.click()
  URL.revokeObjectURL(a.href)
}
function clear() { csv.value = '' }

2.3 效果截图

工具访问地址：https://www.i91tools.com/tools/csv-mock