Web端如何从Firebase下载PDF文件并保存至本地文件夹

核心前提说明 #

出于浏览器安全沙箱限制，前端JavaScript无法主动指定本地磁盘的任意路径（例如c:\download）写入文件，你只能触发浏览器的默认下载流程，文件会自动保存到用户在浏览器中设置的默认下载目录，或者弹出路径选择框由用户手动选择保存位置。

实现步骤 #

步骤1：引入FileSaver依赖 #

你可以自行下载FileSaver.js的生产版本到本地项目，在HTML中引入即可：

<script src="./你的本地路径/FileSaver.min.js"></script>

步骤2：编写loadScannedImage函数 #

直接复制以下代码填入函数即可：

function loadScannedImage(pdfName,pdfUrl){
    // 先校验参数合法性，避免匹配不到数据时报错
    if(!pdfName || !pdfUrl){
        alert("未找到对应日期和分组的PDF文件");
        return;
    }
    // 请求PDF资源转为Blob格式
    fetch(pdfUrl)
        .then(response => {
            if(!response.ok) throw new Error("PDF资源请求失败");
            return response.blob();
        })
        .then(blob => {
            // 调用FileSaver的saveAs方法触发下载
            saveAs(blob, pdfName);
        })
        .catch(error => {
            console.error("PDF下载失败：", error);
            alert("PDF下载失败，请检查网络或文件是否存在");
        })
}

可能遇到的问题解决 #

如果出现跨域报错，需要先配置Firebase Storage的CORS规则：

1. 在本地创建一个cors.json文件，内容如下（将你的站点域名替换为你实际部署的站点域名，本地调试可以填http://localhost:端口号）：

[
  {
    "origin": ["你的站点域名"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

2. 用Firebase CLI或者gsutil工具将规则应用到你的Storage bucket即可。

无需第三方依赖的原生实现方案 #

如果你不想引入FileSaver.js，也可以用原生a标签的download属性实现，代码如下：

function loadScannedImage(pdfName,pdfUrl){
    if(!pdfName || !pdfUrl){
        alert("未找到对应日期和分组的PDF文件");
        return;
    }
    const link = document.createElement('a');
    link.href = pdfUrl;
    link.download = pdfName;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

注意：原生方案在部分跨域场景下可能不生效，download属性会失效变为直接预览PDF，优先推荐使用FileSaver的实现。

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