前端常用下载方法

window.open不能下载text和image等文件 使用blod支持各种文件下载

单个图片下载

function downloadImg(url, name) {
  let image = new Image()
  image.setAttribute('crossOrigin', 'anonymous')
  image.src = url
  image.onload = () => {
    let canvas = document.createElement('canvas')
    canvas.width = image.width
    canvas.height = image.height
    let ctx = canvas.getContext('2d')
    ctx.drawImage(image, 0, 0, image.width, image.height)
    canvas.toBlob(blob => {
      let url = URL.createObjectURL(blob)
      download(url, name)
      // 用完释放URL对象
      URL.revokeObjectURL(url)
    })
  }
}

function download(href, name) {
  let eleLink = document.createElement('a')
  eleLink.download = name
  eleLink.href = href
  eleLink.click()
  eleLink.remove()
}

通用下载方法

import { saveAs } from 'file-saver'

export function download(url, params, filename, config) {
  return service.post(url, params, {
    transformRequest: [(params) => { return tansParams(params) }],
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    responseType: 'blob',
    ...config
  }).then(async (data) => {
    const isBlob = blobValidate(data);
    if (isBlob) {
      const blob = new Blob([data])
      saveAs(blob, filename)
    } else {
      const resText = await data.text();
      const rspObj = JSON.parse(resText);
      const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
      Message.error(errMsg);
    }
  }).catch((r) => {
    console.error(r)
  })
}

支持各种格式文件下载

export function download(fileStream, fileName) {
  const xhr = new XMLHttpRequest();
  xhr.open("GET", fileStream, true);
  xhr.responseType = "blob";
  xhr.onload = function () {
    if (this.status === 200) {
      const blob = new Blob([this.response]);
      const blobUrl = window.URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = blobUrl;
      a.download = fileName ? fileName : "file";
      a.click();
      window.URL.revokeObjectURL(blobUrl);
    }
  };
  xhr.send();
}