关于js文件下载总结

思路：用ajax 去访问文件地址，通过流文件的形式下载

下面是我自己写的一段，里面的实现参考了js-file-download，url是文件地址,如：http://www.xxxxx.mp4

 axios({
        url,
        headers: {
          'Content-Type': 'application/json; application/octet-stream'
        },
        method: 'get',
        responseType: 'arraybuffer'
      })
        .then((res) => {
          var a = document.createElement('a')
          var blob = new Blob([res.data], { type: 'application/octet-stream' })
          var url =
            window.URL && window.URL.createObjectURL
              ? window.URL.createObjectURL(blob)
              : window.webkitURL.createObjectURL(blob)
          console.log(url)
          var filename = '直播回放.mp4'
          a.href = url
          a.download = filename
          a.click()
          window.URL.revokeObjectURL(url)
        })
        .catch((err) => {})

js-file-download源码：https://github.com/kennethjiang/js-file-download

function downloadFile (data, filename, mime, bom) {

    var blobData = (typeof bom !== 'undefined') ? [bom, data] : [data]

    var blob = new Blob(blobData, { type: mime || 'application/octet-stream' });

    if (typeof window.navigator.msSaveBlob !== 'undefined') {

        // IE workaround for "HTML7007: One or more blob URLs were

        // revoked by closing the blob for which they were created.

        // These URLs will no longer resolve as the data backing

        // the URL has been freed."

        window.navigator.msSaveBlob(blob, filename);

    }

    else {

        var blobURL = (window.URL && window.URL.createObjectURL) ? window.URL.createObjectURL(blob) : window.webkitURL.createObjectURL(blob);

        var tempLink = document.createElement('a');

        tempLink.style.display = 'none';

        tempLink.href = blobURL;

        tempLink.setAttribute('download', filename);



        // Safari thinks _blank anchor are pop ups. We only want to set _blank

        // target if the browser does not support the HTML5 download attribute.

        // This allows you to download files in desktop safari if pop up blocking

        // is enabled.

        if (typeof tempLink.download === 'undefined') {

            tempLink.setAttribute('target', '_blank');

        }



        document.body.appendChild(tempLink);

        tempLink.click();



        // Fixes "webkit blob resource error 1"

        setTimeout(function () {

            document.body.removeChild(tempLink);

            window.URL.revokeObjectURL(blobURL);

        }, 200)

    }

}

 同一个项目的文件下载：

function dowlon(url,fileName){
    const el= document.createElement('a');
    el.setAttribute('href', url);
    el.setAttribute('download', fileName);
    el.style.display = 'none';
    document.body.appendChild(el);
    el.click();
    document.body.removeChild(el);
}