vue3+antDesignVue前端纯导出

news2024/11/24 12:28:45

效果
在这里插入图片描述

 <a-button
                  size="default"
                  style="margin-left: 10px"
                  @click="exportData"
                  >导出</a-button
                >

1.下载所需依赖

npm install xlsx --save
npm install file-saver --save
<script setup>
import { reactive, ref } from "vue";
//导入依赖
import * as XLSX from "xlsx/xlsx.mjs";
import { saveAs } from "file-saver";
import { message } from "ant-design-vue";
//导出
const exportData = () => {
  queryAllData();
};
//导出查询的所有数据
const queryAllData = async() => {
  const hide = message.loading('下载中', 0);
  //模拟要导出的数据
  let dataList = [{
   commodityName: "名称",
    classifyName: "分类",
    operationType: "STOCK",
    operationNum: "13",
    currentNum: "34",
    remarks: "备注",
    operator: "操作人",
    createTime: "2012-12-12 12:12:12",
  }];
  dataList.forEach(item => {
    item.operationType = item.operationType == 'STOCK' ? '入库' : '出库';
  })
  console.log('要导出的数据', dataList)
  // 定义表头数据
  let head = {
    commodityName: "商品名称",
    classifyName: "商品分组",
    operationType: "操作",
    operationNum: "操作数量",
    currentNum: "剩余库存",
    remarks: "备注",
    operator: "操作人",
    createTime: "操作时间",
  };
  if (dataList.length > 0) {
    // 准备表头数据
    const headers = ['商品名称', '商品分组', '操作', '操作数量', '剩余库存', '备注', '操作人', '操作时间'];
    exportDataMethods(head, dataList, true, 7, '库存明细导出', headers)
  } else {
    message.warning('暂无数据导出!')
  }
}
 //表格数据导出
  //timeCel要转换时间,时间所在的列数 timeConversion是否要转换时间
  //head  自定义表头  tableData:表格数据
  //headers 自定义表头排序
 const exportDataMethods = (head, tableData, timeConversion, timeCel, fileName, headers) => {
    const hide = message.loading('导出中...', 0);
    console.log(head, tableData, timeConversion, timeCel)
    let timecel = timeCel ? timeCel : '';
    let filename = fileName ? fileName : 'Excel';
    let cols = [];
    //表头数据切换
    let list = tableData.map((item) => {
      cols.push({ wch: 20 })
      const obj = {};
      for (const k in item) {
        if (head[k]) {
          obj[head[k]] = item[k];
        }
      }
      return obj;
    });
    // 创建一个工作表
    const ws = XLSX.utils.json_to_sheet(list, {
      header: headers, // 使用新的表头顺序
    });
    const range = XLSX.utils.decode_range(ws['!ref']);
    if (timeConversion) {
      // 将时间戳列转换为日期字符串
      ws['!cols'] = cols;
      // 将时间戳列转换成日期格式
      for (let i = 1; i <= range.e.r; i++) {
      // const cell = 'D' + i;
        const cell = XLSX.utils.encode_cell({ r: i, c: timecel }); // 时间戳所在的列
        ws[cell].t = 's';
        ws[cell].v = formatDate(ws[cell].v * 1);
      // ws[cell].v = XLSX.SSF.format('yyyy-mm-dd hh:mm:ss', new Date(ws[cell].v));
      }
    }
    console.log('导出表格', ws)
    // 创建一个工作簿
    const wb = XLSX.utils.book_new();
    // 将工作表添加到工作簿中
    XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
    // 将工作簿转换成二进制数据
    const wbData = XLSX.write(wb, { bookType: "xlsx", type: "array" });
    // 创建一个 Blob 对象
    const blob = new Blob([wbData], { type: "application/octet-stream" });
    // 下载文件
    saveAs(blob, fileName + ".xlsx");
    setTimeout(hide, 2500);
  }
 const  formatDate = (value, str) => {
    let date = new Date(value);
    if (str) {
      date = moment(date).format("YYYY年MM月DD日 HH:mm:ss");
    } else {
      date = moment(date).format("YYYY-MM-DD HH:mm:ss");
    }
    return date;
  }
</script>

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

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

相关文章

SpringBoot——多环境开发

简单介绍&#xff1a; 在我们的开发过程中&#xff0c;我们的程序开发分为几个基本的阶段&#xff0c;比如开发阶段&#xff0c;调试阶段&#xff0c;运行阶段&#xff0c;在不同的阶段可能需要有不同的配置文件去对我们的项目做配置&#xff0c;那么要如何在不同的环境中配置…

C语言:数组定义方式

一、数组简介 <1>前言 大家首先来思考一个问题&#xff0c;若是我们想要定义两个变量&#xff0c;求这两个数的平均数&#xff0c;该怎么求呢&#xff1f; 例如&#xff1a;int a 10,b 20 int average (a b) / 2; 上面的公式&#xff0c;我相信大家应该很快就能够求出…

牛奶蛋白过敏VS乳糖不耐受,看完这篇终于分清了

乳糖不耐受 乳糖不耐症的主要表现为一些胃肠道症状&#xff0c;有腹部紧张、肠鸣、腹痛、排气和腹泻等症状。如出现这些症状都是乳糖不耐受症的表现之一&#xff0c;但患有乳糖不耐的个体症状差异很大&#xff0c;而严重的乳糖不耐受多于摄入一定量乳糖后30min至数小时内发生。…

Python安装教程2023(小白专用)已验证

第一次接触Python&#xff1f;下面从一个完全不懂的Python 的小白来安装Python 等一系列工作的记录&#xff0c;并且遇到的问题也会写出&#xff0c;让完全不懂的小白也可上手安装&#xff0c;并且完成第一个Hello world代码。 [Python 安装] 目前&#xff0c;Python有两个版本…

【手机建站】Android Termux+cpolar内网穿透,搭建外网可以访问的网站

文章目录 概述1.搭建apache2.安装cpolar内网穿透3.公网访问配置4.固定公网地址5.添加站点 概述 Termux是一个Android终端仿真应用程序&#xff0c;用于在 Android 手机上搭建一个完整的Linux 环境&#xff0c;能够实现Linux下的许多基本操作&#xff0c;不需要root权限Termux就…

Word怎么转换成PDF免费?分享适合你的Word转PDF方法

随着数字化时代的到来&#xff0c;将文件转换为PDF格式已经成为一个常见的需求。PDF文件格式的广泛应用使其在各个领域都非常重要&#xff0c;而Word文档则是最常见的文件类型之一。因此&#xff0c;将Word转换为PDF的方法备受关注。在下面&#xff0c;我将分享一种适合任何人使…

基于ARIMA-CNN-LSTM预测模型研究(Python代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

大数据服务之linux中安装hadoop

安装hadoop之前&#xff0c;必须要先有jdk。所以jdk 在linux环境中配置java全局变量 第一步&#xff0c;下载 下载地址&#xff1a;Index of /dist/hadoop/common/hadoop-3.1.3 第二步&#xff0c;解压 tar -zxvf hadoop-3.1.3.tar.gz 第三步&#xff0c;获取文件路径 pw…

站的更高一点看分布式系统中的复制

复制意味着在通过网络连接的多台机器上保留相同数据的副本。 我们希望能复制数据&#xff0c;可能出于各种各样的原因&#xff1a; 使得数据与用户在地理上接近&#xff08;从而减少延迟&#xff09;即使系统的一部分出现故障&#xff0c;系统也能继续工作&#xff08;从而提…

网络带宽管理

网络某一部分的带宽使用过多&#xff0c;可能会影响整个网络的性能&#xff0c;带宽问题甚至会影响业务关键型服务并导致网络停机。在企业中保持稳定的网络性能可能具有挑战性&#xff0c;因为采用数字化的网络可扩展性和敏捷性应该与组织的发展同步。随着基础设施的扩展、新应…

flask+p5.js 网页开发 pycharm mac环境

flask 学习参考视频&#xff1a; 2023版-零基础玩转Python Flask框架-学完可就业 一、安装 需要安装的&#xff1a; python、flask、pycharm mysql、Navicat&#xff08;这两个不用数据库可以不用安装&#xff09; 1、python3.0以上安装 下载地址 下载以后终端输入python3 …

Vue入门学习笔记(1)

这里写目录标题 一、安装工具二、前置设置2.1 淘宝加速2.2、华为云加速 三、安装vue工具3.1 安装vue/cli3.2 安装vite 四、创建项目4.1 使用vue/cli创建4.2 使用vite创建 一、安装工具 首先须安装以下工具&#xff1a; vscode&#xff08;如果下载慢的话建议使用360安装&…

select

1. select模型 2. select()函数 int select(int nfds, fd_set *readfds, fd_set *writefds,fd_set *exceptfds, struct timeval *timeout);fd_set类型 readfds和writefds, exceptfds的类型都是fd_set,那么fd_set类型是什么呢&#xff1f; fd_set类型本质是一个位图&#xff0…

Word怎么生成目录?4个方法快速生成目录!

案例&#xff1a;Word怎么生成目录 【想问下大家在使用Word时是怎么生成目录的呀&#xff1f;正在写毕业论文的我真的很急&#xff01;感谢&#xff01;】 Word作为我们常用的办公软件&#xff0c;为我们的提供了很多便利。生成目录是在Word文档中创建一个方便导航的索引。 …

Go语言基于Viper封装实现

基于Viper的封装 Viper是什么 Viper是一个用于Go语言应用程序的配置管理库。它提供了一种简单而灵活的方式来处理应用程序的配置&#xff0c;支持多种格式的配置文件&#xff0c;并提供了一组API来读取和使用这些配置。 Viper支持多种配置文件格式&#xff0c;包括JSON、TOML、…

C learning_14 指针篇之破解版

目录 1. 指针是什么 指针变量 2. 指针和指针类型 那指针类型的意义是什么&#xff1f; 3. 野指针 规避野指针 4. 指针运算 指针-整数 指针-指针 指针的关系运算(比较指针的大小) 5. 指针和数组 6. 二级指针 7. 指针数组 1. 指针是什么 指针是C语言中一种非常重要的…

2023年美国大学生数学建模竞赛E题光污染解题全过程文档及程序

2023年美国大学生数学建模竞赛 E题 光污染 原题再现&#xff1a; 背景   光污染被用来描述任何过度或不良地使用人造光。我们所说的一些光污染现象包括光侵入、过度照明和光杂波。在大城市&#xff0c;这些现象最容易被观测到的是太阳落山后天空中的一道辉光; 然而&#xf…

网课录屏怎么录?分享3个录制网课方法!

案例&#xff1a;怎样才能录制清晰流畅的网课视频&#xff1f; 【我最近在网上购买了一个配音的课程&#xff0c;每天晚上8点老师会进行讲课&#xff0c;但是课程没有回放。我想通过录屏的方式将课程内容录制下来&#xff0c;那怎样才能录制清晰流畅的网课视频呢&#xff1f;】…

初识Mybatis -- Mybatis入门保姆级教程(一)

文章目录 前言一、认识mybatis1.mybatis是什么2.jdbc缺点3.mybatis优点4.MyBatis框架解决JDBC劣势 二、mybatis入门案例1.需求分析与操作步骤2.创建表tb_user、实体类和Mapper接口3.创建maven模块re_mb_demon4.在pom.xml配置文件中导入相关依赖5. 配置相关文件6.创建并编写模拟…

百汇BCR:十个外汇交易常见问题解析

外汇交易是一种受到市场欢迎的投资方式&#xff0c;参与交易很容易&#xff0c;但想要盈利却很难。特别是一些细节问题容易被忽略&#xff0c;百汇BCR小编整理了十个外汇交易常见问题供有需要的投资者借鉴学习。 问题一、外汇开户需要哪些资料&#xff1f; 个人相关信息资料、…