js下载文件

js下载文件可以通过a标签的链接直接下载或者请求接口返回文件来下载

a标签的链接直接下载：直接将文件的地址放在a标签里面就能下载了

请求接口返回文件：这个则需要使用js代码转换一下，将后台返回的乱码转化成你想要的文件形式

let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'});//res.data是后台返回的内容
let objectUrl = URL.createObjectURL(blob);
window.location.href = objectUrl;

或者

一定要设置{responseType:'blob'}

this.axios.get("*******" + id,{responseType: 'blob'}).then(res => {
  if (res.status == 200) {
    var downloadElement = document.createElement('a');
    let url = URL.createObjectURL(res.data);
    downloadElement.href = url;
    downloadElement.download = '档案报表.xlsx'; //下载后文件名
    document.body.appendChild(downloadElement);
    downloadElement.click(); //点击下载
    document.body.removeChild(downloadElement); //下载完成移除元素
    window.URL.revokeObjectURL(href);
    this.$Message.success("下载成功");

  } else {
    this.$Message.info("下载失败")
  }
})

通常我们得到后台返给我们文件的链接，就直接用a标签+download属性就可以下载了。

但是在项目中我发现一个问题，就是只有word文档能下载，图片和txt文件只能浏览器预览download属性也不生效。

不知道这是不是bug。

百度查资料说有可能是跨域问题，也有可能是链接为ip地址（可以换成域名）