我正在尝试创建一个docx
文件并将其发送到前端客户端应用程序,以便可以将其下载到用户的本地计算机。我使用FastAPI作为后端。我也使用python-docx
库来创建Document
。
下面的代码用于创建docx
文件并将其保存到服务器。
@app.post("/create_file")
async def create_file(data: Item):
document = Document()
document.add_heading("file generated", level=1)
document.add_paragraph("test")
document.save('generated_file.docx')
return {"status":"Done!"}
然后使用下面的代码将创建的docx
文件作为FileResponse
发送到客户端。
@app.get("/generated_file")
async def download_generated_file():
file_path = "generated_file.docx"
return FileResponse(file_path, media_type='application/vnd.openxmlformats-officedocument.wordprocessingml.document', filename=file_path)
在客户端(我使用的是ReactJS):
createFile = async () => {
const data = {
start: this.state.start,
end: this.state.end,
text: this.state.text,
};
await axios.post("http://localhost:8000/create_file", data).then(() => {
console.log("processing completed!");
});
};
downloadFile = async () => {
await axios.get("http://localhost:8000/generated_file").then((res) => {
const url = URL.createObjectURL(new Blob([res.data]));
const link = document.createElement("a");
link.href = url;
link.setAttribute("download", "generated.txt");
link.click();
});
};
当调用downloadFile
函数时,generated.docx
文件被下载。但是,docx
文件始终损坏,无法打开。我尝试使用txt文件,它工作正常。我需要使用docx文件,怎么办?
2条答案
按热度按时间xjreopfe1#
在Axios
GET
请求中,必须确保responseType
参数设置为blob
。从API中获取response
后,需要将Blob
对象(即response.data
)传递给URL.createObjectURL()
函数。下面是一个完整的工作示例,说明如何在前端使用Axios或Fetch API创建和下载文件(Document
)。这个答案使用了this和this答案中的方法和代码摘录,以及here和here答案。请参阅上述答案,了解以下所用方法的详细信息。出于演示目的,下面的示例使用Jinja2Templates
,但是,以类似的方式,您可以在ReactJS应用中使用下面的脚本。app.py
使用Axios
tempaltes/index.htnl
使用Fetch API
tempaltes/index.htnl
3npbholx2#
在JavaScript中,一般使用Axios库下载文件(包括React.js/Vue.js/Angular...),可以将responseType设置为blob,在Axios响应中处理文件下载。
下面是一个如何实现此目标的示例:
在示例代码中:
your-api-endpoint
替换为返回文件的API端点的实际URL。responseType
设置为blob
,以指示您希望在响应中显示二进制文件。*contentDisposition变量从响应中提取Content-Disposition头的值。
*filenameRegex正则表达式用于匹配和提取头值中的文件名。
注意:本示例假设API端点正确返回响应正文中的文件数据。根据您的特定用例调整API端点和有效负载。