隔壁杨_ 2022-01-09 11:18 采纳率: 87.5%
浏览 24
已结题

强制下载时,如何在JavaScript中设置Blob文件名称?

当强制通过window.location下载时,如何在JavaScript中设置blob文件的名称?

function newFile(data) {
    var json = JSON.stringify(data);
    var blob = new Blob([json], {type: "octet/stream"});
    var url  = window.URL.createObjectURL(blob);
    window.location.assign(url);
}

运行上面的代码会立即下载文件而不会刷新页面,文件名类似如下所示的随机字符串:
bfefe410-8d9c-4883-86c5-d76c50a24a1d
那么我想将文件名设置为my-download.json,该怎么做?

  • 写回答

1条回答 默认 最新

  • 几何心凉 2022年度博客之星前端领域TOP 1 2022-01-09 11:22
    关注

    创建隐藏的a标记。
    将其href属性设置为blob的URL。
    将其download属性设置为文件名。
    单击a标记。

    var saveData = (function () {
        var a = document.createElement("a");
        document.body.appendChild(a);
        a.style = "display: none";
        return function (data, fileName) {
            var json = JSON.stringify(data),
                blob = new Blob([json], {type: "octet/stream"}),
                url = window.URL.createObjectURL(blob);
            a.href = url;
            a.download = fileName;
            a.click();
            window.URL.revokeObjectURL(url);
        };
    }());
    
    var data = { x: 42, s: "hello, world", d: new Date() },
        fileName = "my-download.json";
    
    saveData(data, fileName);
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录

报告相同问题?

问题事件

  • 系统已结题 1月17日
  • 已采纳回答 1月9日
  • 创建了问题 1月9日

悬赏问题

  • ¥15 帮我解决一下膳食平衡的线性规划模型的数据实例
  • ¥40 万年历缺少农历,需要和阳历同时显示
  • ¥250 雷电模拟器内存穿透、寻基址和特征码的教学
  • ¥200 比特币ord程序wallet_constructor.rs文件支持一次性铸造1000个代币,并将它们分配到40个UTXO上(每个UTXO上分配25个代币),并设置找零地址
  • ¥15 关于Java的学习问题
  • ¥15 如何使用chatgpt完成文本分类任务?
  • ¥15 已知速度v关于位置s的等式,怎么转化为已知位置求速度v的等式
  • ¥15 我有个餐饮系统,用wampserver把环境配置好了,但是后端的网页却进去,是为什么,能不能帮远程一下?
  • ¥15 R运行没有名称为"species"的插槽对于此对象类"SDMmodelCV"
  • ¥20 基于决策树的数字信号处理,2ask 2psk 2fsk的代码,检查下报错的原因