KingのNote

前端数据下载

9/5/2023 通用组件
<body>
    <button>下载</button>
</body>

<script>
    // 写入下载的文件内容
    let text = "<h1>Handsome!</h1>";
    // 将内容转换为blob对象
    let blob = new Blob([text], {type: 'text/plain'});

    // 创建a标签，href属性指定文件的url连接，download属性指定下载的文件名称
    const a = document.createElement("a");
    a.href = URL.createObjectURL(blob);
    a.download = "a.html";

    const btn = document.querySelector("button");

    btn.addEventListener("click", function () {
        // 调用a标签的点击实现，实现文件下载
        a.click();
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

文件上传进度显示