vue Excel导入,下载Excel模板,导出Excel
vue Excel导入,下载Excel模板,导出Excel
vue Excel导入,下载Excel模板
<template> <div style="display: flex;"> <el-button @click="handleDownload" class="button_search" type="primary" size="medium" >下载模板</el-button> <el-upload style="display: inline-block" :action="uploadUrl_file" name="file" :headers="{ 'x-token': token }" :file-list="exportfileList" :on-success="handleFileSuccess" :on-error="handleFileError" :show-file-list="true"> <el-button class="button_search" type="primary" size="medium" >导入</el-button> </el-upload> </div> </template> <script> const rootpath = process.env.VUE_APP_BASE_API; import { getToken } from "@/utils/auth"; var busiContractorImport = "/business/fourth/excel/import.do"; //导入接口 export default { name: 'importExcel', data(){ return{ uploadUrl_file:'', token: getToken() , exportfileList: [], showShade:false } }, mounted() { let vm = this; vm.uploadUrl_file = rootpath + busiContractorImport +"?excelHandler=dictCheckContentByMyselfImportHandler"; //上传地址 }, methods:{ // 下载模板 handleDownload() {
// 把模板放在 : public/excel/隐患排查自建自建隐患库 window.open("excel/隐患排查自建隐患库.xlsx"); }, // 导入 handleFileError(result, file, exportfileList) { this.$notify.error("导入失败,错误:" + result); this.showShade = false; this.exportfileList = []; }, handleFileSuccess(result, file, exportfileList) { var that = this; var code = result.code; if (code === "0") { that.$notify({ title: "成功", message: "导入成功", type: "success", duration: 2000 }); that.$emit("importExcel") } else { that.$notify.error({ title: "导入失败", message: result.msg, duration: 2000 }); } that.showShade = false; that.exportfileList = []; }, } }; </script> <style scoped> </style>
导出Excel
第一步,创建文件: exportData.js
import request from '@/utils/request' import { getToken } from "@/utils/auth"; //列表导出 export function exportsData(params,url,fileName) { return request({ url: url, method: "get", params, responseType: "blob", headers: { "x-token": getToken() } }).then((result) => { const excelBlob = result; const elink = document.createElement("a"); // 创建a标签 elink.download = fileName; elink.style.display = "none"; const blob = new Blob([excelBlob]); elink.href = URL.createObjectURL(blob); document.body.appendChild(elink); elink.click(); document.body.removeChild(elink); }); }
第二步,添加事件
<el-button @click="exportBtn" class="button_search" size="medium" type="primary" >导出</el-button>
import { exportsData } from "@/api/exportData"; //引入接口
//导出数据
exportBtn(){
let that = this;
var date = new Date();
let listQuery = { 接口需要的参数
date:date.getTime(),
current:that.listQuery.current,
size:that.listQuery.size,
sord:'asc'
}
exportsData(listQuery,"/business/fourth/basicList/scqy/export.do","仓库清点.xlsx")
},
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库