前言

用户经常需要在点击某个按钮或者链接后完成对文件的下载，那么在前端下载到底是怎么实现的呢？

思考：当用户进行点击后，必然会向后端发送请求，后端再返回数据给前端，前端通过一系列处理完成下载。因此，这本质上仍然是数据的处理问题。对于前端而言，我们需要考虑的是：

后端返回的是什么？
前端如何处理数据？

当后端返回链接时

当后端返回的是一个直接访问就可以下载的链接时(可以在浏览器地址栏访问该链接查看效果)

前端如何处理：a标签的download属性

注意：链接必须同源，不支持跨域

 < a href = "同源链接" download = "文件名> 点击下载 </a>
复制代码

当后端返回数据时

当后端返回数据（例如json）时，需要将数据写入文件，再利用Blob对象进行下载。下面以返回json数据为例：

const onClick = () => {                   // 点击事件
    getData(urlParam).then((res) => {    // 返回数据
            const content = JSON.stringify(res)； // JSON数据转换为为字符串
            const blob = new Blob([content], { type: 'application/json,charset=utf-8' }) // new Blob对象，type可选
            const url = window.URL.createObjectURL(blob);   // new blobUrl对象
            const link = document.createElement('a');       // 生成链接
            link.href = url;
            link.setAttribute('download', '文件名');
            document.body.appendChild(link); 
            link.click();                      // 触发链接点击事件，完成自动下载
            document.body.removeChild(link);   //click之后移除链接
        })
}
复制代码