JavaScript中的文件下载

在JavaScript中，实现文件下载的功能可以通过多种方式实现，以下是一些常见的方法：

方法 1：使用HTML5的<a>标签

如果你已经有了一个文件的URL，可以简单地使用一个 <a> 标签并设置download属性。这可以通过JavaScript动态创建：

function downloadFile(url, fileName) {
    const a = document.createElement("a");
    a.href = url;
    a.download = fileName || 'download';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}

// 使用方法
downloadFile('http://example.com/file.pdf', 'MyFile.pdf');

方法 2：使用Blob和Object URL

如果你需要下载的数据是在客户端生成的（例如，从Canvas或者生成的文本），你可以使用Blob对象：

function downloadBlob(data, fileName, mimeType) {
    const blob = new Blob([data], {
        type: mimeType
    });
    const url = window.URL.createObjectURL(blob);
    downloadFile(url, fileName);
    setTimeout(() => window.URL.revokeObjectURL(url), 1000);
}

// 使用方法
downloadBlob('Hello, world!', 'hello.txt', 'text/plain');

方法 3：使用Fetch API

如果你需要从远程服务器下载文件，可以使用Fetch API来获取文件，然后使用Blob进行下载：

function fetchAndDownload(url, fileName) {
    fetch(url)
        .then(response => response.blob())
        .then(blob => {
            const url = window.URL.createObjectURL(blob);
            downloadFile(url, fileName);
            setTimeout(() => window.URL.revokeObjectURL(url), 1000);
        })
        .catch(e => console.error(e));
}

// 使用方法
fetchAndDownload('http://example.com/file.pdf', 'downloaded_file.pdf');

注意事项

• 浏览器的安全限制可能会阻止某些类型的下载，特别是在没有用户交互的情况下。
• 对于跨域资源的下载，需要确保远程服务器设置了适当的CORS（跨源资源共享）策略。
• 在使用Blob和Object URL时，记得在适当的时候释放URL以避免内存泄漏。