使用React.js和ASP.NET Core v3.0下载文件可以通过以下步骤实现:
以下是一个示例代码:
在React.js中:
import React from 'react';
class FileDownload extends React.Component {
handleDownload = () => {
fetch('/api/download', {
method: 'GET',
})
.then(response => response.blob())
.then(blob => {
const url = window.URL.createObjectURL(new Blob([blob]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'file.txt');
document.body.appendChild(link);
link.click();
link.remove();
})
.catch(error => {
console.error('Error:', error);
});
};
render() {
return (
<button onClick={this.handleDownload}>Download File</button>
);
}
}
export default FileDownload;
在ASP.NET Core v3.0的后端:
using Microsoft.AspNetCore.Mvc;
using System.IO;
[Route("api/[controller]")]
[ApiController]
public class DownloadController : ControllerBase
{
[HttpGet]
public IActionResult DownloadFile()
{
var filePath = "path/to/file.txt"; // 替换为实际的文件路径
var fileStream = new FileStream(filePath, FileMode.Open, FileAccess.Read);
var fileContentResult = new FileStreamResult(fileStream, "application/octet-stream")
{
FileDownloadName = "file.txt"
};
return fileContentResult;
}
}
这个示例中,React.js组件中的handleDownload方法会发送GET请求到后端的/api/download端点。后端会打开文件并将其作为文件流返回给前端。前端通过创建一个临时的URL,并模拟点击下载链接的方式来触发文件下载。
请注意,示例中的文件路径和文件名是示意性的,需要根据实际情况进行替换。
领取专属 10元无门槛券
手把手带您无忧上云