使用vue3+element实现csv文件的导入导出

背景

项目中需要实现一个csv文件的导入和导出功能，后端老哥和我都没搞过，于是到处收集了一些资料，算是完整实现了这个功能，在此记录一下，有需要的朋友自取

代码实现

代码中用到的方法及插件：FileReader、URL、Papa Parse

<template>
    <el-button class="uploadFile">
        导入
        <input 
            type="file" 
            name="file" 
            id="file" 
            title=" " 
            v-on:change="handleImport" ref="refFile"
        />
        </el-button>
        <el-button @click="handleExport">导出</el-button>
</template>

<script setup>
import Papa from 'papaparse'

const refFile = ref(null)

// 导入
const handleImport = () => {
  // 获取到文件
  let selectedFile = refFile.value.files[0]
  // **`FileReader`** 对象允许 Web 应用程序异步读取存储在用户计算机上的文件
  var reader = new FileReader()
  reader.readAsDataURL(selectedFile)
  // 读取操作完成时触发时触发
  reader.onload = evt => {
    // 对文件进行转换
    Papa.parse(selectedFile, {
      complete: res => {
        let data = res.data;
        // 把文件转换成csv格式，可以直接转换的格式如下图所示，如果是正常的csv文件，data应该是图中第一种类型
        // "姓名,年龄,婚配\r\n小帅,27,未婚\r\n小美,26,委会\r\n"
        const result = Papa.unparse(data)
        // 把拿到的result传给服务端，等待接口相应成功，再做下一步你想做的操作，例如刷新表格等
      }
    })
  }
}

// 导出
const handleExport = () => {
  let csv = "姓名,年龄,婚配\r\n小帅,27,未婚\r\n小美,26,委会\r\n"
  // 如果不是csv格式的，则要通过下边的unparse方法转换
  // let csv = Papa.unparse(data); 
  // `Blob` 对象表示一个不可变、原始数据的类文件对象
  let content = new Blob([csv]);
  //生成url对象
  let urlObject = window.URL;
  let url = urlObject.createObjectURL(content);
  // 创建一个a元素，进行常规的下载操作
  let ele = document.createElement("a");
  ele.href = url;
  ele.download = "文件导出.cvs";
  ele.click();
  // 下载完成后释放这个对象
  urlObject.revokeObjectURL(url);
}
</script>

<style lang='scss' scoped>
.uploadFile { 
  position: relative;  
}
// 把上传框写个透明样式
.uploadFile input {  
  width: 60px;
  position: absolute;  
  left: 0;  
  opacity: 0;
}
</style>