前端解决浏览器直接打开图片URL,下载问题
本周做的项目中有一个下载图片的功能,拿到后台返回的url,像文件一样,直接window.open,发现图片没有像文件一样被下载,而是重新打开了一个页面展示图片。然后我尝试了转成base64等方法也还是有跨域的问题。后来就想着自己把这个url,发送给Node,node转成数据流返回给我,我再下载。话不多说,上代码:vue前端代码:downZip (urls) {...
·
本周做的项目中有一个下载图片的功能,拿到后台返回的url,像文件一样,直接window.open,发现图片没有像文件一样被下载,而是重新打开了一个页面展示图片。然后我尝试了转成base64等方法也还是有跨域的问题。后来就想着自己把这个url,发送给Node,node转成数据流返回给我,我再下载。话不多说,上代码:
vue前端代码:
downZip (urls) { //urls为图片地址
if (!urls) {
this.fmsErr({ message: '没有下载地址' })
return
}
this.$_post('/picDown', { url: urls }, { responseType: 'blob' }).then(res => {
let blob = res.data
if ('msSaveOrOpenBlob' in navigator) {
navigator.msSaveBlob(blob)
} else {
const timeStamp = new Date() - 0
let elink = document.createElement('a')
elink.download = `${timeStamp}.png` //改一下图片名字为时间戳
elink.style.display = 'none'
elink.href = URL.createObjectURL(blob)
document.body.appendChild(elink)
elink.click()
document.body.removeChild(elink)
}
}).catch(err => {
console.log(err)
this.fmsErr(err)
}).then(() => {
this.loading = false
})
},
node代码:
const express = require('express')
const request = require('request')
const router = express.Router()
router.use('/', function (req, res, next) {
const url = req.body.url
request.get({
url: url,
headers: {
'Content-Type': 'application/octet-stream'
}
}).on('response', function (response) {
this.pipe(res)
})
})
module.exports = router
更多推荐
已为社区贡献2条内容
所有评论(0)