多种方法实现各类文件下载 持续跟新

web图片下载

1、form.onsubmit方法

利用form表单onsubmit静态提交
  downFile(url, value) {
    let domForm = document.createElement('form'),
    npt = document.createElement('input')
    domForm.appendChild(npt)
    
    npt.setAttribute('name', 'imageId')
    npt.setAttribute('value', value)
    domForm.setAttribute('method', 'get')
    domForm.setAttribute('action', url)
    domForm.style.display = 'none'
    document.body.appendChild(domForm)
      domForm.submit()
    document.body.removeChild(domForm)
   }

2、canvas.toDataURL("image/png")方法

利用Image对象为浏览器缓存一张图片，创建canvas将其转为base64进行drawImage绘制截取，然后创建a标签，利用download固有属性进行下载

 downFile(imgsrc, name) {
    let image = new Image();
    image.setAttribute("crossOrigin", "anonymous")// 解决跨域 Canvas 污染问题
    image.onload = function() {
      let canvas = document.createElement("canvas")
      canvas.width = image.width
      canvas.height = image.height
      
      let context = canvas.getContext("2d")
      context.drawImage(image, 0, 0, image.width, image.height)
      let url = canvas.toDataURL("image/png"), //得到图片的base64编码数据
          a = document.createElement("a"),
          event = new MouseEvent("click")
      a.download = name || "photo"
      a.href = url
      a.dispatchEvent(event)
    };
    image.src = imgsrc
  }

3、a标签download属性

 function downHandle(fileName, url) {
            if ('download' in document.createElement('a')) {
      　　let link = document.createElement('a')
      　　link.setAttribute('download', `${ fileName }`);
      　　link.style.display = 'none'
     　　 link.href = url
     　　 document.body.appendChild(link)
      　　link.click()
     　　 document.body.removeChild(link)
   　　} else {
   　　   navigator.msSaveBlob(blob, fileName)
   　　}
        }