JavaScript 如何做下载
你有没有遇到过这种情况：在网页上看到一张好看的壁纸，想直接保存到电脑里，却发现右键没有“图片另存为”的选项？或者想把浏览器里的一段表格数据保存成Excel文件，却找不到下载按钮？这时候，前端开发者常用的JavaScript，就能帮我们解决这类问题。
下面就用几个生活化的例子，讲清楚JS做下载的核心方法，不用复杂的代码，普通人也能看懂。
最简单的下载：下载已有的文件
先从最常见的场景说起，比如想下载一张存在服务器上的图片。举个例子，你在某旅游网站看到一张大海的图片，图片地址是https://example.com/sea.jpg，怎么让用户点按钮就能下载？
很多人不知道，HTML里的标签有个隐藏的download属性，专门用来做下载链接。不用写JS，只要给链接加个这个属性，浏览器就会自动触发下载，而不是跳转到图片页面。比如：
`html
`
这里的download后面可以加文件名，方便用户保存。如果没有这个属性，浏览器会直接打开图片，没法下载。这是JS做下载的基础——有时候甚至不用写JS，用原生HTML就能搞定。
进阶玩法：下载自定义内容
有时候我们要下载的不是现成的文件，而是动态生成的内容，比如把你刚写的一段日记保存成TXT，或者把网页上的一段表格数据保存成CSV。这时候就得用JS来“造”一个临时文件，再触发下载。
举个例子，你在网页上写了一段心里话，想保存成文本文件。用JS可以这么做：
- 先把你写的内容转成浏览器能识别的文件格式，比如TXT就是普通的字符串；
用`Blob`（可以理解成“装文件的容器”）把内容包起来；
代码大概是这样：
`javascript
function downloadMyText() {
// 你要下载的内容
const content = "今天去公园散步，看到小猫追蝴蝶，好开心！";
// 把内容转成Blob
const blob = new Blob([content], { type: "text/plain" });
// 造临时链接
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "我的日记.txt";
// 触发下载
a.click();
// 用完释放临时地址
URL.revokeObjectURL(url);
}
`
用户点“保存日记”按钮，就会自动下载这个TXT文件，不用跳转到新页面。这个方法还能用来下载Canvas画的图，比如你用JS做了一张手绘的图，把Canvas转成Blob就能下载成图片。
注意事项：这些坑要避开
虽然JS做下载很简单，但有几个常见的小问题要注意：
- 跨域文件不能直接下载：如果要下载的图片是别人的服务器上的，而且服务器没开跨域权限，用
download属性会失效，浏览器会直接打开图片。这时候要么让服务器配置跨域，要么用后端中转一下； - 大文件别用Blob临时生成：如果要下载1GB以上的大文件，用
URL.createObjectURL会占内存，可能导致页面卡顿，这时候最好用后端生成下载链接，让浏览器直接拉取服务器的文件； - 移动端兼容性：有些旧版手机浏览器，点击临时生成的
标签会没反应，这时候可以把链接的target设为_blank，或者提示用户长按链接保存。
总的来说，JS做下载核心就两个场景：要么用原生标签的download属性下载现成文件，要么用JS生成Blob造临时文件下载自定义内容。不管是下载壁纸、日记还是手绘的图，掌握这两个方法就够用了。