用JS在浏览器中创建下载文件


在JavaScript中,创建并触发文件下载可以通过创建一个临时的``标签并模拟点击它来实现。这里是一个简单的示例代码,展示如何创建一个文本文件并触发下载:


function downloadFile(content, fileName, contentType) {
    // 创建一个Blob对象,表示要下载的文件内容
    const blob = new Blob([content], { type: contentType });

    // 创建一个临时的a标签
    const a = document.createElement("a");
    // 设置a标签的href属性为Blob对象的URL
    a.href = URL.createObjectURL(blob);
    // 设置下载的文件名
    a.download = fileName;
    // 将a标签添加到文档中(可选,因为不真正需要插入到DOM中)
    // document.body.appendChild(a);
    // 模拟点击a标签以触发下载
    a.click();
    // 清理:撤销创建的URL对象
    URL.revokeObjectURL(a.href);
    // 如果a标签被添加到文档中,还需要移除它
    // document.body.removeChild(a);
}

// 使用示例:创建一个名为"example.txt"的文本文件,并包含一些内容
downloadFile("Hello, this is a test file!", "example.txt", "text/plain");

这段代码首先定义了一个`downloadFile`函数,它接受三个参数:`content`(文件内容),`fileName`(文件名),和`contentType`(文件的MIME类型)。函数内部,首先使用`Blob`对象来封装文件内容,然后创建一个``标签,设置其`href`属性为Blob对象的URL(通过`URL.createObjectURL`方法获得),并设置`download`属性为期望的文件名。最后,通过模拟点击``标签来触发下载,并撤销创建的URL对象以避免内存泄漏。

请注意,这个解决方案不依赖于任何外部库或工具,仅使用原生JavaScript和HTML功能。