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

原创 于 2025-01-13 10:54:11 发布 · 701 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #excel #javascript

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

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

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

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的URL
      const 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（）中开发方法逻辑

  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）页面展示
在这里插入图片描述

Vue3 导出 txt 和 excel
FitnessSnail的博客
12-25 813
回头看看，感觉挺不错！记录，做专属的备忘录，
Vue中前端导出word文件
热门推荐
CRMEB小程序商城的博客
09-25 1万+
上介绍page-break-before属性已经被break-before属性替代，但是经过我实际测试发现当html字符串是page-break: always时生成的word文件没有分页效果，反而是将其替换回page-break-before后实现了分页效果。顾名思义，这个方法就是将我们在页面上书写的html代码直接转换成word文件，这也是我最推荐的一种方法，因为大部分的样式可控，且毕竟是我们较为熟悉的方式。另外需要注意的是，若是需要在word中添加分页符，在需要分页的内容处添加CSS属性。
txt导入导出
11-27
txt导入导出工具类 测试用例已附上，请自行测试，可以直接在项目中使用
vue导出为txt文件
m0_46383567的博客
12-11 1904
<el-button size="mini" @click="exportTxt(scope.$index, scope.row)">导出</el-button> // 导出 exportTxt(index,row){ cdkExport({batchId:row.id,status:0}).then(res=>{ const element = document.createElement('a') element.se
Vue3导出数据为txt文件
wsdshdhdhd的博客
02-04 1672
上述代码中，首先创建了一个Blob对象，该对象用于存储待导出的文档内容。接着，使用URL.createObjectURL()方法根据Blob对象创建了一个下载链接。然后，通过创建一个带有下载链接的a标签，并设置下载文件的名称，来实现下载操作。首先，你需要在Vue组件中创建一个方法来生成txt文档的内容。你可以使用普通的Javascript字符串操作来创建文档内容，比如将文本字符串拼接成一段段文字。在Vue3中，可以通过使用Blob对象以及URL.createObjectURL()方法导出txt文档。
SpringBoot整合EasyExcel+MyBatis-Plus实现Excel批量导入和导出
05-03
导出时，使用`write`方法，传入`OutputStream`和Excel模板数据： ```java @RestController @RequestMapping("/excel") public class ExcelController { @Autowired private UserService userService; @...
虎彩企业级中后台管理系统模板_基于Vue30TypeScript的企业级前端解决方案_集成单点登录权限管理表单生成Excel导入导出PDF处理图表展示富文本编辑器等.zip
最新发布
08-12
该模板基于Vue3和TypeScript技术栈构建，是面向企业级应用的前端解决方案，它集成了众多功能模块，旨在提升开发效率，确保系统的可维护性和扩展性。 Vue3是一个渐进式JavaScript框架，它以数据驱动和组件化的思想...
Vue3结合TypeScript实现Excel与PDF在线编辑导入导出
本项目以现代前端技术栈为核心，基于 Vue3 与 TypeScript 构建了一个功能完备的在线文档处理系统，重点实现了 Excel 和 PDF 文件的导入、在线编辑与导出功能。通过集成 Luckysheet 和 PDF.js 两大开源库，该项目为...
Vue中集成SpreadJS实现Excel功能的完整指南
Vue集成SpreadJS是现代前端开发中实现复杂电子表格功能的重要技术方案之一。随着Web应用对数据处理能力要求的不断提升，开发者需要在浏览器端提供类似Excel的强大功能，如公式计算、单元格格式设置、图表生成、数据...
Word和Excel文档转换为HTML的方法
将Word和Excel文档转换为HTML格式是现代办公自动化、网页内容发布以及跨平台信息共享中的关键技术之一。这一过程不仅涉及文件格式的简单转换，更深层次地体现了数据结构化、内容可移植性以及前端展示能力的融合。...
vue将返回结果(字符串)导出.txt文件
yxy5120的博客
09-15 2968
vue将返回结果(字符串)导出.txt文件
vue导出文本文件
qq_44286009的博客
06-30 1616
vue将数据写入文本文件并下载。我们通常用到的功能往往是导出EXCEL文件、PDF文件等，导出普通的文本文件用的很少，但也有可能会在工作中遇到，所以今天分享一个vue前端导出文本文件的方式。
vue（前端）字符串导出.txt文件
qwe19991123的博客
03-23 1397
首先安装 FileSaver包,npm install file-saver --save 引入 import {saveAs} from 'file-saver'; 将字符串转为Blob对象 let str = new Blob(['要导出的字符串'], {type: 'text/plain;charset=utf-8'}); saveAs(str, `导出文件时的名字.txt`); 注意这里要手动写上文件的后缀名 ...
vue导出excel、txt、csv文件
GISer的顽强开发之路
10-12 586
基于xlsx、file-saver库导出excel、txt、csv文件
vue-电脑端导出-txt
weixin_34413357的博客
12-07 2273
// fakeClick(obj) { // var ev = document.createEvent("MouseEvents"); // ev.initMouseEvent( // "click", // true, // false, // window, // 0,...
vue json、txt文件导出功能
Y丶小琪
06-07 886
普通的excell文件等，通过window.location.href = `${window.location.origin}${pth}?r=${Math.random()}`或者创建a标签，触发click事件就可以直接讲文件下载下来，json、txt文件，浏览器自动在新窗口打开，展示文件内容，需要添加download属性，他可以使a标签的href属性进行下载，如果填写指就会更改你的下载名称...
Vue下载txt格式的文件
qq_39548550的博客
07-27 2017
Vue下载txt格式的文件
【Vue】导出文件
baidu_hxl的博客
06-16 1039
1. 定义接口 导出文件的请求类型为：responseType: "blob" export function download (url, params) { if (!params) { params = {} } return new Promise((resolve, reject) => { axios.get(url, { params: params, headers: { 'Access-Control-Allow-Creden
vue（前端）字符串保存导出.txt文件
阿小绿的博客
06-19 6619
1.安装 FileSaver包 npm install file-saver --save 2.在main.js中全文引入 import {saveAs} from 'file-saver'; 3.将字符串转为Blob对象（然后触发这个事件就能成功啦） var data = '要导出的内容' let str = new Blob([data], {type: 'text/plain;charset=utf-8'}); // 注意这里要手动写上文件的后缀名 saveAs(str, `导出文件时的名字.t
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值