美文网首页
Vue 实现文件的下载(转载)

Vue 实现文件的下载(转载)

作者: 中羽 | 来源:发表于2021-01-21 20:24 被阅读0次

    学习 2020-4-29 

    610阅读8点赞0评论

    实现文件的上传需要三步,那么实现文件的下载呢?

    也是三步哟

      第一步:获取文件的 fileId (或者别的什么的,总之应该是代表这个文件的东西),各家后台需要的都不一样

      第二步:调用接口

    this.$http({

    url:this.HOST + api.download,

    method:'post',

    params:{

    fileId:fileId //此处上传第一步获取到的 fileid

    },

    responseType:'arraybuffer' //此处注意请求头

    }).then(function(res){

    var this = that

    var fileName = that.files.name //此处获取文件名称

    that.download(res.data,fileName) //此处跳转到第三步

    })

    第三步:处理返回值,并下载

    download (data,fileName) {

    if (!data) {

    return

    }

    let url = window.URL.createObjectURL(new Blob([data])) //创建下载链接

    let link = document.createElement('a') //创建a标签

    link.style.display = 'none'  //将a标签隐藏

    link.href = url  //给a标签添加下载链接

    link.setAttribute('download', fileName) // 此处注意,要给a标签添加一个download属性,属性值就是文件名称 否则下载出来的文件是没有属性的,空白白

    document.body.appendChild(link)

    link.click()  //执行a标签

    }

    原地址 https://www.bilibili.com/read/cv5826555/

    相关文章

      网友评论

          本文标题:Vue 实现文件的下载(转载)

          本文链接:https://www.haomeiwen.com/subject/nfndzktx.html