FastAPI和VUE3实现文件下载

FastAPI和VUE3实现文件下载

用到这些了，记录一下。其他文章要么过时了，要么不全。

前端

const exportReport = () => {
  const rxnList = []
  state.tableData.map((item) => {
    rxnList.push({stepId: item.stepId, procedure: item.procedureTxt})
  })
  const data = JSON.stringify({projectName: projectName.value})
  axios.post('http://127.0.0.1：8800/api/finalExport', data, {
    responseType: 'blob', // 重要：设置响应类型为 blob
  }).then(async (response) => {
    if (response.status === 200) {
      // 将文件转换为 Blob
      const blob = new Blob([response.data], {type: 'application/octet-stream'});

      // 创建一个链接并设置下载属性
      const link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = projectName.value + 'draft.docx';

      // 模拟点击下载链接
      link.click();
    } else {
      alert('从后端downloadfile目录里下载此文件失败.');
    }
  }).catch((error) => {
    console.log(error)
  })
}

后端

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from fastapi.responses import FileResponse

from pydantic import BaseModel


app = FastAPI()
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],  # 允许的源，这里假设你的前端应用运行在 8080 端口
    allow_credentials=True,
    allow_methods=["*"],  # 允许所有方法
    allow_headers=["*"],  # 允许所有头
)

class ProjectDetails(BaseModel):
    projectName: str
    
@app.post("/api/eln/finalExport")
def final_export(p: ProjectDetails):
    file_path, filename = gen_new_docx(p.projectName)	# 生成文件的函数
    return FileResponse(file_path, media_type="application/octet-stream", filename=filename)


if __name__ == '__main__':
    uvicorn.run(app='indigo_runner:app', host="0.0.0.0", port=8067, reload=True)