关于前端:JS-实现图片文件视频时直接下载而不是打开预览

//  下载办法 download.js

function download(data, strFileName, strMimeType) {
  var self = window, // this script is only for browsers anyway...
    u = 'application/octet-stream', // this default mime also triggers iframe downloads
    m = strMimeType || u,
    x = data,
    D = document,
    a = D.createElement('a'),
    z = function(a) {return String(a)
    },
    B = self.Blob || self.MozBlob || self.WebKitBlob || z,
    BB = self.MSBlobBuilder || self.WebKitBlobBuilder || self.BlobBuilder,
    fn = strFileName || 'download',
    blob,
    b,
    ua,
    fr

  //if(typeof B.bind === 'function'){B=B.bind(self); }

  if (String(this) === 'true') {//reverse arguments, allowing download.bind(true, "text/xml", "export.xml") to act as a callback
    x = [x, m]
    m = x[0]
    x = x[1]
  }

  //go ahead and download dataURLs right away
  if (String(x).match(/^data\:[\w+\-]+\/[\w+\-]+[,;]/)) {return navigator.msSaveBlob // IE10 can't do a

        
  文件名称：
        
  文件大小：
        
  下载声明：本站部分资源来自于网络收集，若侵犯了你的隐私或版权，请及时联系我们删除有关信息。
        
 下载地址：
    
, only Blobs:
      ? navigator.msSaveBlob(d2b(x), fn)
      : saver(x) // everyone else can save dataURLs un-processed
  } //end if dataURL passed?

  try {blob = x instanceof B ? x : new B([ x], {type: m})
  } catch (y) {if (BB) {b = new BB()
      b.append([x])
      blob = b.getBlob(m) // the blob
    }
  }

  function d2b(u) {var p = u.split(/[:;,]/),
      t = p[1],
      dec = p[2] == 'base64' ? atob : decodeURIComponent,
      bin = dec(p.pop()),
      mx = bin.length,
      i = 0,
      uia = new Uint8Array(mx)

    for (i; i < mx; ++i) uia[i] = bin.charCodeAt(i)

    return new B([uia], {type: t})
  }

  function saver(url, winMode) {if ('download' in a) {//html5 A

        
  文件名称：
        
  文件大小：
        
  下载声明：本站部分资源来自于网络收集，若侵犯了你的隐私或版权，请及时联系我们删除有关信息。
        
 下载地址：
    
      a.href = url
      a.setAttribute('download', fn)
      a.innerHTML = 'downloading...'
      D.body.appendChild(a)
      setTimeout(function() {a.click()
        D.body.removeChild(a)
        if (winMode === true) {setTimeout(function() {self.URL.revokeObjectURL(a.href)
          }, 250)
        }
      }, 66)
      return true
    }

    //do iframe dataURL download (old ch+FF):
    var f = D.createElement('iframe')
    D.body.appendChild(f)
    if (!winMode) {
      // force a mime that will download:
      url = 'data:' + url.replace(/^data:([\w\/\-\+]+)/, u)
    }

    f.src = url
    setTimeout(function() {D.body.removeChild(f)
    }, 333)
  } //end saver

  if (navigator.msSaveBlob) {// IE10+ : (has Blob, but not a

        
  文件名称：
        
  文件大小：
        
  下载声明：本站部分资源来自于网络收集，若侵犯了你的隐私或版权，请及时联系我们删除有关信息。
        
 下载地址：
    
 or URL)
    return navigator.msSaveBlob(blob, fn)
  }

  if (self.URL) {
    // simple fast and modern way using Blob and URL:
    saver(self.URL.createObjectURL(blob), true)
  }
  else {// handle non-Blob()+non-URL browsers:
    if (typeof blob === 'string' || blob.constructor === z) {
      try {return saver('data:' + m + ';base64,' + self.btoa(blob))
      } catch (y) {return saver('data:' + m + ',' + encodeURIComponent(blob))
      }
    }

    // Blob but not URL:
    fr = new FileReader()
    fr.onload = function(e) {saver(this.result)
    }
    fr.readAsDataURL(blob)
  }
  return true
} /* end download() */

export default download

utils 引入

import download from './download'

/*
        * 应用 download.js 强制浏览器下载图片、视频等文件
        * @param {any} url url 链接地址
        * @param {any} strFileName 文件名
        * @param {any} strMimeType 文件类型
        * dzl
        * 2020 年 5 月 8 日
         */
export function downloadfile(url, strFileName, strMimeType) {
  var xmlHttp = null
  if (window.ActiveXObject) {
    // IE6, IE5 浏览器执行代码
    xmlHttp = new ActiveXObject('Microsoft.XMLHTTP')
  }
  else if (window.XMLHttpRequest) {
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlHttp = new XMLHttpRequest()}
  //2. 如果实例化胜利，就调用 open（）办法：if (xmlHttp != null) {xmlHttp.open('get', url, true)
    xmlHttp.responseType = 'blob' // 要害
    xmlHttp.send()
    xmlHttp.onreadystatechange = doResult // 设置回调函数
  }
  function doResult() {if (xmlHttp.readyState == 4) {
      // 4 示意执行实现
      if (xmlHttp.status == 200) {
        //200 示意执行胜利
        download(xmlHttp.response, strFileName, strMimeType)
      }
    }
  }
}

// 调用

 import {downloadfile} from './utils'
 downloadfile(url, name)
//url 必传