vue不同下载

//下载图片地址和图片名

export const downloadIamge =(imgsrc,name) =>{ 
    var image = new Image();
    // 解决跨域 Canvas 污染问题
    image.setAttribute("crossOrigin", "anonymous");
    image.onload = function() {
      var canvas = document.createElement("canvas");
      canvas.width = image.width;
      canvas.height = image.height;
      var context = canvas.getContext("2d");
      context.drawImage(image, 0, 0, image.width, image.height);
      var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
    
      var a = document.createElement("a"); // 生成一个a元素
      var event = new MouseEvent("click"); // 创建一个单击事件
      a.download = name || "photo"; // 设置图片名称
      a.href = url; // 将生成的URL设置为a.href属性
      a.dispatchEvent(event); // 触发a的单击事件
    };
   return image.src = imgsrc;
  }

2 excel的下载

 downloadExcel({
          taskId:this.$route.query.taskId
        }).then((data=>{
          let regFileNames = data.headers['content-disposition'].match(/=(.*)$/)[1] //获取到Content-Disposition; 截取=后面的文件名称
          let fileName = window.decodeURI(regFileNames, "UTF-8");
            const blob = new Blob([data.data],{type:'application/vnd.ms-excel'})
            if ('download' in document.createElement('a')) {
              const elink = document.createElement('a')
              elink.download = fileName
              elink.style.display = 'none'
              elink.href = URL.createObjectURL(blob)
              document.body.appendChild(elink)
              elink.click()
              URL.revokeObjectURL(elink.href)
              document.body.removeChild(elink)
            } else {
              navigator.msSaveBlob(blob,fileName)
            }
        }))
    },

3 下载图片流

 下载图片流
      down(){
        let that=this
       SettlementImag(this.orderId).then(res=>{
        return 'data:image/jpeg;base64,' + btoa(
                new Uint8Array(res.data)
                  .reduce((data, byte) => data + String.fromCharCode(byte), '')
              );
      }).then(data => {
        this.handleDownloadQrIMg(data,that.tlementData.orderNo+'结算单')
      })
      },
      //qrBase64是后台传回来的base64数据
      handleDownloadQrIMg(qrBase64,fileName) {
        // 这里是获取到的图片base64编码,这里只是个例子哈，要自行编码图片替换这里才能测试看到效果
        const imgUrl = qrBase64
        // 如果浏览器支持msSaveOrOpenBlob方法（也就是使用IE浏览器的时候），那么调用该方法去下载图片
        if (window.navigator.msSaveOrOpenBlob) {
          const bstr = atob(imgUrl.split(',')[1])
          let n = bstr.length
          const u8arr = new Uint8Array(n)
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n)
          }
          const blob = new Blob([u8arr])
          window.navigator.msSaveOrOpenBlob(blob, fileName + '.' + 'JPEG')
        } else {
          // 这里就按照chrome等新版浏览器来处理
          const a = document.createElement('a')
          a.href = imgUrl
          a.setAttribute('download', fileName)
          a.click()
        }
      },

4 根据url地址下载

export const download = (url) => {
    const isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1
    const isSafari = navigator.userAgent.toLowerCase().indexOf('safari') > -1
    if (isChrome || isSafari) {
        var link = document.createElement('a')
        link.href = url
        if (link.download !== undefined) {
            link.download = url
        }
        if (document.createEvent) {
            var e = document.createEvent('MouseEvents')
            e.initEvent('click', true, true)
            link.dispatchEvent(e)
            return true
        }
    }
    if (url.indexOf('?') === -1) {
        url += '?download'
    }
    window.open(url, '_self')
    return true
}

5url下载PDF文件（先转文件流再下载）

 downloadPdf(url){
        this.$http({
        url: url,
        method: "get",
        params: "",
        responseType: 'blob'
      }).then(( res ) => {
       const blob = new Blob([res.data], { type: 'application/pdf' }) // 此处type根据你想要的
       const elink = document.createElement('a')
              elink.download = "p"
              elink.style.display = 'none'
              elink.href = URL.createObjectURL(blob)
              document.body.appendChild(elink)
              elink.click()
              URL.revokeObjectURL(elink.href)
              document.body.removeChild(elink)
      
      })
     },