前端文件下载

a标签download属性实现下载

缺点:只能下载同一个ip,端口下的文件,不能跨域(不论被下载文件的后端允不允许跨域,都不行)

<a download href="#"></a>

后端实现,nodeJs的expressJs框架为例

访问该地址就会打开系统文件夹,提示下载,不会显示要下载的内容

//后端
const path = require('path')
app.get('/', (req, res, next) => {
  res.download(path.join(__dirname, './a.jpg'))
})
前端
<a href="localhost:3000/">点我下载</a>

Blob实现下载

可以跨域(前提是允许跨域,若被下载文件的后端做了特殊处理,或不许跨域,这种方法仍然不能下载)

function (url) {
  const xhr = new XMLHttpRequest()
  xhr.open('GET', url)
  //将文件以二进制对象(blob)形式返回
  xhr.responseType = 'blob'
  xhr.send()
  xhr.onload = function() {
    //文件的二进制对象
    const blobFile = xhr.response

前端文件下载

    //通过URL.createObjectURL()就可以把文件转换成本域名(同ip,端口)下的路径
    let blobUrl = URL.createObjectURL(blobFile)
    console.log(blobUrl);

前端文件下载

    //现在在同ip,端口下了,不跨域,就可以用原始的a标签的download了
    let eleA = document.createElement('a')
    eleA.setAttribute('href', blobUrl)
    eleA.setAttribute('download', '')
    //这就生成一个标签,可以append到html*点击下载。也可以直接帮人点击
    //eleA.click()
  }
}

除了图片,其他类型文件也可以

上一篇:SSM实现数据库增删查改操作


下一篇:2021推荐现行建筑设计施工组织管理及质量验收标准规范大全新版(共6份,987M)