原生js怎么写另存为对话框

原生JavaScript中可以通过以下几种方法来实现另存为对话框：使用Blob对象、使用FileSaver.js库、利用a标签的download属性。 其中，利用Blob对象是最常见和广泛支持的方法。

一、使用Blob对象

Blob对象表示一个不可变的、原始数据的类文件对象。我们可以使用Blob对象来创建文件，并使用URL.createObjectURL方法生成一个临时的URL，然后通过创建一个a标签并模拟点击来触发另存为对话框。

创建Blob对象

Blob对象的构造函数可以接收一个数组参数，这个数组可以包含字符串、ArrayBuffer、ArrayBufferView等类型的对象。通过Blob对象，我们可以创建一个包含任意内容的文件。

生成临时URL

URL.createObjectURL方法可以接收一个Blob对象，并返回一个可用于引用Blob对象的临时URL。

创建a标签并模拟点击

创建一个a标签，设置其href属性为生成的临时URL，并设置其download属性为文件名，然后模拟点击a标签即可触发另存为对话框。

function saveAsFile(content, fileName, contentType) {
    const blob = new Blob([content], { type: contentType });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = fileName;
    document.body.appendChild(a);
    a.click();
    setTimeout(() => {
        document.body.removeChild(a);
        window.URL.revokeObjectURL(url);  
    }, 0); 
}
const text = 'Hello, world!';
saveAsFile(text, 'hello.txt', 'text/plain');

二、使用FileSaver.js库

FileSaver.js是一个专门用于文件保存的库，简化了Blob对象和文件下载的操作。使用FileSaver.js库，可以更方便地实现另存为对话框。

引入FileSaver.js库

可以通过CDN引入FileSaver.js库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>

使用FileSaver.js库

引入库之后，可以直接使用saveAs方法来保存文件。

const text = 'Hello, world!';
const blob = new Blob([text], { type: 'text/plain;charset=utf-8' });
saveAs(blob, 'hello.txt');

三、利用a标签的download属性

HTML5引入了a标签的download属性，允许开发者指定下载文件的名称。通过设置a标签的href属性为文件URL，并设置download属性为文件名，可以触发另存为对话框。

function downloadFile(url, fileName) {
    const a = document.createElement('a');
    a.href = url;
    a.download = fileName;
    document.body.appendChild(a);
    a.click();
    setTimeout(() => {
        document.body.removeChild(a);
    }, 0);
}
const fileUrl = 'https://example.com/file.txt';
downloadFile(fileUrl, 'downloaded_file.txt');

结论

通过上面的几种方法，我们可以轻松地在原生JavaScript中实现另存为对话框。使用Blob对象、利用a标签的download属性、引入FileSaver.js库，都是实现这一需求的有效方式。Blob对象是最常见的方法，FileSaver.js库则提供了一种更简便的实现方式，而a标签的download属性则适用于简单的文件下载场景。

实现细节

Blob对象的详细介绍

Blob（Binary Large Object）是一个表示二进制数据的类文件对象。它可以包含文本、图像、视频等数据。Blob对象的构造函数接收一个数组参数，数组中的每一项都可以是ArrayBuffer、ArrayBufferView、Blob、字符串等类型的数据。

const blob = new Blob(['Hello, world!'], { type: 'text/plain' });

在上述示例中，我们创建了一个包含字符串“Hello, world!”的Blob对象，并指定了MIME类型为"text/plain"。

URL.createObjectURL方法

URL.createObjectURL方法可以接收一个Blob对象，并返回一个可用于引用Blob对象的临时URL。这个临时URL可以作为a标签的href属性值，用于触发文件下载。

const url = URL.createObjectURL(blob);

设置a标签的href和download属性

通过创建一个a标签，并设置其href属性为生成的临时URL，设置download属性为文件名，可以触发另存为对话框。

const a = document.createElement('a');
a.href = url;
a.download = 'hello.txt';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);

清理临时URL

为了避免内存泄漏，需要在下载完成后撤销临时URL。

window.URL.revokeObjectURL(url);

扩展功能

支持不同类型的文件

上述示例中，我们创建了一个包含纯文本的Blob对象。实际上，Blob对象可以包含任意类型的数据，如图像、视频、JSON等。

const json = JSON.stringify({ name: 'John', age: 30 });
const blob = new Blob([json], { type: 'application/json' });
saveAsFile(blob, 'data.json', 'application/json');

处理大文件

当处理大文件时，可以使用File API中的FileReader对象进行分块读取和保存。以下是一个简单的示例，展示了如何分块读取大文件并保存：

function saveLargeFile(file) {
    const chunkSize = 1024 * 1024; // 1 MB
    const fileReader = new FileReader();
    let offset = 0;
    fileReader.onload = function(event) {
        const chunk = event.target.result;
        const blob = new Blob([chunk], { type: file.type });
        saveAs(blob, `chunk_${offset / chunkSize}.bin`);
        offset += chunkSize;
        if (offset < file.size) {
            readNextChunk();
        }
    };
    function readNextChunk() {
        const slice = file.slice(offset, offset + chunkSize);
        fileReader.readAsArrayBuffer(slice);
    }
    readNextChunk();
}
// 使用示例
const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', function(event) {
    const file = event.target.files[0];
    saveLargeFile(file);
});

总结

通过本文的介绍，我们详细探讨了原生JavaScript中实现另存为对话框的方法，包括使用Blob对象、利用a标签的download属性、引入FileSaver.js库。Blob对象是最常见的方法，适用于各种类型的数据，而FileSaver.js库提供了一种更简便的实现方式，a标签的download属性则适用于简单的文件下载场景。通过扩展功能，我们还可以处理不同类型的文件和大文件，进一步提升用户体验。

推荐系统：在项目团队管理中，可以使用研发项目管理系统PingCode和通用项目协作软件Worktile，它们能够有效地提升团队协作和项目管理效率。