vue做导入导出excel文档

系统中经常会遇到要实现批量导入/导出数据的功能,导入就需要先下载一个模板,然后在模板文件中填写内容,最后导入模板,导出就可能是下载一个excel文件。

1、导出

新建一个export.js文件如下:

import {MessageBox,Message,Notification
} from 'element-ui'
import axios from 'axios'
// 导出
export function outExcel(name, url, data, info) {const that = this;MessageBox.confirm(name, "提示", {type: "warning"}).then(async () => {Notification.info({title: '提示',message: '正在导出,请稍后 <i class="el-icon-loading" style="font-size:20px"></i>',dangerouslyUseHTMLString: true,position: 'bottom-left',duration: 0})const time = data;let formData = new FormData();if (time != null) {for (var p in time) {formData.append(p, time[p]);}}axios({method: "post",url: process.env.VUE_APP_BASE_API + url,data: formData,headers: {Authorization: "token " + 'XXX'.,"Content-Type": "multipart/form-data"},responseType: "blob"}).then(data => {if (data.data.type === "application/json") {var reader = new FileReader();reader.onloadend = function () {let res = JSON.parse(reader.result);if (res && res.msg) {Message.warning(res.msg + "," + res.data);setTimeout(() => {Notification.closeAll()}, 1000);}};reader.readAsText(data.data);return;}let url = window.URL.createObjectURL(new Blob([data.data]));let link = document.createElement("a");link.style.display = "none";link.href = url;link.setAttribute("download", info);document.body.appendChild(link);link.click();if (info.indexOf('模板') !== -1) {Message.success('模板下载成功')setTimeout(() => {Notification.closeAll()}, 1000);} else {Notification.closeAll()Notification.success({title: '提示',message: '导出成功',position: 'bottom-left',duration: 2000})setTimeout(() => {Notification.closeAll()}, 2000);}}).catch(data => {if (info.indexOf('模板') !== -1) {Message.error('模板下载失败')} else {Message.error('导出失败')}});}).catch(() => {return false;});
}

可接收参数有: name(提示语),url(接口路径),data(接口参数),info(文件名)

需要将传入的 data 对象转换为 FormData 对象,用于发送POST请求的数据,同时设置请求头包括Authorization信息和Content-Typemultipart/form-data,以及指定响应类型为blob。请求成功的回调函数,判断响应的数据类型,如果是JSON格式,则使用FileReader来读取文件内容,解析其中的消息并显示警告信息,然后关闭所有通知,并返回。如果不是JSON格式,则将响应的数据转换为URL创建一个隐藏的链接并设置下载属性,然后模拟点击下载

使用时先引入文件中的方法直接调用

exportTemplate () {outExcel('请确认是否需要下载信息模板',"user/downloadExample",{},"人员信息模板.xls");
},

在这里插入图片描述

2、导入

使用el-upload组件,参数有: action(必选参数,上传的地址),headers(设置上传的请求头部),multiple(是否支持多选文件),data(附带的额外参数),name(文件字段名),file-list(上传的文件列表),limit(最大允许上传个数),详情参考Element官方文档。

<template><div><el-upload style="display: inline-block; margin: 0 10px" ref="upload" :show-file-list='false' :headers="headers" :action="action" :on-success="handleSuccess" :on-error="hadleError" :limit="1" :file-list="fileList"><el-button type="primary"><img class="img" src="@/assets/image/xinxi2.png" alt="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;导入</el-button></el-upload></div>
</template><script>
export default {data () {return {fileList: [],action:process.env.VUE_APP_BASE_API + "user/importData",headers: {Authorization:"token " + 'XXX'},}},methods: {// 上传成功handleSuccess (response, file, fileList) {this.$refs.upload.clearFiles();if (fileList[0].response.code === 1) {this.fileList = [];this.$message.success("上传成功!!!");} else {this.fileList = [];this.$message.error(fileList[0].response.msg);}},// 上传失败hadleError (err, file, fileList) {console.log(error)this.$refs.upload.clearFiles();this.fileList = [];const result = JSON.parse(error.message);this.$message.error(result.msg);},}
}
</script>

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

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

相关文章

赋能数据检索:构建用于www.sohu.com的新闻下载器

引言 在信息爆炸的时代&#xff0c;随着新闻数据的数量不断增长&#xff0c;获取和分析这些数据变得尤为关键。本文将介绍如何构建一个高效的新闻下载器&#xff0c;专门用于从搜狐网&#xff08;www.sohu.com&#xff09;检索和下载新闻内容。 背景介绍 搜狐网作为中国领先…

区块链和IPFS安全测试工具;ECC+AES混合加密机制:秘钥管理

目录 区块链和IPFS安全测试工具 区块链测试工具:Caliper,BlockEmulator IPFS测试工具:Testgrou

vite与webpack有什么不同?为什么vite比webpack快?

1. 定位 webpack、rollup、esbuild 都是打包工具&#xff0c;对代码进行压缩、合并、转换、分割、打包等操作&#xff0c;都需要打包工具去完成 vue-cli、umi 是基于 webpack 的上层封装&#xff0c;通过简单配置能快速搭建起一个项目&#xff08;用 webpack 去搭建项目需要配…

iOS(Object C) 快速排序

快速排序使用分治法,把一个数组分为两个子数组 本质上来看&#xff0c;快速排序应该算是在冒泡排序基础上的递归分治法。 快速排序的思想: 1.找到一个基准元素(通常是数组里的第一元素) 2.从右边开始遍历,找到一个比基准数小的值(minValue),将minValue放到基准值的初始位置,…

40. 【Android教程】AsyncTask:异步任务

在前面的章节有提到过&#xff0c;Android 系统默认会在主线程&#xff08;UI 线程&#xff09;执行任务&#xff0c;但是如果有耗时程序就会阻塞 UI 线程&#xff0c;导致页面卡顿。这时候我们通常会将耗时任务放在独立的线程&#xff0c;然后通过 Handler 等线程间通信机制完…

外贸干货|客户迟迟不付款,怎么催?

(一) Gentle reminder 温馨提醒 "Hello Mary, l hope this message finds you well. l wanted to kindly remind you about the payment for our agreed-upon order. We appreciate your business and would like to proceed with the next steps as soon as possible.…

DS32K查看内置寄存器数值

需要在debug的时候进行查看&#xff0c;先暂停&#xff0c;再打开EmbSys Registers窗口。 需要先将导出的内容选中并双击&#xff0c;不然复制出来会变成问号。右上角有个复制按钮&#xff0c;复制到剪贴板就行。譬如我这里选择了MCR寄存器&#xff0c;复制出来的就是这个寄存器…

下载nvm来配置node版本

背景提示&#xff1a;入职的公司项目久远&#xff0c;一直运行不起来&#xff0c;原来是我node版本太高&#xff0c;需要降级才行。然后找到这个nvm配置一下 准备工作 如果电脑有配置node的&#xff0c;需要先卸载掉才能配置nvm&#xff01;&#xff01;&#xff01;这是重点嗷…

Leetcode双指针刷题(一)

给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须仅使用 O(1) 额外空间并 原地 修改输入数组。 元素的顺序可以改变。你不需要考虑数组中超出新长度后面…

播放相关知识-持续更新

一&#xff1a;基础知识&#xff1a; 1.编码方式&#xff1a; H264&#xff1a; H265&#xff1a; AV1&#xff1a; 1.多码流&#xff0c;为什么现在视频播放有这么多的码流&#xff08;100、200、300、400、500、600、800、1020等等&#xff09; 优点&#xff1a;用户不同的…

大模型解决方案:具体业务场景下的智能表单填充(附代码)

大模型相关目录 大模型,包括部署微调prompt/Agent应用开发、知识库增强、数据库增强、知识图谱增强、自然语言处理、多模态等大模型应用开发内容 从0起步,扬帆起航。 大模型应用向开发路径:AI代理工作流大模型应用开发实用开源项目汇总大模型问答项目问答性能评估方法大模型…

在组件页面刷新为什么触发不了组件的生命周期销毁钩子

当在前端开发中遇到组件页面刷新时&#xff0c;无法触发组件生命周期的销毁钩子&#xff08;如 Vue 的 beforeDestroy/destroyed 或 React 的 componentWillUnmount&#xff09;&#xff0c;通常有以下几种情况或原因&#xff1a; 页面刷新的本质&#xff1a;当浏览器页面执行刷…

JS -正则表达式

正则表达式 关于正则表达式&#xff0c;其实我写过几篇了&#xff0c;但是真正的正则表达式其实主要用于定义一些字符串的规则&#xff0c;计算机根据给出的正则表达式&#xff0c;来检查一个字符串是否符合规则。 我们来看一下&#xff0c;在JS中如何创建正则表达式对象。 语…

网络不更新,LOSS正常输出。

据别的文章说&#xff0c;学习率过高或者adam算法没加入eps参数也可能导致模型输出nan. 这个可以一开始就加上试试。先判断loss是否正常&#xff0c;再使用判断梯度是否正常。出现NAN。 loss.backward()for name, parms in model.named_parameters():if parms.grad is None or…

第67天:APP攻防-Frida反证书抓包移动安全系统资产提取评估扫描

思维导图 案例一&#xff1a;内在-资产提取-AppinfoScanne AppinfoScanner 一款适用于以 HW 行动/红队/渗透测试团队为场景的移动端(Android、iOS、WEB、H5、静态网站)信息收集扫描工具&#xff0c;可以帮助渗透测试工程师、攻击队成员、红队成员快速收集到移动端或者静态 WEB …

【禅道客户案例】小反馈,大杠杆!银丰新融「反馈管理」优秀实践

企业介绍 北京银丰新融科技开发有限公司&#xff08;简称&#xff1a;银丰新融&#xff09;成立于2000 年&#xff0c;自创立以来一贯专注于金融监管、风险管控等领域的信息系统建设&#xff0c;拥有目前国内金融风险领域规模庞大的信息技术服务团队。 银丰新融业务范围覆盖了…

VUE3 ref,props,生命周期

1.--ref属性 1.1代码 1.1.1子表 <template><div class"person"><h1>中国</h1><h2 ref"title2">北京</h2><h3>尚硅谷</h3><button click"showLog">点我输出h2这个元素</button>&l…

JavaScript注释:单行注释和多行注释详解

为了提高代码的可读性&#xff0c;JS与CSS一样&#xff0c;也提供了注释功能。JS中的注释主要有两种&#xff0c;分别是单行注释和多行注释。 在编程的世界里&#xff0c;注释是那些默默无闻的英雄&#xff0c;它们静静地站在代码的背后&#xff0c;为后来的维护者、为未来的自…

到底什么是爬虫

1. 引言 在数据驱动的世界里&#xff0c;网络爬虫&#xff08;Web Crawling&#xff09;技术扮演着获取和处理网上数据的关键角色。无论是为了数据分析、机器学习项目的数据集构建还是简单地监测网页变化&#xff0c;学习如何创建一个基本的网页爬虫可以大大提升你的工作效率和…

Vue页面生成导出PDF文件

第一种&#xff1a; 使用浏览器自带打印方法window.print(); 也可使用print-js插件&#xff08;原理相同&#xff09; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>printDemo</title> </…