vue3怎么解析读取的blob的csv文件

在Vue3中，可以使用`FileReader`对象来读取Blob类型的CSV文件。具体步骤如下：

1. 首先，将Blob对象转换为File对象，因为File对象有name属性，方便后续处理。可以使用`new File([blob], 'filename.csv', { type: 'text/csv' })`来转换。

2. 创建一个FileReader对象，并在其`onload`事件中处理读取到的数据。

3. 将读取到的数据使用逗号分隔符解析为二维数组。

下面是示例代码：

<template>
  <div>
    <input type="file" @change="handleFileChange">
    <table>
      <thead>
        <tr>
          <th v-for="(col, index) in columns" :key="index">{{ col }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, rowIndex) in rows" :key="rowIndex">
          <td v-for="(col, colIndex) in row" :key="colIndex">{{ col }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [],
      rows: []
    }
  },
  methods: {
    handleFileChange(event) {
      const file = event.target.files[0]
      const reader = new FileReader()

      reader.onload = () => {
        const csvData = reader.result
        const fileObj = new File([csvData], file.name, { type: 'text/csv' })
        this.parseCSV(fileObj)
      }

      reader.readAsText(file)
    },
    parseCSV(file) {
      const reader = new FileReader()

      reader.onload = () => {
        const csvData = reader.result
        const rows = csvData.split('\n')
        this.columns = rows[0].split(',')
        this.rows = rows.slice(1).map(row => row.split(','))
      }

      reader.readAsText(file)
    }
  }
}
</script>

在上面的代码中，`handleFileChange`方法监听文件选择框的`change`事件，并将选择的文件传递给`parseCSV`方法进行解析。`parseCSV`方法中，首先创建一个新的FileReader对象，然后在其`onload`事件中将读取到的数据解析为二维数组，分别保存列名和数据行。最后，将列名和数据行渲染到表格中。