Flask send_file设置inline不生效 浏览器无法在线预览PDF如何解决

后端Flask代码修改 #

1. 修正参数拼写错误：你代码中写的as_attachement拼写有误，正确参数名为as_attachment，拼写错误会导致配置不生效，强制触发下载。
2. 显式指定PDF对应的MIME类型，确保浏览器可以识别文件类型：

from flask import send_file

# 示例返回逻辑
return send_file(
    file,
    mimetype='application/pdf', # 必须指定正确的MIME类型
    as_attachment=False,
    # Flask 2.0+可通过download_name指定预览时的默认文件名
    download_name="report.pdf"
)

前端Axios请求配置修改 #

发送请求时必须指定响应类型为blob，否则Axios会默认将返回数据按JSON格式解析，导致PDF文件损坏无法正常预览：

// 示例请求代码
axios.get('/你的PDF接口地址', {
  responseType: 'blob' // 必须添加该配置
}).then(res => {
  receiveFile(res)
})

前端接收逻辑修改 #

你当前代码触发下载的核心原因是使用了a标签的download属性，该属性的作用就是强制触发文件下载，无论浏览器是否支持该类型文件的预览。修改为直接打开Blob生成的URL即可调用浏览器内置PDF预览器展示文件：

const receiveFile = (data) => {
    if (data.data) {
        // 显式指定Blob的MIME类型为application/pdf，避免浏览器识别错误
        const pdfBlob = new Blob([data.data], { type: 'application/pdf' });
        const pdfUrl = window.URL.createObjectURL(pdfBlob);
        // 传入_blank会在新标签页打开，改为_self可在当前标签页打开
        window.open(pdfUrl, '_blank');
        // 延迟释放Blob URL占用的内存，避免资源泄漏
        setTimeout(() => window.URL.revokeObjectURL(pdfUrl), 10000);
    }
}

内容的提问来源于stack exchange，提问作者Elcid_91