跳转链接 下载链接 自定义处理 XMLHttpRequest 对象来发起 HTTP 请求

import {
  saveAs
} from 'file-saver';

/**
 * @description:  JavaScript 动态生成的 a 标签进行下载，
 * * * * * * * * *可以使用 XMLHttpRequest 对象来发起 HTTP 请求，并在请求完成后获取响应数据
 * @param {*} url 请求地址
 * @param {*} isOpenNew 是否打开新标签页
 * @param {*} resType 请求类型
 * @param {*} jsonData POST请求的body体
 * @return {*}
 */
export function openUrl(url, isOpenNew, resType = "GET", jsonData = "") {
  const xhr = new XMLHttpRequest();
  xhr.open(resType, url, true);
  xhr.responseType = 'blob'; // 表示返回的数据是二进制流对象
  // 携带请求头
  // h5测试
  if (process.env.NODE_ENV == "development") {
    xhr.setRequestHeader(
      "Authorization",
      `Bearer ${process.env.VUE_APP_API_TOKEN}`
    );
    xhr.setRequestHeader(
      "X-Oars-Token",
      `${process.env.VUE_APP_API_TOKEN}`
    );
  } else {
    // 上线阶段,自动获取登录的 token localStorage Key:  IDAAS_BEARER_TOKEN
    let IDAAS_BEARER_TOKEN = localStorage.getItem("IDAAS_BEARER_TOKEN") || "";
    if (IDAAS_BEARER_TOKEN) {
      xhr.setRequestHeader(
        "Authorization",
        `Bearer ${IDAAS_BEARER_TOKEN}`
      );
    }

  }

  // 在 handleDownloadSuccess 中获取响应数据并创建下载链接
  const handleDownloadSuccess = function (event) {
    const blob = xhr.response;
    console.log('blob', blob)
    const downloadUrl = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = downloadUrl;
    if (isOpenNew) {
      link.setAttribute('target', '_blank')
    }
    // link.download = 'file.pdf';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(downloadUrl);
  }

  // handleStateChange 中判断请求的状态，并处理请求失败的情况
  const handleStateChange = function (event) {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        // 原生数据流处理
        // 请求成功，处理响应数据

        console.log('xhr.response', xhr.response);
        // new FileReader() 解析，得到的字符串如何转成对象
        // 创建一个 FileReader 对象
        const reader = new FileReader();
        // 当读取完成时执行的回调函数
        reader.onload = function () {
          // 读取结果是一个字符串
          const result = reader.result;
          // console.log(result);
          // console.log(result.indexOf('"code":-1'))
          // 处理请求采购但是"code":-1'报错
          if (result.indexOf('"code":-1') != -1) {
            window.alert(`下载失败！${result}`);
          } else {
            // 获取文件名
            // getResponseHeader() 函数获取响应头中的 Content-Disposition 字段，该字段包含文件名
            var contentDisposition = xhr.getResponseHeader('content-disposition');
            var fileName = '';
            if (contentDisposition && contentDisposition.indexOf('attachment') !== -1) {
              var fileNameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
              var matches = fileNameRegex.exec(contentDisposition);
              if (matches != null && matches[1]) {
                fileName = decodeURIComponent(matches[1].replace(/['"]/g, ''));
              }
            }
            // a标签模式
            // const blob = xhr.response;
            // const downloadUrl = URL.createObjectURL(blob);
            // const link = document.createElement('a');
            // link.setAttribute('href', downloadUrl)
            // link.setAttribute('id', 'd2admin-link-temp')
            // link.download = fileName || "未命名.xlsx";
            // if (isOpenNew) {
            //   link.setAttribute('target', '_blank')
            // }
            // document.body.appendChild(link);
            // link.click();
            // document.body.removeChild(link);
            // URL.revokeObjectURL(downloadUrl);

            // openUrlBase(url, isOpenNew);

            // let a = document.createElement('a')
            // a.setAttribute('href', url)
            // if (isOpenNew) {
            //   a.setAttribute('target', '_blank')
            // }
            // a.setAttribute('id', 'd2admin-link-temp')
            // document.body.appendChild(a)
            // // error事件监听器
            // a.addEventListener('error', handleDownloadError);
            // console.log('22222', 22222)
            // a.click()
            // document.body.removeChild(a)

            // file-saver处理
            const blob = xhr.response;
            // console.log('fileName', fileName)
            // saveAs没有打开新标签页方法
            // 打开新标签页方法使用a标签模式
            saveAs(blob, fileName || "未命名.xlsx");
            // 触发两次下载
            // let urlCopy = URL.createObjectURL(blob);
            // window.open(urlCopy);
          }

        };
        // 读取 Blob 对象的内容
        reader.readAsText(xhr.response);
        return
        // 获取文件名
        // getResponseHeader() 函数获取响应头中的 Content-Disposition 字段，该字段包含文件名
        var contentDisposition = xhr.getResponseHeader('content-disposition');
        var fileName = '';
        if (contentDisposition && contentDisposition.indexOf('attachment') !== -1) {
          var fileNameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
          var matches = fileNameRegex.exec(contentDisposition);
          if (matches != null && matches[1]) {
            fileName = decodeURIComponent(matches[1].replace(/['"]/g, ''));
          }
        }
        // a标签模式
        // const blob = xhr.response;
        // const downloadUrl = URL.createObjectURL(blob);
        // const link = document.createElement('a');
        // link.setAttribute('href', downloadUrl)
        // link.setAttribute('id', 'd2admin-link-temp')
        // link.download = fileName || "未命名.xlsx";
        // if (isOpenNew) {
        //   link.setAttribute('target', '_blank')
        // }
        // document.body.appendChild(link);
        // link.click();
        // document.body.removeChild(link);
        // URL.revokeObjectURL(downloadUrl);

        // openUrlBase(url, isOpenNew);

        // let a = document.createElement('a')
        // a.setAttribute('href', url)
        // if (isOpenNew) {
        //   a.setAttribute('target', '_blank')
        // }
        // a.setAttribute('id', 'd2admin-link-temp')
        // document.body.appendChild(a)
        // // error事件监听器
        // a.addEventListener('error', handleDownloadError);
        // console.log('22222', 22222)
        // a.click()
        // document.body.removeChild(a)

        // file-saver处理
        const blob = xhr.response;
        console.log('fileName', fileName)
        saveAs(blob, fileName || "未命名.xlsx");

      } else {
        // 处理请求失败报错
        console.log('xhr.response', xhr.response);
        // 创建一个 FileReader 对象
        const reader = new FileReader();
        // 当读取完成时执行的回调函数
        reader.onload = function () {
          // 读取结果是一个字符串
          const result = reader.result;
          console.log(result);
          window.alert(`下载失败！${result}`);
        };
        // 读取 Blob 对象的内容
        reader.readAsText(xhr.response);
        // 请求失败，处理错误情况
        console.error('下载失败，HTTP 状态码为', xhr.status);
        // 或者
        // window.alert('下载失败，请检查！');
      }
    }
  }
  // xhr.addEventListener('load', handleDownloadSuccess);
  xhr.addEventListener('readystatechange', handleStateChange);

  // 不生效
  // xhr.addEventListener('error', handleDownloadError);
  if (resType == "GET") {
    xhr.send();
  } else {
    // resType == "POST"
    xhr.send(jsonData);
  }

}

// function handleDownloadSuccess(event) {
//   const blob = xhr.response;
//   console.log('blob', blob)
//   const downloadUrl = URL.createObjectURL(blob);
//   const link = document.createElement('a');
//   link.href = downloadUrl;
//   // link.download = 'file.pdf';
//   document.body.appendChild(link);
//   link.click();
//   document.body.removeChild(link);
//   URL.revokeObjectURL(downloadUrl);
// }

/**
 * @description: a标签打开url
 * @param {*} url 地址
 * @param {*} isOpenNew 是否打开新页面
 * @return {*}
 */
export function openUrlBase(url, isOpenNew) {
  let a = document.createElement('a')
  a.setAttribute('href', url)
  if (isOpenNew) {
    a.setAttribute('target', '_blank')
  }
  a.setAttribute('id', 'd2admin-link-temp')
  document.body.appendChild(a)
  // a标签触发下载会自动读取文件名
  // error事件监听器
  a.addEventListener('error', handleDownloadError);
  // 不做处理
  a.click();
  document.body.removeChild(a)

  return
  // 添加请求头Authorization
  a.addEventListener('click', function () {
    // this.setRequestHeader('Authorization', 'Bearer ' + token);
    // 携带请求头
    // h5测试
    if (process.env.NODE_ENV == "development") {
      this.setRequestHeader(
        "Authorization",
        `Bearer ${process.env.VUE_APP_API_TOKEN}`
      );
      this.setRequestHeader(
        "X-Oars-Token",
        `${process.env.VUE_APP_API_TOKEN}`
      );
    } else {
      // 上线阶段,自动获取登录的 token localStorage Key:  IDAAS_BEARER_TOKEN
      let IDAAS_BEARER_TOKEN = localStorage.getItem("IDAAS_BEARER_TOKEN") || "111";
      if (IDAAS_BEARER_TOKEN) {
        xhr.setRequestHeader(
          "Authorization",
          `Bearer ${IDAAS_BEARER_TOKEN}`
        );
      }
    }
  });
  document.body.removeChild(a)
}
// 获取到下载失败的相关信息，并进行相应的处理
function handleDownloadError(event) {
  console.log('下载失败：', event);
  // 或者
  window.alert('下载失败，请重试！');
}

本栏目推荐文章
• 字节微服务HTTP框架Hertz使用与源码分析｜拥抱开
• NUS CS1101S：SICP JavaScript 描述：三、模块化、对象和状态
• 探索短链接：让网络分享更便捷
• nginx启用HTTP2特性
• FinalShell链接ubuntu失败？
• js中的对象，如果赋值给多个变量，那么会有性能问题吗
• Python面向对象之反射
• 面向过程(函数)和对象(类)
• 面向对象的三大特性及派生和组合
• Python面向对象之派生

链接 XMLHttpRequest 对象 HTTP链接xmlhttprequest对象http xmlhttprequest对象ajax 对象ajax xmlhttprequest核心 typecho链接https http 链接cookie http ios 链接 事件preventdefault对象 链接http xmlhttprequest xmlhttprequest步骤 origin 39 xmlhttprequest supported