本站源码全部测试通过,配有前台及后台演示图,绿色安全,希望能对大家有所帮助!
  • 收藏本站
  • 网站地图
  • 发布源码
  • 首 页
  • app源码
  • 小程序源码
  • VPS/云主机
  • Javascript前端下载后台传来的文件流代码实例
    时间:2020-08-19 11:51:46来源:模板之家 作者:转载大师 下载:20756 次

    前台请求数据:

    url: /app/downloadApp,
    method: get,
    responseType: blob,
    params: data

    设置接收参数格式为responseType: ‘blob,

    downloadFile(res, fileName) {
    if (!res) {
    return
    }
    if (window.navigator.msSaveBlob) { // IE以及IE内核的浏览器
    try {
    window.navigator.msSaveBlob(res, fileName) // res为接口返回数据,这里请求的时候已经处理了,如果没处理需要在此之前自行处理var data = new Blob(res.data) 注意这里需要是数组形式的,fileName就是下载之后的文件名
    // window.navigator.msSaveOrOpenBlob(res, fileName); //此方法类似上面的方法,区别可自行百度
    } catch (e) {
    console.log(e)
    }
    } else {
    let url = window.URL.createObjectURL(new Blob(res))
    let link = document.createElement(a)
    link.style.display = none
    link.href = url
    link.setAttribute(download, fileName)// 文件名
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link) // 下载完成移除元素
    window.URL.revokeObjectURL(url) // 释放掉blob对象
    }
    },
    download(){
    var data = {
    appId:this.appId
    }
    downloadAppAjax(data).then(res => {
    const filename = decodeURI(res.headerscontent-disposition.split(;)1.split(=)1);
    console.log(filename)
    this.downloadFile(res.data,filename)
    })
    }

    这里的downloadAppAjax调用后台接口,请求数据,获取后台返回的数据没有文件名,最后发现在header Content-Disposition属性里 attachment;filename=app.jpg

    所以我们要实现下载自动重命名就需要拿出filename,这里我们使用decodeURI对Content-Disposition属性值进行解码,拿到filename:

    decodeURI(res.headerscontent-disposition.split(;)1.split(=)1);

    拿到文件流和文件名后 接收文件流并创建地址

    let url =window.URL.createObjectURL(new Blob(res))

    接着利用a标签进行下载即可。

    转载请注明来源:Javascript前端下载后台传来的文件流代码实例
    本文永久链接地址:bencandy.php?fid=32&id=16757
    本文标签:

    版权声明:
    —— 本文内容由互联网用户自发贡献, 本站不拥有所有权, 不承担相关法律责任, 如果发现本站有涉嫌抄袭的内容, 欢迎发送邮件至 :
    —— 1034252225@qq.com 举报, 并提供相关证据, 一经查实, 本站将立刻删除涉嫌侵权内容。

    QQ在线客服

    服务热线

    织梦建站咨询