• 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;
        }
  • 相关阅读:
    列表
    Lambda表达式
    委托
    泛型(二)
    泛型(一)
    继承
    object类
    linux 命令补全包
    记一次 mysql 安装完成后启动报错 且 日志为空
    nginx 下配置https 访问提示下载文件 解决方法
  • 原文地址:https://www.cnblogs.com/xtjatswc/p/11345584.html
Copyright © 2020-2023  润新知