js解決跨域下載文件


之前用的是a標簽的方式,同源是沒有問題的,但一跨域就不行了,試了其它方法,不是報跨域錯誤,就是在當前頁面打開文件,體驗相當不好。

data = data.replace(/\\/g, '/');
var aLink = document.createElement('a');
aLink.download = data.split('/')[data.split('/').length - 1];
aLink.href = data;
aLink.click();

最終解決方案:

    /**
     * 獲取頁面文件名
     * @param url 文件url
     */
    function downloadUrlFile(url) {
      url= url.replace(/\\/g, '/');
      const xhr = new XMLHttpRequest();
      xhr.open('GET', url, true);
      xhr.responseType = 'blob';
      //xhr.setRequestHeader('Authorization', 'Basic a2VybWl0Omtlcm1pdA==');
      xhr.onload = () => {
        if (xhr.status === 200) {
          // 獲取文件blob數據並保存
          var fileName = getFileName(url);
          saveAs(xhr.response, fileName);
        }
      };

      xhr.send();
    }
    
    /**
     * URL方式保存文件到本地
     * @param data 文件的blob數據
     * @param name 文件名
     */
    function saveAs(data, name) {
        var urlObject = window.URL || window.webkitURL || window;
        var export_blob = new Blob([data]);
        var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
        save_link.href = urlObject.createObjectURL(export_blob);
        save_link.download = name;
        save_link.click();
    }
    
    /**
     * 根據文件url獲取文件名
     * @param url 文件url
     */
    function getFileName(url) 
    {
        var num = url.lastIndexOf('/')+1
        var fileName = url.substring(num)
        //把參數和文件名分割開
        fileName = decodeURI(fileName.split("?")[0]);
        return fileName;
    }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM