在做web开发时,免不了需要下载各式各样的文件,后端返回也会有不同的数据格式。
通常情况下会有两种数据格式:
-
协议+ip+端口+服务器资源路径
这种形式的接口呢,是直接访问服务器的静态资源,浏览器会解析该地址,并到服务器中拿到对应的资源。 -
通过调用接口,后端返回二进制流来进行下载
这种在浏览器打开的表现形式是跳转到一个新页面然后提示下载文件,然后关闭页面,返回之前的页面。而上面的形式会直接在浏览器中预览(如果浏览器可以预览:like 图片…)
而实现文件的下载或者展示在浏览器中,就需要根据上面的两种情况来分别处理。
使用a标签下载
该方式是一种非常常见的使用方式,但是在移动端的兼容性可能不好(亲测:uniapp下的h5项目中,红米手机下载的文件名不对,并且后缀变成了bin)
/**
* a标签下载
**/
let tempLink = document.createElement("a");
tempLink.href = filePath
tempLink.style.display = "none";
tempLink.setAttribute("download", fileName