黑马程序员技术交流社区

标题: 【上海】a标签跨域下载 [打印本页]

作者: 透露姓名的网民 时间: 2020-2-13 11:28
标题: 【上海】a标签跨域下载
场景：之前项目中的一个文件上传后下载的需求，后端是把文件存在文件服务器，然后返回给前端一个文件地址
拿到url后使用a标签下载，但是对于文件是图片，.txt或者 .pdf这些浏览器可以直接打开的文件，没有下载，而是直接在当前页面打开了，原因是因为url不是同源的
MDN中说a标签的download的属性仅适用于同源URLs，但是它又说可以使用blob:URLs和data:URLs的形式。
1. 下面是使用blob:URLs和data:URLs来下载图片的代码
//  data: URLs方式
downloadByData (url) {
  let image = new Image()
  image.setAttribute('crossOrigin', 'anonymous')
  image.src = url
  image.onload = () => {
let canvas = document.createElement('canvas')
canvas.width = image.width
canvas.height = image.height
let ctx = canvas.getContext('2d')
ctx.drawImage(image, 0, 0, image.width, image.height)
let ext = image.src.substring(image.src.lastIndexOf('.')+1).toLowerCase()
let dataURL = canvas.toDataURL('image/' + ext)
download(dataURL)
  }
},
//  blob: URLs方式
downloadByBlob (url) {
  let image = new Image()
  image.setAttribute('crossOrigin', 'anonymous')
  image.src = url
  image.onload = () => {
let canvas = document.createElement('canvas')
canvas.width = image.width
canvas.height = image.height
let ctx = canvas.getContext('2d')
ctx.drawImage(image, 0, 0, image.width, image.height)
canvas.toBlob((blob) => {
   let url = URL.createObjectURL(blob)
   download(url)
   // 用完释放URL对象
   URL.revokeObjectURL(url)
})
  }
},
download (href, name = 'pic') {
  let eleLink = document.createElement('a')
  eleLink.download = name
  eleLink.href = href
  eleLink.click()
  eleLink.remove()
}
data: URLs方式是先创建一个图片，然后用canvas绘制该图片，然后使用canvas.toDataURL获得Data URLs
blob: URLs方式也差不多，使用canvas.toBlob得到blob,然后使用URL.createObjectURL创建URL对象
但是上面的方法对于txt和pdf文件就不行了
2. 从服务器get文件的blob数据
直接通过ajax请求，get到文件的blob数据，然后使用blob:URLs的形式下载
downloadByGetBlob (url) {
  axios.get(url, {responseType: 'blob'}).then(res => {
let blob = res.data
let url = URL.createObjectURL(blob)
download(url)
// 用完释放URL对象
URL.revokeObjectURL(url)
  })
}
复制代码这种方式需要注意跨域问题，需要后端服务器支持
3. 另外，也可以通过配置nginx反向代理
location /images {
  proxy_redirect  off;
  proxy_pass  https://www.yourfile.com;
}
作者：浇花君
链接：https://juejin.im/post/5c3c0775e51d45522160f5bc
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

作者: xiaowang66 时间: 2020-2-13 17:19
加油哦

作者: 梦缠绕的时候 时间: 2020-2-13 17:24
太厉害了大家

作者: 小影姐姐 时间: 2020-2-13 17:50

作者: 放荡的人生 时间: 2020-2-13 17:55
我在点赞，你呢？加油！

作者: 晨大喵 时间: 2020-2-13 18:03
加油加油~

作者: 魔都黑马少年梦 时间: 2020-2-13 18:19
一起成长

作者: xiaowang66 时间: 2020-2-20 16:47
加油

作者: 放荡的人生 时间: 2020-4-9 17:07
够够的棒

作者: 小影姐姐 时间: 2020-4-9 17:13
加油同学,加油黑马！

作者: 小影姐姐 时间: 2020-4-9 17:18
努力！奋斗！

作者: 晨大喵 时间: 2020-4-9 17:18
加油加油

作者: xiaowang66 时间: 2020-4-9 17:48

作者: 放荡的人生 时间: 2020-4-23 17:12
加油

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2