vue集成导出 txt文本文档 和 excel文档 的方法

embedded/2025/1/15 4:00:07/

1、导出txt文档方法
（1）在template中定义方法

<template>
<li><el-button class="download" type="success" @click="download">下载</el-button>
</li>
</template>

（2）在methods（）中开发方法逻辑

javascript">download() {var index = this.area - 1;var name = this.areaList[index].name;console.log("this.area.name ====", this.areaList[index].name);// 创建一个新的Blob对象，内容类型为纯文本// console.log(this.tableData);var date = moment(this.date).format("YYYY-MM-DD");var txt = date + name + "车辆使用情况 \r\n";var whiteAllRunTime = 0;var whiteAllVehicleTime = 0;var nightAllRunTime = 0;var nightAllVehicleTime = 0;var whiteVehicleCount = 0;var nightVehicleCount = 0;var whiteStorageCount = 0;var nightStorageCount = 0;var count = 0;var useVehicleNameList = []; //使用车辆列表var unUseVehicleNameList = []; //未使用车辆列表var whiteUseVehicleNameList = []; //白班使用车辆列表var nightUseVehicleNameList = []; //晚班使用车辆列表this.tableData.map((item) => {var usageRate = parseFloat(item.whiteData.usageRate);var usageRate2 = parseFloat(item.nightData.usageRate);whiteAllRunTime += item.whiteData.allRunTime;whiteAllVehicleTime +=item.whiteData.allRunTime + item.noTask.whiteData.chargeTime;nightAllRunTime += item.nightData.allRunTime;nightAllVehicleTime +=item.nightData.allRunTime + item.noTask.nightData.chargeTime;whiteStorageCount += item.whiteData.transportQty;nightStorageCount += item.nightData.transportQty;if (usageRate == 0 && usageRate2 == 0) {count++;unUseVehicleNameList.push(item.vehicleName);} else {useVehicleNameList.push(item.vehicleName);if (usageRate > 0) {whiteVehicleCount++;whiteUseVehicleNameList.push(item.vehicleName);}if (usageRate2 > 0) {nightVehicleCount++;nightUseVehicleNameList.push(item.vehicleName);}}});txt += "投入使用的车辆共有  " + (this.tableData.length - count) + "辆";if (useVehicleNameList.length > 0) {var useVehicleText = "";for (var i = 0; i < useVehicleNameList.length; i++) {if (useVehicleNameList.length - 1 == i) {useVehicleText += useVehicleNameList[i];} else {useVehicleText += useVehicleNameList[i] + ", ";}}txt += ",分别为: " + useVehicleText;}txt += "\r\n未投入使用车辆共有  " + count + "辆";if (unUseVehicleNameList.length > 0) {var unUseVehicleText = "";for (var i = 0; i < unUseVehicleNameList.length; i++) {if (unUseVehicleNameList.length - 1 == i) {unUseVehicleText += unUseVehicleNameList[i];} else {unUseVehicleText += unUseVehicleNameList[i] + ", ";}}txt += ",分别为: " + unUseVehicleText;}txt += "\r\n（1）白班：\r\n共有" + whiteVehicleCount + "台车辆投入使用";if (whiteUseVehicleNameList.length > 0) {var whiteUseVehicleText = "";for (var i = 0; i < whiteUseVehicleNameList.length; i++) {if (whiteUseVehicleNameList.length - 1 == i) {whiteUseVehicleText += whiteUseVehicleNameList[i];} else {whiteUseVehicleText += whiteUseVehicleNameList[i] + ", ";}}txt += ", 分别为： " + whiteUseVehicleText;}txt +="\r\n运行总时长：" +this.commonService.formatSecond(whiteAllRunTime) +"\r\n";var whiteAllRunTimeRate = 0;if (whiteVehicleCount > 0) {whiteAllRunTimeRate = ((whiteAllRunTime * 100) /this.baseTime /3600 /whiteVehicleCount).toFixed(2);}txt += "车辆平均使用率：" + whiteAllRunTimeRate + "%\r\n";var whiteAllVehicleTimeRate = 0;if (whiteVehicleCount > 0) {whiteAllVehicleTimeRate = ((whiteAllVehicleTime * 100) /this.baseTime /3600 /whiteVehicleCount).toFixed(2);}txt +="车辆毛运行总时长：" +this.commonService.formatSecond(whiteAllVehicleTime) +"\r\n";txt += "车辆毛平均使用率：" + whiteAllVehicleTimeRate + "%\r\n";txt += "出入库总次数：" + whiteStorageCount + "次\r\n";txt += "\r\n（2）晚班：\r\n共有" + nightVehicleCount + "台车辆投入使用";if (nightUseVehicleNameList.length > 0) {var nightUseVehicleNameText = "";for (var i = 0; i < nightUseVehicleNameList.length; i++) {if (nightUseVehicleNameList.length - 1 == i) {nightUseVehicleNameText += nightUseVehicleNameList[i];} else {nightUseVehicleNameText += nightUseVehicleNameList[i] + ", ";}}txt += ", 分别为： " + nightUseVehicleNameText;}txt +="\r\n运行总时长：" +this.commonService.formatSecond(nightAllRunTime) +"\r\n";var nightAllRunTimeRate = 0;if (nightVehicleCount > 0) {nightAllRunTimeRate = ((nightAllRunTime * 100) /this.baseTime /3600 /nightVehicleCount).toFixed(2);}txt += "车辆平均使用率：" + nightAllRunTimeRate + "%\r\n";var nightAllVehicleTimeRate = 0;if (nightVehicleCount > 0) {nightAllVehicleTimeRate = ((nightAllVehicleTime * 100) /this.baseTime /3600 /nightVehicleCount).toFixed(2);}txt +="车辆毛运行总时长：" +this.commonService.formatSecond(nightAllVehicleTime) +"\r\n";txt += "车辆毛平均使用率：" + nightAllVehicleTimeRate + "%\r\n";txt += "出入库总次数：" + nightStorageCount + "次\r\n";txt += "\r\n\r\n\r\n以下为该基地各小车运行详细数据，请根据需要查看：";this.tableData.map((item) => {var usageRate = parseFloat(item.whiteData.usageRate);var usageRate2 = parseFloat(item.nightData.usageRate);if (usageRate == 0 && usageRate2 == 0) {} else {txt += "\r\n\r\n" + item.vehicleName + "号车\r\n";if (usageRate > 0) {var allRate = (((item.whiteData.allRunTime + item.noTask.whiteData.chargeTime) *100) /this.baseTime /3600).toFixed(2);txt += "白班：\r\n";txt +="车辆运行总时长：" +this.commonService.formatSecond(item.whiteData.allRunTime) +"\r\n";txt += "订单任务使用率：" + item.whiteData.usageRate + "%\r\n";txt += "车辆毛使用率：" + allRate + "%\r\n";txt +="订单任务时长：" +this.commonService.formatSecond(item.whiteData.transportTime) +"，次数：" +item.whiteData.transportQty +"\r\n";txt +="充电任务时长：" +this.commonService.formatSecond(item.whiteData.chargeTime) +"，次数：" +item.whiteData.chargeQty +"\r\n";txt +="停车任务时长：" +this.commonService.formatSecond(item.whiteData.parkTime) +"，次数：" +item.whiteData.parkQty +"\r\n";txt +="充电桩充电时长：" +this.commonService.formatSecond(item.noTask.whiteData.chargeTime) +"\r\n";}if (usageRate2 > 0) {txt += "晚班：" + "\r\n";txt +="车辆运行总时长：" +this.commonService.formatSecond(item.nightData.allRunTime) +"\r\n";txt += "订单任务使用率：" + item.nightData.usageRate + "%\r\n";txt +="订单任务时长：" +this.commonService.formatSecond(item.nightData.transportTime) +"，次数：" +item.nightData.transportQty +"\r\n";txt +="充电任务时长：" +this.commonService.formatSecond(item.nightData.chargeTime) +"，次数：" +item.nightData.chargeQty +"\r\n";txt +="停车任务时长：" +this.commonService.formatSecond(item.nightData.parkTime) +"，次数：" +item.nightData.parkQty +"\r\n";txt +="充电桩充电时长：" +this.commonService.formatSecond(item.noTask.nightData.chargeTime) +"\r\n";}}});const blob = new Blob([txt], {type: "text/plain;charset=utf-8",});// 创建一个指向该Blob的URLconst url = URL.createObjectURL(blob);// 创建一个a标签const link = document.createElement("a");link.href = url;link.setAttribute("download", date + name + "车辆使用情况.txt");document.body.appendChild(link);// 触发下载link.click();// 清理document.body.removeChild(link);URL.revokeObjectURL(url);},},

（3）页面展示
在这里插入图片描述

2、导出excel方法
（1）在template中定义方法

<template>
<li><el-button class="download" type="success" @click="download">下载</el-button>
</li>
</template>

（2）在methods（）中开发方法逻辑

javascript">  download() {if (this.area == 0 || !this.endDate || !this.startDate) {this.$message({message: "请选择一个基地或开始时间、结束时间不能为空",type: "warning",});return false;}var s = this.startDate.getTime();var e = this.endDate.getTime();if (e - s < 0) {this.$message({message: "开始时间不能大于结束时间",type: "warning",});return false;}var input ="endDate=" +moment(this.endDate).format("YYYY/MM/DD") +"&startDate=" +moment(this.startDate).format("YYYY/MM/DD");this.isExportXls = true;api.getVehicleSomeTimeDataAsync(this.area, input).then((res) => {// this.isExportXls = false;if (res) {this.exportData = [];var flag = this.area - 1;res.map((item, index) => {var a = {};a.areaName = this.areaList[flag].name;a.vehicleName = item.vehicleName;a.vehicleName = item.vehicleName;a.allRunTime = item.whiteAndNightData.allRunTime;a.transportTime = item.whiteAndNightData.transportTime;a.transportQty = item.whiteAndNightData.transportQty;a.chargeTime = item.whiteAndNightData.chargeTime;a.chargeQty = item.whiteAndNightData.chargeQty;a.parkTime = item.whiteAndNightData.parkTime;a.parkQty = item.whiteAndNightData.parkQty;a.noTaskChargeTime = item.noTask.whiteAndNightData.chargeTime;a.noTaskParkTime = item.noTask.whiteAndNightData.parkTime;if (index % 2 == 0) {a.hasColor = true;} else {a.hasColor = false;}this.exportData.push(a);console.log("this.exportData====",this.exportData);});this.downloadXLS();// this.isExportXls = false;}}).catch(() => {});},downloadXLS() {setTimeout(() => {this.Export2Excel();this.isExportXls = false;console.log("this.isExportXls=====", this.isExportXls);}, 1000);},Export2Excel() {require.ensure([], () => {const { export_json_to_excel } = require("../../excel/Export2Excel");var tHeader = ["基地名称","车辆名称","运行总时长","订单任务时长","订单任务次数","充电任务时长","充电任务次数","停车任务时长","停车任务次数","无任务充电时长","无任务停车时长",];var filterVal = ["areaName","vehicleName","allRunTime","transportTime","transportQty","chargeTime","chargeQty","parkTime","parkQty","noTaskChargeTime","noTaskParkTime",];const list = this.exportData;console.log("this.exportData====", this.exportData);const data = this.formatJson(filterVal, list);export_json_to_excel(tHeader,data,"基地历史数据（" +moment(this.startDate).format("YYYY/MM/DD HH:mm:ss") +"-" +moment(this.endDate).format("YYYY/MM/DD HH:mm:ss"));});},formatJson(filterVal, jsonData) {return jsonData.map((v) =>filterVal.map((j) => {if (j === "allRunTime" || j === "transportTime" || j === "chargeTime" || j === "parkTime" || j === "noTaskChargeTime" || j === "noTaskParkTime") {return this.commonService.formatSecond(v[j]);}else{return v[j];} }));},

（3）页面展示
在这里插入图片描述


http://www.ppmy.cn/embedded/154015.html

相关文章

MR30分布式 IO 在物流分拣线的卓越应用

MR30分布式 IO 在物流分拣线的卓越应用

在当今物流行业高速发展的时代&#xff0c;物流分拣线的高效与精准运作至关重要&#xff0c;而其中对于货物点数较多情况下的有效控制更是一大关键环节。明达技术MR30分布式 IO 系统凭借其独特的优势&#xff0c;在物流分拣线中大放异彩&#xff0c;为实现精准的点数控制提供了…
阅读更多...
RK3568笔记七十二：WIFI管理操作方法测试

RK3568笔记七十二：WIFI管理操作方法测试

若该文为原创文章，转载请注明原文出处。 正点原子的 RK3568 平台默认使用 connman 管理 WiFi ，而且 WiFi 的核心进程 wpa_supplicant 的 启动。正点原子手册提供了测试方法。 注意，正点原子默认 wlan0
阅读更多...
【Rust】数据类型

【Rust】数据类型

目录 思维导图 1. 数据类型概述 1.1 标量类型 1.1.1 整数类型 1.1.2 浮点数类型 1.1.3 布尔类型 1.1.4 字符类型 1.2 复合类型 1.2.1 元组类型 1.2.2 数组类型 2. 类型注解与类型推断 3. 整数溢出处理 4. 数字运算 5. 示例 思维导图 1. 数据类型概述 Rust是一种静…
阅读更多...
【嵌入式常识篇】一个C项目工程在IDE中是怎么一步步编译成一个固件包的

【嵌入式常识篇】一个C项目工程在IDE中是怎么一步步编译成一个固件包的

前言&#xff1a;初学C语言的时候是在Linux环境下&#xff0c;那时候只知道需要通过GCC工具编译成可执行文件才可以在运行&#xff0c;后来进入到了嵌入式行业发现需要IDE将一个C项目工程编译成一个固件包&#xff0c;那时候经常会产生一个疑问&#xff1a;一个C项目工程在IDE中…
阅读更多...
【HTML+CSS+JS+VUE】web前端教程-31-css3新特性

【HTML+CSS+JS+VUE】web前端教程-31-css3新特性

圆角 div{width: 100px;height: 100px;background-color: saddlebrown;border-radius: 5px;}阴影 div{width: 200px;height: 100px;background-color: saddlebrown;margin: 0 auto;box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);}
阅读更多...
Redis数据结构服务器

Redis数据结构服务器

Redis数据结构服务器 什么是Redis数据结构服务器 的概念和特点 是一个开源&#xff08;BSD许可&#xff09;&#xff0c;内存中的数据结构存储服务器&#xff0c;可用作数据库、缓存和消息中间件。它支持多种类型的数据结构&#xff0c;如字符串&#xff08;strings&#xff09…
阅读更多...
服务器引导异常,Grub报错: error: ../../grub-core/fs/fshelp.c:258:file xxxx.img not found.

服务器引导异常,Grub报错: error: ../../grub-core/fs/fshelp.c:258:file xxxx.img not found.

服务器引导异常,Grub报错: error: ../../grub-core/fs/fshelp.c:258:file xxxx.img not found. 1. 故障现象2. 解决思路3. 故障分析4. 案件回溯5. 解决问题 1. 故障现象 有一台服务器业务报无法连接. 尝试用Ping命令发现无法ping通. 通过控制台查看发现有以下报错: error: ..…
阅读更多...
贪心算法汇总

贪心算法汇总

1.贪心算法 贪心的本质是选择每一阶段的局部最优&#xff0c;从而达到全局最优。 如何能看出局部最优是否能推出整体最优 靠自己手动模拟&#xff0c;如果模拟可行&#xff0c;就可以试一试贪心策略&#xff0c;如果不可行&#xff0c;可能需要动态规划。 如何验证可不可以…
阅读更多...
最新文章

Copyright @ 2022~2023