vue3项目中关于二进制导出(下载)txt ,适应于其他格式

news2025/1/21 1:02:12

 

 

 

 <el-button type="info" @click="exportClick" size="default">导出</el-button>

接口方法:getExportList

import { tmUseDictApi } from '/@/api/dict';

const getExportList = tmUseDictApi().getExportList //初始化数据

// 导出
const exportClick = () => {
  let params = {
    tagName: fullNewName.value,
    beginTime: moment(historyForm.value.startDate).format('YYYY-MM-DD HH:mm'),
    endTime: moment(historyForm.value.endDate).format('YYYY-MM-DD HH:mm')
  }
  console.log(params, 'params');

  ElMessageBox.confirm(
    '是否确认导出所有类型数据项??',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      const res = await getExportList(params) // 接口封装方法/api/v1/admin/common/exportHisData
      downloadpdf(res, fullNewName.value);
      ElMessage({
        type: 'success',
        message: '下载成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '下载失败',
      })
    })
}

// 下载固定写法
const downloadpdf = (res: any, name: any) => {
  const blob = new Blob([res], { type: 'text/plain' })// 创建blob对象,解析数据流
  const tempLink = document.createElement('a');// 创建一个临时的 HTML 元素,用于生成 Excel 文件
  const URL = window.URL || window.webkitURL;   // 兼容webkix浏览器,处理webkit浏览器中href自动添加blob前缀,默认在浏览器
  const herf = URL.createObjectURL(blob);  // 根据解析后的blob对象创建URL 对象
  tempLink.href = herf;  // 下载链接
  tempLink.download = `${name}.txt`;// 下载文件名,如果后端没有返回,
  document.body.appendChild(tempLink);
  tempLink.click();  //下载后自动打开
  document.body.removeChild(tempLink); // 清理临时资源
  window.URL.revokeObjectURL(herf);   //在内存中移除URL 对象
}

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

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

相关文章

React 全栈体系(五)

第三章&#xff1a;React 应用(基于 React 脚手架) 一、使用 create-react-app 创建 react 应用 1. react 脚手架 xxx 脚手架: 用来帮助程序员快速创建一个基于 xxx 库的模板项目 包含了所有需要的配置&#xff08;语法检查、jsx 编译、devServer…&#xff09;下载好了所有…

【笔试强训选择题】Day42.习题(错题)解析

作者简介&#xff1a;大家好&#xff0c;我是未央&#xff1b; 博客首页&#xff1a;未央.303 系列专栏&#xff1a;笔试强训选择题 每日一句&#xff1a;人的一生&#xff0c;可以有所作为的时机只有一次&#xff0c;那就是现在&#xff01;&#xff01;&#xff01;&#xff…

深入理解JVM虚拟机第四篇:一些常用的JVM虚拟机(一)

一&#xff1a;Sun Classic VM虚拟机 早在1996年Java1.0版本的时候&#xff0c;Sun公司发布了一款名为Sun classic VM的Java虚拟机&#xff0c;它同时也是世界上第一款商用Java虚拟机&#xff0c;JDK1.4时完全被淘汰。 现在hotspot内置了此虚拟机。 这款虚拟机内部只提供解释器…

深入了解接口测试:Postman 接口测试指南

在现代软件开发生命周期中&#xff0c;接口测试是一个至关重要的部分。使用 Postman 这一工具&#xff0c;可以轻松地进行 接口测试。以下是一份简单的使用教程&#xff0c;帮助你快速上手。 安装 Postman 首先&#xff0c;你需要在电脑上安装 Postman。你可以从官网上下载并…

玩转堆排序以及Topk问题——【数据结构】

W...Y的主页 &#x1f60a; 代码仓库分享 &#x1f495; 目录 堆排序 建堆 建堆的时间复杂度 Topk问题 学习了二叉树以及堆&#xff0c;今天我们来学习一下什么是堆排序以及经典二叉树问题——topk问题。 在学习开始我们先来回顾一下上篇博客中我们提到的堆&#xff0c;…

TypeScript函数详解

&#x1f3ac; 岸边的风&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! 目录 函数声明 函数表达式 可选参数和默认参数 剩余参数&#xff08;Rest Parameters&#xff09; this和箭头函数 …

chato.cn: 定制专属AI聊天助理机器人工具网站

【 产品介绍】 • 名称 chato.cn • 具体描述 chato.cn的核心功能是让用户能够输入一些知识或信息&#xff0c;让机器人学习和理解&#xff0c;然后与之进行对话&#xff0c;查看其回答的质量和逻辑性。还提供了多种语言、主题、风格和规则的选项&#xff0c;让用户能够根据自己…

天地图WMTS地图瓦片下载

最近在开发个人项目中遇到了这样一个问题&#xff0c;即&#xff1a;本地开发使用天地图在线地图服务&#xff0c;部署到线上时&#xff0c;突然想到——天地图提供的开放地图服务是需要申请秘钥key才能够使用的&#xff0c;而且需要连接外网&#xff0c;同时也是有访问次数限制…

八、MySql表的复合查询

文章目录 一、基本查询回顾二、多表查询&#xff08;一&#xff09;笛卡尔积的初步过滤&#xff08;二&#xff09;例子1.显示部门号为10的部门名&#xff0c;员工名和工资2.显示各个员工的姓名&#xff0c;工资&#xff0c;及工资级别 三、自连接&#xff08;一&#xff09;定…

基于SSM的校园快递一站式服务系统设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

Consensus-AI论文搜索引擎 直接从论文中找答案

Consensus介绍 Consensus是一个人工智能AI论文搜索引擎&#xff0c;一个可以在科学论文中找到答案的搜索引擎&#xff0c;使用人工智能从数亿篇科学论文数据库中即时提取和聚合易于使用&#xff0c;搜索结果在几秒内即可完成&#xff0c;而且100%无广告。 截图 提示&#xf…

朋友圈大佬都去读研了,这份备考书单我码住了

作者简介&#xff1a; 辭七七&#xff0c;目前大二&#xff0c;正在学习C/C&#xff0c;Java&#xff0c;Python等 作者主页&#xff1a; 七七的个人主页 文章收录专栏&#xff1a; 七七的闲谈 欢迎大家点赞 &#x1f44d; 收藏 ⭐ 加关注哦&#xff01;&#x1f496;&#x1f…

Golang 单元测试合集整理,(我最常用 gomonkey)欢迎收藏

无论写什么样的语言&#xff0c;单元测试都是必不可少的&#xff0c;它可以极大的提高我们的代码质量&#xff0c;减少各种低级错误和 bug 无论你是一个靠谱合格的码农&#xff0c;还是一个优秀的程序员&#xff0c;单元测试都是咱们必须落实的一环 单元测试比较容易&#xf…

python:使用RESTful API(flask)调用python程序传递参数,实现Web端调用python程序

问题描述 现有一个用python写的程序&#xff08;或者是一个或几个的函数接口&#xff09;&#xff0c;需要在Web前端调用python写的函数。如果直接用前端java来调用会很不方便&#xff0c;而且会出现各种麻烦的问题&#xff0c;下面给出如何在web前端调用python的接口。 解决…

STM32WB55开发(2)----修改蓝牙地址

STM32WB55开发----2.修改蓝牙地址 概述硬件准备视频教学样品申请完整代码下载选择芯片型号配置时钟源配置时钟树RTC时钟配置查看开启STM32_WPAN条件配置HSEM配置IPCC配置RTC启动RF开启蓝牙设置工程信息工程文件设置修改置BLE设备公共地址Ble_Hci_Gap_Gatt_Init结果演示 概述 在…

更多场景、更多选择,Milvus 新消息队列 NATS 了解一下

在 Milvus 的云原生架构中&#xff0c;消息队列&#xff08;Log Broker&#xff09;可谓任重道远&#xff0c;它不仅要具备流式数据持久性、支持 TT 同步、事件通知等能力&#xff0c;还要确保工作节点从系统崩溃中恢复时增量数据的完整性。 在 Milvus 的架构中&#xff0c;一切…

【计算机视觉 | 语义分割】干货:语义分割常见算法介绍合集(一)

文章目录 一、U-Net二、Fully Convolutional Network三、SegNet四、DeepLab五、DeepLabv3六、UNet七、PSPNet八、EfficientDet九、SegFormer十、ENet 一、U-Net U-Net 是一种语义分割架构。 它由收缩路径和扩张路径组成。 收缩路径遵循卷积网络的典型架构。 它由两个 3x3 卷积…

基于SSM的学生信息管理系统设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

Python 图形化界面基础篇:使用包装器( Pack )布局元素

Python 图形化界面基础篇&#xff1a;使用包装器&#xff08; Pack &#xff09;布局元素 引言什么是 Tkinter 的 Pack 布局&#xff1f;步骤1&#xff1a;导入 Tkinter 模块步骤2&#xff1a;创建 Tkinter 窗口步骤3&#xff1a;创建和使用 Pack 布局步骤4&#xff1a; Pack 布…

Android codec2 编码 -- 基于录屏

文章目录 前言android 原生的应用srcreenrecordMediaCodec获取编码数据流程 前言 本篇文章主要是理解Android 12编码的流程&#xff0c; 首先从上层的应用出发理解mediacodec提供给外部API的用法。然后针对每个api 分析编码各个流程中框架中的流程。 熟悉一个框架的流程 可以…