如何修复发送到前端时未正确创建后端 csv 下载答案

【问题标题】：How to fix backend csv download not being created properly when sent to front end如何修复发送到前端时未正确创建后端 csv 下载
【发布时间】：2019-09-09 05:38:33
【问题描述】：

我正在尝试从后端以 csv 格式从数据库下载一组数据。当在浏览器上进行下载时，csv 中只有 [Object Object]。

目前我在 API 控制器中有这个：

        public HttpResponseMessage GetListCsv(string fileName)
        {
            var result = new HttpResponseMessage(HttpStatusCode.OK);
            var csv = _myService.DownloadCsv(fileName);                           

            var stream = new MemoryStream(new ASCIIEncoding().GetBytes(csv));
            result.Content = new StreamContent(stream);
            result.Content.Headers.ContentType = new MediaTypeHeaderValue("text/csv");
            result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment") { FileName = $"{fileName}.csv" };
            return result;
        }

这是在前端：

        axios.get('api/List/Csv?fileName=' + id, { responseType: 'arrayBuffer',
        headers: {
          'Accept': 'text/csv'
        } })
            .then(resp => {                
                const saveData = (function () {
                    const a = document.createElement("a");
                    document.body.appendChild(a);
                    a.style = "display: none";
                    return function (data, fileName) {
                        const blob = new Blob([data], { type: "text/csv" }),
                            url = window.URL.createObjectURL(blob);
                        a.href = url;
                        a.download = fileName;
                        a.click();
                        window.URL.revokeObjectURL(url);
                    };
                }());

                const fileName = id + ".csv";

                saveData(resp, fileName);

                this.fetchData();
            });
}

无论何时运行，都会在浏览器上使用正确的文件名进行下载，并下载 csv。然而，csv 中唯一的东西就是 [object object]。

对此的任何帮助将不胜感激。

【问题讨论】：

如果您仍然需要帮助，请提供DownloadCsv函数的代码。

标签： c# reactjs asp.net-core asp.net-core-webapi

【解决方案1】：

以下是您可以根据需要使用和更改的示例代码 -

写一个单独的函数返回csv文件数据

        public async Task<CsvFileData> GetCsvFileDataAsync(DataModel model)
        {
            var csvFileData = new CsvFileData();

            using (var memoryStream = new MemoryStream())
            {
                using (var streamWriter = new StreamWriter(memoryStream))
                using (var csvWriter = new CsvWriter(streamWriter))
                {
                    csvWriter.WriteHeader<DataModel>();
                    csvWriter.NextRecord();
                    csvWriter.WriteRecord(model);
                }

                csvFileData.Content = memoryStream.ToArray();
            }

            csvFileData.Name = $"test.csv";

            return csvFileData;
        }

在控制器中

    var csvFileData = GetCsvFileDataAsync(model);
            if (csvFileData == null)
            {
               // log error and return proper status code
            }

            return File(csvFileData.Content, "text/csv", csvFileData.Name);

【讨论】：