使用 JavaScript 下载文件并自定义文件名

在开发网页应用时，我们经常需要提供文件下载功能。然而，有时候我们希望下载的文件名与服务器返回的文件名不同。本文将介绍如何使用 JavaScript 实现文件下载，并自定义下载文件的文件名。

实现思路

通过使用 JavaScript 的 fetch API，我们可以从服务器获取文件数据，然后使用 Blob 对象和 URL API 创建一个临时的下载链接，最终模拟用户点击以触发文件下载。

步骤

1. 修改 HTML：为下载链接添加 onclick 事件处理程序。
2. 定义 JavaScript 函数：编写处理文件下载逻辑的函数。

具体实现

1. 修改 HTML 代码

首先，修改你的 HTML 代码，为下载链接添加 onclick 事件处理程序，并传递文件的 URL 和自定义的文件名作为参数。

<a href="javascript:void(0)"  onclick="courseDownload('文件地址','文件名')">文件名称</a>

在这个示例中，我们将点击链接时调用 courseDownload 函数，并传递文件的 URL 和自定义的文件名。

2. 定义 JavaScript 函数

接下来，在你的 JavaScript 代码中定义 courseDownload 函数，处理文件下载的逻辑。

function courseDownload(url, filename) {
    event.preventDefault(); // 阻止默认链接行为

    fetch(url)
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok.');
            }
            return response.blob();
        })
        .then(blob => {
            const blobUrl = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = blobUrl;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(blobUrl);
        })
        .catch(error => {
            console.error('There has been a problem with your fetch operation:', error);
        });
}

解释

1. 阻止默认行为：event.preventDefault() 用于阻止链接的默认点击行为。
2. 使用 fetch 获取文件：通过 fetch API 请求文件数据。
3. 处理 Blob 对象：将响应转换为 Blob 对象，创建临时的 Blob URL。
4. 创建临时下载链接：创建一个 <a> 元素，设置其 href 为 Blob URL，download 属性为指定的文件名。
5. 触发下载：将 <a> 元素添加到文档中，模拟点击以触发文件下载，然后移除 <a> 元素并释放 Blob URL。

注意事项

• 确保服务器端返回的文件类型和内容正确，并且支持跨域请求。
• 在调试过程中可以使用浏览器的开发者工具中的控制台，以检查是否有任何错误消息或网络请求问题。

总结

通过上述方法，我们可以在网页应用中实现文件下载，并自定义下载的文件名。这种方法不仅灵活，而且可以很好地满足不同场景下的需求。如果在实现过程中遇到问题，可以检查控制台错误消息或网络请求，以便进一步诊断问题。

希望这篇文章对你有所帮助！如果有任何疑问或建议，欢迎在评论区留言讨论。