| 属性 | 说明 |
|---|---|
| download | 下载的资源的名称 |
| target | 打开该连接的方式（ _self、_blank） |
| href | 资源的地址（本地、远程地址） |
a标签跳转
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>这是一个a标签下载页面</title> </head> <body> <a href="http://127.0.0.1/html/pg.jpg">下载</a> </body> </html>
a标签下载
- 需要在 href 属性中添加需要下载的文件的地址
- download 属性用于设置下载的文件的名称
download不给值，会使用默认的文件名。
该属性也可以设置一个值来规定下载文件的名称。所允许的值没有限制，浏览器将自动检测正确的文件扩展名并添加到文件 (.img, .pdf, .txt, .html, 等等)。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>这是一个a标签下载页面</title> </head> <body> <a href="http://127.0.0.1/html/pg.jpg" download="123.jpg">下载</a> </body> </html>
不同源地址下载
参考：https://www.jianshu.com/p/461b2b888a21
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>这是一个a标签下载页面</title> </head> <body> <button onclick="onDownload('https://img.zcool.cn/community/02of0fe3hmj6wgj5pdbe8h3237.png','cheng_boy.png')">下载（跨域）</button> <script type="text/javascript"> // filepath: 图片链接 // filename: 需要下载的图片名称 function onDownload(filepath, filename) { const x = new XMLHttpRequest() x.open('GET', filepath, true) x.responseType = 'blob' x.onload = function () { const blob = x.response const url = window.URL.createObjectURL(blob) // 判断是否是IE浏览器 if (window.navigator.msSaveBlob) { try { window.navigator.msSaveBlob(blob, filename) } catch (e) {} } else { const a = document.createElement('a') a.href = url a.download = filename a.click() } } x.send() } </script> </body> </html>