c# - 卡住生成 + 将 .xlsx 文件从 ASP.NET Web API 后端发送到 Vue.js 前端
问题描述
我正在尝试在我的 ASP.NET Web API 后端生成一个 excel 文件,并将其发送到我的 Vue.js 前端以供下载。
通过调用 getQueryResults 发出 API 请求:
const apiClient = axios.create({
baseURL: process.env.NODE_ENV == "production" ? PROD_URL : TEST_URL,
withCredentials: true, // This is the default
headers: {
Accept: "application/json",
"Content-Type": "application/json"
}
});
getQueryResults(table, filters, selected, clientId, fundId, periodId, pageNumber, pageSize, exportExcel){
return apiClient.post(`queryResults`, {
responseType: 'blob',
table,
filters,
selected,
clientId,
fundId,
periodId,
pageNumber,
pageSize,
exportExcel
});
}
在后端,在 QueryResultsExport.cs 内部生成 excel 文件(EPPlus 是 4.1.0 版):
public static MemoryStream exportToExcel(IQueryable<object> itemsToExport)
{
if (itemsToExport.Count() == 0)
return null;
ExcelPackage excel = new ExcelPackage();
ExcelWorksheet workSheet = excel.Workbook.Worksheets.Add("Query Results");
DataTable dataTable = toDataTable(itemsToExport.ToList());
workSheet.Cells["A1"].LoadFromDataTable(dataTable, true);
/*
string path = @"C:\Users\asdfq321\Downloads\test11.xlsx";
Stream stream = File.Create(path);
excel.SaveAs(stream);
stream.Close();
return null;
*/
MemoryStream ms = new MemoryStream(excel.GetAsByteArray());
excel.Dispose();
return ms;
}
您可以看到我注释掉了一些将 excel 文件在本地保存为 .xlsx 文件的代码,而不是返回内存流。我这样做是为了确保问题不在 excel 生成中。本地保存在服务器上的文件似乎是正确的,它的大小为 3442 字节(稍后会相关)。
接下来,将内存流发送回客户端:
[HttpPost]
[Route("queryResults")]
public HttpResponseMessage GetQueryResults([FromBody]Dictionary<string, object> queryParams)
{
// continued from above...
MemoryStream ms = QueryResultsExport.exportToExcel(queryItems);
HttpResponseMessage httpResponseMessage = Request.CreateResponse(HttpStatusCode.OK);
httpResponseMessage.Content = new StreamContent(ms);
httpResponseMessage.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment");
httpResponseMessage.Content.Headers.ContentDisposition.FileName = "asdfq.xlsx";
httpResponseMessage.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/octet-stream");
return httpResponseMessage;
}
最后,在 Vue 前端处理响应:
.then(result => {
var myBlob = new Blob([result.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'})
const url = window.URL.createObjectURL(myBlob);
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'asdfq.xlsx'); //or any other extension
document.body.appendChild(link);
link.click();
})
结果是出现了一个弹出框,提示我下载一个 excel 文件。但是,无法读取该文件,并且在打开文件时会显示消息“我们发现 asdfq.xlsx 中的某些内容存在问题。您希望我们尽可能多地恢复吗?如果您相信此消息的来源工作簿,单击是。” 当我单击“是”时,我得到“Excel 无法打开文件 asdfq.xlsx,因为文件格式或文件扩展名无效。验证文件没有损坏并且文件扩展名与文件格式匹配。”
当我查看浏览器开发工具 Network 选项卡中的响应时,我看到响应具有 Content-Length: 3442,这似乎是正确的:这与我之前成功保存在服务器上的 excel 文件匹配。但是,最终下载的 excel 文件的大小为 5635 字节。
我尝试了各种方法,例如更改 responseType、传递给 blob 构造函数的类型、标头 ContentType、请求中的 Accept 标头、如何将内存流添加到响应中等等,但我没有任何运气得到这个工作:结果总是一样的;损坏的 excel 文件,大小为 5635 字节,而不是预期的 3442 字节。任何帮助将不胜感激;谢谢!
编辑:我在粘贴的代码片段中注意到,我有
httpResponseMessage.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/octet-stream");
在后端,但在前端我有
var myBlob = new Blob([result.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'})
我确实尝试将它们都设置为“application/octet-stream”,或者都设置为“application/vnd.openxmlformats-officedocument.spreadsheetml.sheet”,但这没有区别。
我还尝试了不同的生成响应的方法:
//attempt 1
MemoryStream ms = QueryResultsExport.exportToExcel(queryItems);
HttpResponseMessage httpResponseMessage = Request.CreateResponse(HttpStatusCode.OK);
httpResponseMessage.Content = new StreamContent(ms);
httpResponseMessage.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment");
httpResponseMessage.Content.Headers.ContentDisposition.FileName = "asdfq.xlsx";
httpResponseMessage.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/octet-stream");
// ms.Close();
return httpResponseMessage;
//attempt 2
MemoryStream ms = QueryResultsExport.exportToExcel(queryItems);
var result = new HttpResponseMessage(HttpStatusCode.OK)
{
Content = new ByteArrayContent(ms.ToArray())
};
result.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment");
result.Content.Headers.ContentDisposition.FileName = "asdfq.xlsx";
result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
return result;
// atempt 3
MemoryStream ms = QueryResultsExport.exportToExcel(queryItems);
ms.Position = 0;
var result = new HttpResponseMessage(HttpStatusCode.OK)
{
Content = new ByteArrayContent(ms.GetBuffer())
};
result.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment"){FileName = "export.xlsx"};
string contentType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
result.Content.Headers.ContentType = new MediaTypeHeaderValue(contentType);
result.Content.Headers.Add("content-length", ms.Length.ToString());
return result;
最后,在QueryResultsExport.exportToExcel中,我也试过了
var ms = new MemoryStream();
excel.SaveAs(ms);
return ms;
但这一切都没有任何区别。
解决方案
我能够通过将 excel 文件作为 StringContent 而不是 ByteArrayContent 发送来使其工作,如下所示: 如何将 HttpResponseMessage 的 ByteArrayContent 下载为 zip
MemoryStream ms = QueryResultsExport.exportToExcel(queryItems);
string base64String = System.Convert.ToBase64String(ms.ToArray(), 0, ms.ToArray().Length);
var result = new HttpResponseMessage(HttpStatusCode.OK)
{
Content = new StringContent(base64String)
};
return result;
.then(result => {
const link = document.createElement('a');
link.href = 'data:application/octet-stream;charset=utf-8;base64,' + result.data;
link.target = '_blank';
link.download = 'asdfq.xlsx';
link.click();
})
在 api 请求中分配 responseType 似乎没有必要。也不设置 Content.Headers.ContentDisposition 或 Content.Headers.ContentType。
推荐阅读
- javascript - jQuery如何在多个函数中使用事件驱动变量
- r - 用数值填充美学在 geom_histogram 中不起作用
- ansible - Ansible 复制模块忽略角色文件目录
- google-apps-script - 谷歌表格脚本 - 将数据范围从一张表复制到另一张表 - 整个范围不复制
- python - Python:杀死循环线程的最佳实践
- javascript - 如何在 JavaScript 中编写一个函数来创建一个对象并将该对象推送到一个数组中?
- jenkins-pipeline - 在特定时间运行阶段 Jenkins
- c++ - 我的生产者消费者代码中是否存在死锁或竞争条件?
- javascript - 从 Firestore 返回的文档快照数量不一致
- c# - EF6 -> EFCore ExecuteSqlCommand 等效