vue中人员导出功能实现

news/2024/11/20 9:37:52/

大纲:


  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.ppmy.cn/news/999931.html

相关文章

IC秋招| 秋招怎么做准备,这份攻略请收下!

近期大家关注的就是秋招了&#xff0c;如今一些企业已经开启了提前批招聘&#xff0c;不少同学已经投递了简历&#xff0c;但内心还是非常焦虑&#xff0c;那么今年的秋招到底该如何准备呢&#xff1f; 简历投递思路建议 刚开始对大厂没有把握的话&#xff0c;可以先约初创或…

【C语言】初识指针

【C语言】初识指针 一、指针是什么&#xff1f;二、指针和指针类型1. 指针-整数2. 指针的解引用三、野指针1.野指针成因2 .如何规避野指针四、指针运算五、二级指针七、指针数组 &#x1f388;个人主页&#xff1a;库库的里昂&#x1f390;CSDN新晋作者&#x1f389;欢迎 &…

当服务器域名出现解析错误的问题该怎么办?

​  域名解析是互联网用户接收他们正在寻找的域的地址的过程。更准确地说&#xff0c;域名解析是人们在浏览器中输入时使用的域名与网站IP地址之间的转换过程。您需要站点的 IP 地址才能知道它所在的位置并加载它。但&#xff0c;在这个过程中&#xff0c;可能会出现多种因素…

Vue3和typeScript路由传参

1 params传的参数&#xff0c;页面刷新就消失,而query传的参数&#xff0c;页面刷新还会存在&#xff0c;所以通常用query。 query传参 跳转页面&#xff1a;拿到router对象,调用push方法做跳转. import { useRoute,useRouter} from "vue-router"; export default…

K8s影响Pod调度和Deployment

5.应用升级回滚和弹性伸缩

【有趣的设计模式】23 种设计模式详解和场景分析

前言 七大设计原则 1、单一原则&#xff1a;一个类只负责一个职责 2、开闭原则&#xff1a;对修改关闭&#xff0c;对扩展开放 3、里氏替换原则&#xff1a;不要破坏继承关系 4、接口隔离原则&#xff1a;暴露最小接口&#xff0c;避免接口过于臃肿 5、依赖倒置原则&#xff1…

pandas read excel 更改string列为时间类型

设想我们有如下一个excel文件 我们都知道上面那个时间列其实是string类型&#xff0c;因此在用pandas做时间校验的时候会不通过&#xff0c;我们可以在read_excel的时候&#xff0c;指定这一列做转换 import pandas as pd from datetime import datetime, timedelta import n…

P1036 [NOIP2002 普及组] 选数

从n个数中选m个数 题目描述 已知 n 个整数 1,2,⋯ ,x1​,x2​,⋯,xn​&#xff0c;以及 1 个整数 k&#xff08;k<n&#xff09;。从 n 个整数中任选 k 个整数相加&#xff0c;可分别得到一系列的和。例如当 n4&#xff0c;k3&#xff0c;4 个整数分别为 3,7,12,19 时&am…