vue中人员导出功能实现

news2024/9/24 19:23:48

大纲:


  1、导出定义的export.js文件 代码展示

import axios from 'axios'
//导出一
export const exportExcel = (url, params, name, type = 'post') => {
	// url url路径 params 查询参数 name 文件名 type 请求方式
	axios[type](url, params, {
		responseType: 'blob',
	}).then(res => {
		let blob = new Blob([res.data], {
			type: 'application/vnd.ms-excel',
			'Content-Type': 'application/vnd.ms-excel'
		});
		let downloadElement = document.createElement('a');
		let href = window.URL.createObjectURL(blob); //创建下载的链接
		downloadElement.href = href;
		downloadElement.download = name || '未命名.xls'; //下载后文件名
		document.body.appendChild(downloadElement);
		downloadElement.click(); //点击下载
		document.body.removeChild(downloadElement); //下载完成移除元素
		window.URL.revokeObjectURL(href); //释放掉blob对象
	})
};
//导出二
export const getExcel = (u, f) => {
	axios.get(u, {
		responseType: 'blob'
	}).then(res => {
		let blob = new Blob([res.data], {
			type: 'application/vnd.ms-excel',
			'Content-Type': 'application/vnd.ms-excel'
		});
		let downloadElement = document.createElement('a');
		let href = window.URL.createObjectURL(blob); //创建下载的链接
		downloadElement.href = href;
		downloadElement.download = f || '未命名.xls'; //下载后文件名
		document.body.appendChild(downloadElement);
		downloadElement.click(); //点击下载
		document.body.removeChild(downloadElement); //下载完成移除元素
		window.URL.revokeObjectURL(href); //释放掉blob对象
	})
};

 2、在有导出功能的页面引入导出方法

 若接口是GET请求,该处导出使用的是getExcel 导出方法

 deriveExpor() {
    var jsondata = 'orgId='+this.orgId+'&jobNo='+this.jobNo+'&name='+this.name;
    //调用导出方法
    getExcel('/api/admin/staff/staffExport?' + jsondata,'人员资料')
 },

 不同的请求,传参的方式也存在一定的区别;以下是POST请求

getExport(){
  let jsondata = {
     opUser: this.opUser,
     jobNo: this.jobNo,
     name: this.name,
  }
  exportExcel('/api/admin/card/info/log_list_export', {...jsondata}, '卡操作日志', 'post')
},

导出效果展示:


前言:

        上述代码是一个导出Excel文件的函数,使用了axios库发送请求并获取到Excel文件的二进制数据。将二进制数据转换为Blob对象,并创建一个下载链接,然后模拟点击下载链接进行文件下载。

导出代码详解(导出一):

  1. 使用axios库发送请求,请求的URL路径为url,请求的参数为params,请求方式默认为POST(可以通过type参数指定为其他请求方式)。

  2. 在请求的响应中,将响应数据转换为Blob对象,并指定MIME类型application/vnd.ms-excel,即Excel文件。

  3. 创建一个<a>元素,并将下载链接赋值给href属性。

  4. 指定文件名,默认为未命名.xls(可以通过name参数指定文件名)。

  5. <a>元素添加到document.body中。

  6. 模拟点击<a>元素,触发文件下载。

  7. 下载完成后,从document.body中移除<a>元素。

  8. 释放掉Blob对象对应的URL资源。

  9. 注意:在调用该函数时,需要传入URL路径、请求参数、文件名等参数。

前言:

      上述第二段代码是一个获取Excel文件并下载的函数;使用了axios库发送GET请求,获取到Excel文件的二进制数据。

导出代码详解(导出二):

  1. 使用axios库发送GET请求,请求的URL路径为u;

  2. 在请求的响应中,将响应数据转换为Blob对象,并指定MIME类型application/vnd.ms-excel,即Excel文件。

  3. 创建一个<a>元素,并将下载链接赋值给href属性。

  4. 后面几步,同导出一方法

拓展小知识:

 MIME(Multipurpose Internet Mail Extensions)类型是一种标识文件类型和格式的方式。

它是通过在HTTP、Email等协议中使用特定的字符串来表示文件的媒体类型。

   在编程中,常常需要根据文件的扩展名或内容类型来确定对应的MIME类型,以便正确地处理和解析文件数据。

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

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

相关文章

微信小程序多码融合

1、多码融合实现 如果需要实现扫码关注、跳转页面、扫码充电以及第三方融合扫码充电的需求&#xff0c;通过“扫普通链接二维码打开小程序” 的功能采用hlht协议的方式进行融合&#xff0c;使用代码生成新的二维码&#xff0c;二维码内容格式如下&#xff1a; hlht://9900000…

性能测试基础知识(三)性能指标

性能测试基础知识&#xff08;三&#xff09;性能指标 前言一、时间特性1、响应时间2、并发数3、吞吐量&#xff08;TPS&#xff09; 二、资源特性1、CPU利用率2、内存利用率3、I/O利用率4、网络带宽使用率5、网络传输速率&#xff08;MB/s&#xff09; 三、实例场景 前言 性能…

ES6系列之let、const、箭头函数使用的坑

变量提升块级作用域的重要性箭头函数this的指向rest参数和arguments 1.ECMAScript与Js的关系 2.Babel转码器 Babel是一个广泛使用的ES6转码器&#xff0c;可以将ES6代码转为ES5代码&#xff0c;从而在老版本的浏览器执行。这意味着&#xff0c;你可以用ES6的方式编写程序&…

MyBatis的使用方法

文章目录 一、MyBatis的创建准备工作 二、MyBatis的使用1.项目分层2.业务代码1&#xff09;使用XML的方法2&#xff09;直接使用注解 总结 一、MyBatis的创建 准备工作 1.添加依赖 旧项目 方法一&#xff1a;在pom.xml中添加MyBatis和MySQL Diver依赖 <!-- 添加 MyBati…

QC API全系列揭秘之Test Execution操作(全网首发)

目录 一、QC简介&#xff1a; 二、写作目的&#xff1a; 三、解决问题&#xff1a; 四、本文重点&#xff1a; 五、QC接口规范&#xff1a; 六、QC接口操作Test Execution&#xff1a; 定义全局变量 QC服务器连接、登录&#xff08;身份验证&#xff09;及项目连接 重点…

小程序商城系统的开发方式及优缺点分析

小程序商城系统是一种新型的电子商务平台&#xff0c;它通过小程序的形式为商家提供了一种全新的销售渠道&#xff0c;同时也为消费者提供了一种便捷的购物体验。小程序商城系统具有低成本、快速上线、易于维护等特点&#xff0c;因此在市场上受到了广泛的关注和应用。这里就小…

【设计模式——学习笔记】23种设计模式——模板方法模式Template Method(原理讲解+应用场景介绍+案例介绍+Java代码实现)

介绍 基本介绍 模板方法模式&#xff0c;又叫模板模式&#xff0c;在一个抽象类中定义了一个执行它的其他方法的公开模板方法&#xff0c;子类可以按需重写抽象类的抽象方法简单说&#xff0c;模板方法模式 定义一个操作中的算法&#xff08;或者说流程&#xff09;的骨架&am…

Vue引入

1. vue引入 第一种方法&#xff1a;在线引入 <script src"https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 第二种方法&#xff1a;本地引入 2. 语法学习 el用于绑定id&#xff0c;data用于定义数据如下例题 <!DOCTYPE html> <html…

xinput1_4.dll丢失的解决方法,三种解决方法分享

xinput1_4.dll是一个动态链接库文件&#xff08;DLL&#xff09;&#xff0c;它是Microsoft DirectX的一部分&#xff0c;用于处理游戏控制器输入。当你的电脑提示xinput1_4.dll文件丢失时&#xff0c;意味着与这个文件相关的游戏或应用程序无法正常运行。 当你的电脑提示xinp…

正负样本分配策略(OTA, SimOTA,TAS)

文章目录 OTASimOTATALATSS OTA 论文&#xff1a;《OTA: Optimal Transport Assignment for Object Detection》 代码&#xff1a;Megvii-BaseDetection/OTA 标签分配算法 目标CNN-based的目标检测器是预测 pre-defined anchors 的类别 (cls) 以及偏移量 (reg) 。 为了训练目标…

go 结构体 - 值类型、引用类型 - 结构体转json类型 - 指针类型的种类 - 结构体方法 - 继承 - 多态(interface接口) - 练习

目录 一、结构体 1、python 与 go面向对象的实现&#xff1a; 2、初用GO中的结构体&#xff1a;&#xff08;实例化一个值类型的数据&#xff08;结构体&#xff09;&#xff09; 输出结果不同的三种方式 3、实例化一个引用类型的数据&#xff08;结构体&#xff09; 4、…

esp32 wifi无线透传

wifi无线透传 目录 wifi无线透传[TOC](目录) 一、Esp32代码1.1 下载烧写 二、星空内网穿透配置2.1 平台注册2.2 充值2元(用于实名认证)2.3 实名认证2.4 创建隧道2.5 下载软件2.6 配置文件2.7 启动服务 因为常见的无线传输视频或图片&#xff0c;只能在局域网内中实现&#xff0…

【并发专题】手写MyReentantLock

分析 ReentantLock的特点如下&#xff1a; 首先是继承自AQS的可中断可以设置超时时间可以切换公平锁/非公平锁支持多个条件变量支持可重入 事实上&#xff0c;上面的很多东西AQS已经帮忙实现了&#xff0c;所以想要复刻一个不是很难。仔细观察一下源码&#xff0c;我们需要重…

Text-to-SQL小白入门(一)

摘要 本文主要介绍了Text-to-SQL研究的定义、意义、研究方法以及未来展望&#xff0c;主要是对Text-to-SQL领域进行一个初步的认识和了解&#xff0c;适合初学者入门了解。 1 引言 作为Text-to-SQL领域的小白&#xff0c;学习该领域的最好方式就是看最新的综述文章&#xff…

Junit4入门之什么是单元测试?

干了一年多的后端了&#xff0c;从来没有了解过单元测试。虽然我知道测试不仅仅是测试们的任务&#xff0c;后端也要进行自测来保证自己的代码的可用性&#xff0c;但我一直都只是用postman来实施的&#xff0c;调用调通了即可。虽然我也知道Junit是用于测试的软件&#xff0c;…

几种常用到的 Hybrid App 框架方案

移动操作系统在经历了诸神混战之后&#xff0c;BlackBerry OS、Symbian OS、Windows Phone等早期的移动操作系统逐渐因失去竞争力而退出。目前&#xff0c;市场上主要只剩下安卓和iOS两大阵营&#xff0c;使得iOS和安卓工程师成为抢手资源。然而&#xff0c;由于两者系统的差异…

学了python的心得体会200字,学python心得体会1000字

大家好&#xff0c;本文将围绕学了python的心得体会200字展开说明&#xff0c;学python心得体会1000字是一个很多人都想弄明白的事情&#xff0c;想搞清楚学python心得体会800字需要先了解以下几个事情。 一、个人学期总结 本学期在missdu的带领下&#xff0c;进行了python的学…

Jenkins通过OpenSSH发布WinServer2016

上一篇文章> Jenkins集成SonarQube代码质量检测 一、实验环境 jenkins环境 jenkins入门与安装 容器为docker 主机IP系统版本jenkins10.10.10.10rhel7.5 二、OpenSSH安装 1、下载 官网地址&#xff1a;https://learn.microsoft.com/zh-cn/windows-server/administration/op…

Spring Boot的创建和运行

目录 1.Spring Boot的优点 2.Spring Boot项目创建 2.1使用Idea创建 2.2网页版创建 3.项目目录介绍和运行 3.1运行项目 3.2输出 4.注意事项 4.1正确路径 4.2小结&#xff1a;约定大于配置 1.Spring Boot的优点 ●快速集成框架&#xff0c;Spring Boot 提供了启动添…