告别`javascript:downfile()`误区：前端JavaScript文件下载的N种正确姿势295

这是最基础也是最常用的文件下载方法，尤其适用于下载服务器上已存在的静态文件。<a href="/path/to/your/" download="我的文件.pdf">下载PDF文件</a>
<a href="/" download>下载图片</a>

工作原理：

`href`属性指向要下载文件的URL。
`download`属性告诉浏览器，这个链接不是要导航到新页面，而是要下载文件。它的值是建议的文件名（可选，如果省略，浏览器会尝试从URL中获取文件名）。

优势：

简单易用，无需JavaScript。
适用于各种类型的文件。

局限性：

对于跨域资源，`download`属性通常只会触发导航到该资源而不是下载。
无法直接处理浏览器端动态生成的数据。

2. 动态生成数据下载：Blob 对象与 `()`

当我们需要在浏览器端动态生成内容（例如用户输入的文本、Canvas绘制的图片、从API获取的二进制数据），并将其保存为文件时，`Blob`对象和`()`就是我们的明星组合。function downloadTextFile(filename, text) {
const blob = new Blob([text], { type: 'text/plain' }); // 创建一个Blob对象
const url = (blob); // 为Blob对象创建一个临时URL
const a = ('a'); // 创建一个a标签
= url; // 将a标签的href设置为临时URL
= filename; // 设置下载的文件名
(a); // 将a标签添加到文档中（确保可点击）
(); // 模拟点击
(a); // 下载完成后移除a标签
(url); // 释放URL对象，避免内存泄漏
}
// 示例：下载一个txt文件
downloadTextFile('', '你好，这是一个动态生成的文本文件！');
// 示例：下载 Canvas 图片 (假设canvasId是你的canvas元素ID)
function downloadCanvasAsImage(canvasId, filename = '') {
const canvas = (canvasId);
if (!canvas) return;
(blob => { // 将canvas内容转为Blob
if (!blob) return;
const url = (blob);
const a = ('a');
= url;
= filename;
(a);
();
(a);
(url);
}, 'image/png'); // 指定图片类型
}
// downloadCanvasAsImage('myCanvas', '我的画作.png');

当文件位于服务器端，尤其是需要鉴权、动态生成或文件过大不适合直接在前端处理时，通常会由前端发起请求，服务器返回文件流并指示浏览器下载。// 使用fetch API下载文件
async function downloadFileFromServer(url, filename = 'downloaded_file') {
try {
const response = await fetch(url);
if (!) {
throw new Error(`HTTP error! status: ${}`);
}
const blob = await (); // 将响应体解析为Blob

// 接下来与Blob下载方法相同
const objUrl = (blob);
const a = ('a');
= objUrl;
= filename; // 可以从响应头Content-Disposition获取文件名
(a);
();
(a);
(objUrl);

} catch (error) {
('下载文件失败:', error);
}
}
// 示例：从服务器下载一个文件
// downloadFileFromServer('/api/download/report', '年度报告.xlsx');