文件下载(使用xhr)

news2024/11/24 15:42:21

第一种下载多种格式文档参数为拼接id get方法

import Cookies from 'js-cookie';
// 下载
const fullNewName = ref()
const fileType = ref()
const onUpload = async (row: any) => {
  fullNewName.value = row.name
  fileType.value = row.fileSuffix
  let xhr = new XMLHttpRequest();
  xhr.open('get', `${baseUrl}api/v1/admin/file/download?id=${row.id}`, true);
  xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
  xhr.setRequestHeader('Authorization', `Bearer ${JSON.parse(Cookies.get('tm_token'))}`);
  xhr.responseType = "blob"; // 返回类型blob
  xhr.send(); // 发送ajax请求
  xhr.onreadystatechange = function () {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      //创建blob对象
      const blob = new Blob([xhr.response]);
      const fileName = fullNewName.value;
      //创建下载元素
      const downloadElement = document.createElement('a');
      // 创建下载的链接
      const href = window.URL.createObjectURL(blob);
      downloadElement.href = href;
      downloadElement.download = fileName; // 下载后文件名
      document.body.appendChild(downloadElement);
      downloadElement.click(); // 点击下载
      document.body.removeChild(downloadElement); // 下载完成移除元素
      window.URL.revokeObjectURL(href); // 释放掉blob对象
    }
  }
}

第二种下载word 文档,无参数 get

const exportDocument = async () => {
  await ElMessageBox.confirm(`是否全部导出`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
  let xhr = new XMLHttpRequest();
  xhr.open('get', `${baseUrl}api/v1/admin/common/SwaggrGenerateWordDoc`, true);
  xhr.setRequestHeader('Content-Type', 'application/mxword');
  xhr.setRequestHeader('Authorization', `Bearer ${JSON.parse(Cookies.get('tm_token'))}`);
  xhr.responseType = "blob"; // 返回类型blob
  xhr.send(); // 发送ajax请求
  xhr.onreadystatechange = function () {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      //创建blob对象
      const blob = new Blob([xhr.response], { type: 'application/mxword' });
      const fileName = '';
      //创建下载元素
      const downloadElement = document.createElement('a');
      // 创建下载的链接
      const href = window.URL.createObjectURL(blob);
      downloadElement.href = href;
      downloadElement.download = 'Swagger接口文档.docx'; // 下载后文件名
      document.body.appendChild(downloadElement);
      downloadElement.click(); // 点击下载
      document.body.removeChild(downloadElement); // 下载完成移除元素
      window.URL.revokeObjectURL(href); // 释放掉blob对象
    }
  }
}

第三种下载word 文档,参数为数组,放入请求体中 post方法

const exportDocument = async () => {
  await ElMessageBox.confirm(`是否全部导出`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    let xhr = new XMLHttpRequest();
    xhr.open('post', `${baseUrl}api/v1/admin/common/TMApiGenerateWordDoc`, true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.setRequestHeader('Authorization', `Bearer ${JSON.parse(Cookies.get('tm_token'))}`);
    xhr.responseType = "blob"; // 返回类型blob
    xhr.send(JSON.stringify(tableAllData)); // 发送ajax请求
    // xhr.send(JSON.stringify(tableListData.value)); // 发送ajax请求
    xhr.onreadystatechange = function () {
      if (xhr.readyState === XMLHttpRequest.DONE) {
        //创建blob对象
        const blob = new Blob([xhr.response], { type: 'application/json' });
        //创建下载元素
        const downloadElement = document.createElement('a');
        // 创建下载的链接
        const href = window.URL.createObjectURL(blob);
        downloadElement.href = href;
        downloadElement.download = 'TMApi接口文档.docx'; // 下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); // 点击下载
        document.body.removeChild(downloadElement); // 下载完成移除元素
        window.URL.revokeObjectURL(href); // 释放掉blob对象
      }
    }


}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1176448.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vue3中使用better-scroll

文章目录 需求分析安装htmlcssjs 需求分析 假设现在有这么一个需求,页面顶部有几个tabs导航,每一个tab下都有一个可以滑动的切换按钮。咱们就可以引入better-scroll来实现这个需求。 安装 首先下载better-scroll npm install better-scroll/core --…

汇编-变量

.386 .model flat,stdcall option casemap:none.data sum DWORD 0 ;创建一个全局变量,取名sum,初始化0 sum1 DWORD ? ;创建一个全局变量sum1,无初始化 ;问号(?)初始化值使得变量未被初始化,这意味着在运行时才会为该变量分配一个值 ;变量名…

【Linux】:使用git命令行 || 在github创建项目 || Linux第一个小程序——进度条(进阶版本)

在本章开始之前还是先给大家分享一张图片 这是C的笔试题 感兴趣的同学可以去试一试 有难度的哟 也可以直接在牛客网直接搜索这几道题目哈 好了今天我们正式进入我们的正题部分 🕖1.使用git命令行 安装git yum install git🕠2.在github创建项目 使用…

Tomcat的类加载器

详情可以参考:https://tomcat.apache.org/tomcat-10.1-doc/class-loader-howto.html 简要说明 Tomcat安装了多种类加载器,以便容器的不同部分、容器中的应用访问能够不同的类和资源。 在Java环境中,类加载器被组织为父-子树的形式。通常情况…

vue2和vue3 的双向绑定原理

前文: 都知道vue是双向绑定的mvvm框架,也一直再用,那么他到底是如何实现的呢?vue3又针对这点做了哪些升级呢? 这段时间也正好有空,下面我们来一起看看吧 一 、vue的双向绑定原理 那么什么是双向绑定呢 ? 一般我们所指的双向绑定都是指的数据,即当数据发生变化的时候,视图也…

I/O多路转接之poll

承接上文:I/O多路转接之select-CSDN博客 简介 poll原型介绍 select代码改造成poll型 poll优缺点 在前文中我们得知了,select的诸多缺点,接下来这个poll就可以解决上述出现的问题 poll也是一种Linux中的多路转接的方案,主要解决下…

[移动通讯]【Carrier Aggregation-12】【LTE Carrier Aggregation basics 】

前言: 参考: RF Wireless World: 《LTE Carrier Aggregation basics》 目录: Why Carrier Aggregation Carrier Aggregation in TDD LTE Carrier Aggregation in FDD LTE Carrier Aggregation frequency ba…

使用VNC链接远程桌面

一、本地VNC客户端 本地主要需要一个VNC客户端,用来远程连接服务器端的VNC(在不安装Web版本VNC情况下)。VNC客户端下载地址: VNC客户端下载 二、安装Xfce桌面环境 在远程服务器控制台中安装Xfce桌面(这个桌面环境比…

简述PyQt5布局管理

PyQt5的布局管理方法主要包括以下几种: 水平布局(QHBoxLayout):可以将所添加的控件在水平方向上依次排列。垂直布局(QVBoxLayout):可以将所添加的空间在垂直方向上依次排列。网格布局&#xff…

win10下.net framework 3.5 | net framework 4 无法安装解决方案

.net缺失解决方案 win10 .net framework 3.5组策略设置方案一方案二 win10 .net framework 4 参考文章 win10 .net framework 3.5 组策略设置 方案一 搜索组策略,依次展开“计算机配置”、“管理模板”,然后选择“系统”,找到指定可选组件…

【GEE】5、遥感影像预处理【GEE栅格预处理】

1简介 在本模块中,我们将讨论以下概念: 了解常用于遥感影像的数据校正类型。如何直观地比较同一数据集中不同预处理级别的空间数据。如何在 Google Earth Engine for Landsat 8 表面反射率图像中执行云遮蔽和云遮蔽评估。 2背景 什么是预处理&#xff…

深入理解IO底层

文章目录 上层使用向文件写入从文件读取 函数解释fopen函数fclose函数fread函数fwrite函数 系统接口向文件写入从文件读取 函数解释open函数close函数文件描述符write函数和read函数 FILE 上层使用 向文件写入 文件的写入 #include <stdio.h> #include <string.h>…

3、Python基础语法:解释器、标识符、关键字、缩进

文章目录 Python解释器标识符关键字缩进代码示例与运行结果Python是一种高级编程语言,以其简洁明了的语法和强大的功能而受到广泛欢迎。本文将介绍Python的一些基础语法元素,包括解释器、标识符、关键字和缩进,并提供相应的代码示例和运行结果。 Python解释器 Python是一种…

【C语言基础教程】内存的申请和释放(malloc、free、realloc、calloc)

文章目录 前言一、为什么需要指针的内存的申请和释放&#xff1f;二、malloc 函数2.1 函数原型2.2 示例代码 1: 使用 malloc 分配动态数组2.3 示例代码 2: 使用 malloc 分配字符串 三、free 函数3.1 函数原型3.2 使用方法3.3 示例代码 1: 使用 free 释放动态数组内存3.4 示例代…

电脑时间校对怎么做?看这里,分享4个方法!

“我的电脑时间总是和手机的时间不一样&#xff0c;应该是电脑的时间不准确了&#xff0c;想知道大家遇到这种情况时是如何校对电脑时间的呀&#xff1f;” 随着电脑在我们日常生活中的广泛应用&#xff0c;确保电脑时间准确性变得至关重要。电脑时间校对不仅有助于同步文件和通…

共享WiFi贴码真实收益怎样?如何扩大盈利!

随着移动互联网的快速发展&#xff0c;共享WiFi贴码成为了一个备受关注的话题。这一模式的兴起引起了很多人的关注&#xff0c;因为它似乎为一些创业者提供了一种全新的获取收益的模式。然而&#xff0c;共享WiFi贴码的真实收益到底如何呢&#xff1f; 共享WiFi贴码的基本原理是…

【PC】第2期《全知 PUBG 视角》概要

各位玩家大家好&#xff0c;欢迎收看本期公告。 得益于各位玩家的大力支持&#xff0c;第2期《全知 PUBG 视角》直播已经圆满落下了帷幕&#xff0c;非常感谢各位对我们的喜爱。在直播的热度过去之前&#xff0c;我们也已趁热打铁&#xff0c;为大家准备好了可供所有地区玩家观…

Leetcode-141 环形链表

使用HashSet&#xff0c;从头遍历链表并写入哈希表&#xff0c;遍历每个元素找哈希表是否出现过&#xff0c;如果出现过则存在环。 HashSet 基于 HashMap 来实现的&#xff0c;是一个不允许有重复元素的集合。 HashSet 允许有 null 值。 HashSet 是无序的&#xff0c;即不会记录…

【Linux】-文件操作(重定向、缓冲区以及Linux下一切皆文件的详解)

&#x1f496;作者&#xff1a;小树苗渴望变成参天大树&#x1f388; &#x1f389;作者宣言&#xff1a;认真写好每一篇博客&#x1f4a4; &#x1f38a;作者gitee:gitee✨ &#x1f49e;作者专栏&#xff1a;C语言,数据结构初阶,Linux,C 动态规划算法&#x1f384; 如 果 你 …

使用Nokogiri库的Python程序

python import requests from bs4 import BeautifulSoup import os # 设置 proxies {"http": "", "https": ""} # 设置headers headers { User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (K…