首页 > 其他分享 >跳转链接 下载链接 自定义处理 XMLHttpRequest 对象来发起 HTTP 请求

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

时间:2024-01-02 11:00:27浏览次数:34  
标签:body const 自定义 xhr link blob 跳转 document 链接


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('下载失败,请重试!');
}

标签:body,const,自定义,xhr,link,blob,跳转,document,链接
From: https://www.cnblogs.com/yoona-lin/p/17940038

相关文章

  • Linux 静态链接和动态链接相关知识点总结
    staticlibrary和sharedlibrary的区别静态库(StaticLibrary)和共享库(SharedLibrary)是两种不同的库的形式,它们在链接和加载的方式上有一些关键的区别。静态库(StaticLibrary):文件格式:静态库的代码和数据在编译时被复制到程序的可执行文件中。文件扩展名:在大多数系统中,静态......
  • 鸿蒙自定义弹窗中的变量如何传递给页面
    鸿蒙自定义弹窗中的变量如何传递给页面作者:坚果团队:坚果派公众号:“大前端之旅”团队介绍:坚果派由坚果创建,团队拥有8个华为HDE,3个HSD,以及若干其他领域的三十余位万粉博主运营。本人为华为HDE、中国计算机学会CCF专业会员、OpenHarmony布道师、开发者联盟优秀讲师、2023年开源之夏......
  • Cisco 产品下载链接汇总 2023 持续更新中
    Cisco产品下载链接汇总IOS-XE,IOS-XR,NX-OS&FXOSbasedonlinuxkernel作者主页:sysin.org本站Cisco产品汇总(sysin)。本站提供的Cisco软件全部为官方原版“试用版”或者“免费版”,部分是特定硬件的系统固件,仅供学习和研究使用。网络CiscoASR9000RouterIOSXRSof......
  • 安卓期末大作业Android studio-记单词app(资源链接在文末,含注册登录,含设计报告,含导出ap
    安卓期末大作业Androidstudio-记单词app(注册登录、增删改查)1、注册登录界面2.用户点击加号按钮输入单词,键盘会自动弹出并焦点在输入框,用户输入英文和中文释义,单词本上将在最上面显示这个单词,并会有下拉动画。用户可以通过上方放回箭头取消输入。2.用户可以通过单词盘边的按钮来关......
  • Java 自定义注解
    1. 元注解元注解是Java 提供的一些基本注解,使用这些元注解区可疑创建新的注解;可以先大致看一下元注解,然后去看后面自定义注解的例子。元注解有@Retention,@Documented,@Target,@Inherited,@Repeatable 五种。1.1 @Retention@Retention 可以定义注解的生命周期,注解的存活时......
  • Java 自定义类加载器
    1. 系统类加载器系统提供的类加载器有如下三种:启动类加载器, 扩展类加载器,引用程序类加载器。1.1 启动类加载器启动类加载器(BootstrapClassLoader)负责将存放在<JRE_HOME>\lib目录中的,或者被-Xbootclasspath参数所指定的路径中的,并且是虚拟机识别的(仅按照文件名识别,如rt.jar......
  • 大数据分析与可视化 之 百度贴吧(标题和链接)
    大数据分析与可视化之百度贴吧(标题和链接)importcsvfromurllibimportrequest,parseimporttimeimportrandomimportrequestsfromlxmlimportetreefromurllibimportrequest,parse#定义一个爬虫类classTiebaSpider(object):#初始化url属性def......
  • 搜索引擎优化指南:SEO关键字、长尾关键字、短尾关键字以及反向链接
    内容SEOSEO代表“搜索引擎优化”。它是一种数字营销策略,旨在提高网站或网页在搜索引擎未付费结果中的在线可见性。通常,网站在搜索结果页面中排名越高,或在搜索结果列表中显示的频率越高,它将从搜索引擎用户那里获得的访问者就越多。SEO策略可以针对各种类型的搜索,例如图像搜索、......
  • 搜索引擎优化指南:SEO关键字、长尾关键字、短尾关键字以及反向链接
    内容SEOSEO代表“搜索引擎优化”。它是一种数字营销策略,旨在提高网站或网页在搜索引擎未付费结果中的在线可见性。通常,网站在搜索结果页面中排名越高,或在搜索结果列表中显示的频率越高,它将从搜索引擎用户那里获得的访问者就越多。SEO策略可以针对各种类型的搜索,例如图像搜索、......
  • 自定义类型:结构体
    //————————-自定义类型:结构体,枚举,联合//C语言已经提供给我们一些内置类型,例如:int,char,short,double,float//但是远不能满足我们对于类型的使用需求,//因此我们引入自定义类型,例如:结构体、联合体、枚举//————结构体//一、结构体的声明//1.结构的定义:结构是一些......