Vue.js中Syncfusion下拉列表加载GitHub CSV文件请求失败解决

你当前使用的WebApiAdaptor是针对返回JSON格式的REST API设计的，无法解析CSV文本格式的响应，这就是加载时显示"Request Failed"的核心原因。

方法一：手动请求并解析GitHub上的CSV #

1. 安装CSV解析库（以papaparse为例，能处理各种CSV边缘场景）：

npm install papaparse

2. 修改组件代码，手动请求CSV并转换为下拉列表可用的JSON数据：

<template>
  <div id="app">
    <div>
      <h1>Welcome to Desche App.</h1>
    </div>
    <div>
      <div id="container" style="margin: 5rem auto 0; width: 20rem;">
        <br>
        <ejs-dropdownlist 
          id="dropdownlist" 
          :dataSource="companyData" 
          :fields="dataFields" 
          placeholder="Select a company name"
          :loading="isLoading"
        ></ejs-dropdownlist>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { DropDownListPlugin } from '@syncfusion/ej2-vue-dropdowns';
import Papa from 'papaparse';

Vue.use(DropDownListPlugin);

export default Vue.extend({
  data: function () {
    return {
      companyData: [],
      dataFields: { text: 'company_name', value: 'exchange_symbol' },
      isLoading: false
    };
  },
  mounted() {
    this.isLoading = true;
    // 请求GitHub raw CSV文件
    fetch('https://raw.githubusercontent.com/Azmart/IxFintech/main/identifier_mapper.csv')
      .then(res => res.text())
      .then(csvContent => {
        // 解析CSV为带表头的JSON数组
        const parsedResult = Papa.parse(csvContent, { header: true });
        // 过滤空行数据
        this.companyData = parsedResult.data.filter(item => item.company_name);
        this.isLoading = false;
      })
      .catch(err => {
        console.error('数据加载失败:', err);
        this.isLoading = false;
      });
  }
});
</script>

<style>
@import url('https://cdn.syncfusion.com/ej2/material.css');
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

方法二：使用本地CSV文件 #

1. 将identifier_mapper.csv文件放入项目的public目录（Vue项目中public目录下的资源可直接通过根路径访问）。
2. 修改fetch的请求路径为本地文件路径：

fetch('/identifier_mapper.csv')

其余解析逻辑与方法一完全一致。

额外说明 #

如果不想依赖第三方库，也可以手动实现简单的CSV解析（按换行分割后处理表头与行数据），但papaparse能处理带引号的字段、跨行字段等复杂场景，稳定性更高。

内容的提问来源于stack exchange，提问作者Vlogs