网页js下载图片

在写项目的时候下载图片的时候用的a标签，将图片放到a标签里面很意外点开标签是打开大图并不是下载。然后不停的找帖子
首先还是想用a标签来解决这个问题，方便嘛。然后发现不行。
a标签还有兼容性问题 ios和安卓
pass掉

<a href="文件路径" download="文件名"></a>

第一种解决办法：
通过ali-oss跨域下载文件

/**
*导入ali-oss 
*npm i ali-oss
*/
import OSS from 'ali-oss'


/**
 * 配置信息
 */
const region = 'xxx' // 换成自己的region
const accessKeyId = 'xxx' // 换成自己的accessKeyId
const accessKeySecret = 'xxx' // 换成自己的accessKeySecret
const bucket = 'xxx' // 换成自己的bucket

let client = new OSS({
  region: region,
  accessKeyId: accessKeyId,
  accessKeySecret: accessKeySecret,
  bucket: bucket
})

//file  文件路径
export  function   downLoadFile (file: string){
  const pos = file.lastIndexOf('/');//'/所在的最后位置'
  const fileName = file.substr(pos + 1)//截取文件名称字符串
  let url = client.signatureUrl(fileName)
  let Img = new Image()
  let dataURL = ''
  Img.src = url 
  Img.setAttribute('crossOrigin', 'Anonymous')
  Img.onload = function () {
    let canvas = document.createElement('canvas')
    let width = Img.width
    let height = Img.height
    canvas.width = width
    canvas.height = height
    canvas.getContext('2d').drawImage(Img, 0, 0, width, height)
    dataURL = canvas.toDataURL('image/png')
    let eleLink = document.createElement('a')
    eleLink.download = fileName
    eleLink.style.display = 'none'
    eleLink.href = dataURL
    document.body.appendChild(eleLink)
    eleLink.click()
    document.body.removeChild(eleLink)
  	}
  }

第二种办法：

//file  文件路径
export  function   downLoadFile (file: string){
  const pos = file.lastIndexOf('/');//'/所在的最后位置'
  const fileName = file.substr(pos + 1)//截取文件名称字符串
  file= file.replace(/\\/g, '/');
  const xhr = new XMLHttpRequest();
  xhr.open('GET', file, true);
  xhr.responseType = 'blob';
  //xhr.setRequestHeader('Authorization', 'Basic a2VybWl0Omtlcm1pdA==');
  xhr.onload = () => {
    if (xhr.status === 200) {
      // 获取文件blob数据并保存
      var urlObject = window.URL || window.webkitURL || window;
        var export_blob = new Blob([xhr.response]);
        var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
        save_link.href = urlObject.createObjectURL(export_blob);
        save_link.download = fileName;
        save_link.click();
    }
  };
  xhr.send();
}

下载文件的好帮手

// import { saveAs } from 'file-saver';
// npm install file-saver --save
 //https://github.com/eligrey/FileSaver.js