admin 管理员组

文章数量: 887017

本周做的项目中有一个下载图片的功能，拿到后台返回的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

 

本文标签： 浏览器 图片 URL

版权声明：本文标题：前端解决浏览器直接打开图片URL，下载问题 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1726855957h1040334.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。