js 文件下载 file-download

js 文件下载 file-download

1.自定义xml请求

let xhr = new XMLHttpRequest()

    xhr.open('GET', url, true)
    xhr.withCredentials = !!false

    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    xhr.setRequestHeader('Access-Control-Allow-Headers', '*')
    xhr.responseType = 'blob'
    xhr.onload = () => {
        let ctx = xhr.response
        let blob = new Blob([ctx])
        let nameArray = url.split('.')
        let typeIndex = nameArray.length - 1
        if ('msSaveOrOpenBlob' in navigator) {
            //兼容IE
            window.navigator.msSaveOrOpenBlob(blob, fileName + '.' + nameArray[typeIndex)
        } else {
            let aLink = document.createElement('a')
            aLink.download = fileName + '.' + nameArray[typeIndex]
            aLink.style.display = 'none'
            aLink.href = URL.createObjectURL(blob)
            document.body.appendChild(aLink)
            aLink.click()
            document.body.removeChild(aLink)
        }
    }
    // 终止请求
    xhr.abort()
    // 发送请求
    xhr.send(null)

注意：其中 xhr.abort() 可以中止正在进行的请求。用法如下：

xhr.onreadystatechange = function () {};  //事件响应函数
xhr.abort();  //中止请求

本人在创建自定义请求时，存在跨域问题，添加上 xhr.abort()，可以解决跨域问题，其中原理不是很明确，有知道的大佬，希望可以解释下，多谢。

2.使用现成的下载插件 js-file-downloader

js-file-download连接

使用方法

npm install js-file-downloader --save 

import JsFileDownloader from 'js-file-downloader';

const fileUrl = 'http://...';

new JsFileDownloader({ 
    url: fileUrl
  })
  .then(function () {
    // Called when download ended
  })
  .catch(function (error) {
    // Called when an error occurred
  });

参数有

timeout: 40000,  // 超时设置
 headers: [], // 请求头部
 forceDesktopMode: false, 
 autoStart: true,
 withCredentials: false,
 method: 'GET',
 nameCallback: name => name,  // 处理文件名称
 contentType: 'application/x-www-form-urlencoded',
 body: null,  // 参数
 nativeFallbackOnError: false,
 contentTypeDetermination: false

还有其他的下载插件，各位可以自行借鉴！！