a标签实现文件下载功能

版权声明:所有原创文章未经本人同意不得随意转载,谢谢 https://blog.csdn.net/tangcc110/article/details/83653099

简单的下载示例:

<a href="url"></a>

<img src="url" />

文件下载原理:

       java后台只能做到返回二进制流或文件给前端,最终在前端页面创建一个a,然后触发a的点击事件实现点击下载效果。

接口:

export function exportfile_goods(jsonobj){ // 导出商品文件
  return fetch({
    url:'/api/goods/manager/product/export',
    method: 'post',
    params:jsonobj,
    responseType: 'arraybuffer',
  });
}

调用接口:

exportfile_goods(params).then(res => {
  if(res.data){
    const filename = decodeURI(res.headers['content-disposition'].split(';')[1]).replace('filename=','');
    let blob = new Blob([res.data],{type: "application/vnd.ms-excel"});
    let a = document.createElement('a');
    a.download = filename;
    a.href = URL.createObjectURL(blob);
    a.click();
    URL.revokeObjectURL(a.href); // 释放URL 对象
    // document.body.removeChild(a);//dom元素找不到,报错
  }

后台返回的乱码文件流:

请求方式post/get 都可以

猜你喜欢

转载自blog.csdn.net/tangcc110/article/details/83653099