如何用前端JavaScript代码实现文件下载示例？

本文共计1791个文字，预计阅读时间需要8分钟。

在HTML5中，`` 标签新增了 `download` 属性。包含该属性的链接在被点击时，浏览器会以下载文件的方式打开链接，而不是在浏览器中打开。直接使用 `href` 属性上的链接进行下载。例如：

下载百度页面

在 html5 中，a 标签新增了 download 属性，包含该属性的链接被点击时，浏览器会以下载文件方式下载 href 属性上的链接。示例：

<a href="www.baidu.com" rel="external nofollow" download="baidu.html">下载</a>

1. 前端 js 下载实现与示例

通过 javascript 动态创建一个包含 download 属性的 a 元素，再触发点击事件，即可实现前端下载。

代码示例：

function download(href, title) { const a = document.createElement('a'); a.setAttribute('href', href); a.setAttribute('download', title); a.click(); }

说明：

• href 属性设置要下载的文件地址。这个地址支持多种方式的格式，因此可以实现丰富的下载方法。
• download 属性设置了下载文件的名称。但 href 属性为普通链接并且跨域时，该属性值设置多数情况下会被浏览器忽略。