常见问题之文件下载

591 阅读1分钟

前言

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

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

  • 后端返回的是什么?

  • 前端如何处理数据?

当后端返回链接时

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

前端如何处理: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之后移除链接
        })
}

总结就是:

接口返回的数据 -> 字符串 -> 使用字符串创建blob对象 -> 使用blob对象创建下载链接url -> a标签

至于代码中的Blob、createObjectURL是什么以及怎么使用,请耐心阅读官方文档:

Blbb:developer.mozilla.org/zh-CN/docs/…
createObjectURL:developer.mozilla.org/zh-CN/docs/…