标签：文件 跨域 eleA 前端 xhr download 下载

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()
  }
}

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

标签：文件,跨域,eleA,前端,xhr,download,下载
来源： https://www.cnblogs.com/Lilc20201212/p/15861143.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。