当前位置: 首页 > news >正文

vue中人员导出功能实现

大纲:


  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.lryc.cn/news/104958.html

相关文章:

  • 【微信小程序】引入第三方库poke对GZIP压缩数据进行解压
  • Pandas操作Excel
  • leetcode 712. Minimum ASCII Delete Sum for Two Strings(字符串删除字母的ASCII码之和)
  • Springboot -- 按照模板生成docx、pdf文件,docx转pdf格式
  • UE5.1.1 创建C++项目失败
  • windows进行端口映射
  • Python 异常处理
  • C++ 类的静态成员
  • 360T7路由器进行WiFi无线中继教程
  • 主成分分析
  • 笙默考试管理系统-MyExamTest(26)
  • 重新理解 RocketMQ Commit Log 存储协议
  • ES6基础知识十:你是怎么理解ES6中 Decorator 的?使用场景?
  • 接口/Web自动化测试如何做?框架如何搭建封装?
  • Linux怎么从网络上下载文件
  • Flutter携带JSON参数post请求
  • 【vue】vue-image-lazy图片懒加载使用与介绍【超详细+npm包源代码】
  • MFC第二十四天 使用GDI对象画笔和画刷来开发控件(分页控件选择态的算法分析、使用CToolTipCtrl开发动静态提示)
  • 【NLP-新工具】语音转文本与OpenAI的用途
  • try-catch-finally的字节码原理
  • 基于双层优化的微电网系统规划设计方法(Matlab代码实现)
  • 【Nginx13】Nginx学习:HTTP核心模块(十)Types、AIO及其它配置
  • 2023年华数杯数学建模C题思路分析
  • 安卓手机变身Linux服务器
  • 【Ansible】Ansible自动化运维工具之playbook剧本
  • Yolov8目标检测
  • Jmeter用于接口测试中,关联如何实现
  • 线程状态
  • HTML一些基础知识
  • git 命令总结