前端vue3实现导出xlsx、txt格式文件

最新推荐文章于 2025-06-06 11:33:01 发布
最新推荐文章于 2025-06-06 11:33:01 发布
阅读量544 收藏 7
点赞数 6
CC 4.0 BY-SA版权
文章标签： 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ThreeKims/article/details/146531171

1.灵感

一般来说由后端写导出的格式文件，但是有的时候数据不是很多，所以前端完成小数据的导出功能会很方便，今天给大家介绍一款 xlsx 库，用于导出不同格式文件

2.逻辑代码

（1）安装
pnpm install xlsx-js-style
pnpm install file-saver
（2）导入
import * as XLSX from "xlsx-js-style"; // 导入 xlsx 库
import { saveAs } from "file-saver"; //导入生成.txt 库
（3）导出Excel表逻辑
// 模拟表数据
const printData = ref([
  {
    Ksh: 20250101,
    ks_Zkz: "20250101ZK001",
    BMH: "420101199001010001",
    XM: "张三",
    XQ: "武汉市",
    kspc: "2025-1-01",
    ksz: "A1",
    kcDm: "KC01",
    kcZb: "01",
    xh: 1,
    ErType: "数学",
    ErOneScore: 85.5,
    OneScoreTime: "2025-03-01 09:00:00",
    ErSecScore: 90.0,
    SecScoreTime: "2025-03-05 09:00:00",
    ErThrScore: 92.5,
    ThrScoreTime: "2025-03-10 09:00:00"
  },
  {
    Ksh: 20250102,
    ks_Zkz: "20250102ZK002",
    BMH: "420102199101010002",
    XM: "李四",
    XQ: "黄石市",
    kspc: "2025-1-02",
    ksz: "B2",
    kcDm: "KC02",
    kcZb: "02",
    xh: 2,
    ErType: "英语",
    ErOneScore: 88.0,
    OneScoreTime: "2025-03-02 09:00:00",
    ErSecScore: 86.5,
    SecScoreTime: "2025-03-06 09:00:00",
    ErThrScore: 87.0,
    ThrScoreTime: "2025-03-11 09:00:00"
  },
  {
    Ksh: 20250103,
    ks_Zkz: "20250103ZK003",
    BMH: "420103199201010003",
    XM: "王五",
    XQ: "荆州市",
    kspc: "2025-1-03",
    ksz: "C3",
    kcDm: "KC03",
    kcZb: "03",
    xh: 3,
    ErType: "物理",
    ErOneScore: 78.0,
    OneScoreTime: "2025-03-03 09:00:00",
    ErSecScore: 82.5,
    SecScoreTime: "2025-03-07 09:00:00",
    ErThrScore: 80.0,
    ThrScoreTime: "2025-03-12 09:00:00"
  },
  {
    Ksh: 20250104,
    ks_Zkz: "20250104ZK004",
    BMH: "420104199301010004",
    XM: "赵六",
    XQ: "宜昌市",
    kspc: "2025-1-04",
    ksz: "D4",
    kcDm: "KC04",
    kcZb: "04",
    xh: 4,
    ErType: "化学",
    ErOneScore: 90.0,
    OneScoreTime: "2025-03-04 09:00:00",
    ErSecScore: 91.0,
    SecScoreTime: "2025-03-08 09:00:00",
    ErThrScore: 92.0,
    ThrScoreTime: "2025-03-13 09:00:00"
  },
  {
    Ksh: 20250105,
    ks_Zkz: "20250105ZK005",
    BMH: "420105199401010005",
    XM: "钱七",
    XQ: "襄阳市",
    kspc: "2025-1-05",
    ksz: "E5",
    kcDm: "KC05",
    kcZb: "05",
    xh: 5,
    ErType: "生物",
    ErOneScore: 82.0,
    OneScoreTime: "2025-03-05 09:00:00",
    ErSecScore: 84.0,
    SecScoreTime: "2025-03-09 09:00:00",
    ErThrScore: 85.0,
    ThrScoreTime: "2025-03-14 09:00:00"
  }
]);

// 导出xlsx

const exportExcel = () => {
  // 列配置，第一行的表头
  const adjustedColumns = [
    { label: "考试号", prop: "ksh" },
    { label: "准考证号", prop: "ksZkz" },
    { label: "身份证号", prop: "bmh" },
    { label: "姓名", prop: "xm" },
    { label: "县区", prop: "xq" },
    { label: "考试批次", prop: "kspc" },
    { label: "考试组", prop: "ksz" },
    { label: "考场", prop: "kcDm" },
    { label: "考场组", prop: "kcZb" },
    { label: "序号", prop: "xh" },
    { label: "考试类型", prop: "erType" },
    { label: "第一次成绩", prop: "erOneScore" },
    { label: "第一次成绩时间", prop: "oneScoreTime" },
    { label: "第二次成绩", prop: "erSecScore" },
    { label: "第二次成绩时间", prop: "secScoreTime" },
    { label: "第三次成绩", prop: "erThrScore" },
    { label: "第三次成绩时间", prop: "thrScoreTime" }
  ];

  const allData: any[] = []; // 储存打印数据
  allData.push(adjustedColumns.map(col => col.label));

  printData.value.forEach(parentItem => {
    // 数据顺序
    // 将 null 转换为空字符串
    const dataRow = adjustedColumns.map(col => {
      const value = parentItem[col.prop];
      return value !== null && value !== undefined ? value : "";
    });

    allData.push(dataRow);
  });

  // 创建并优化工作表
  const ws = XLSX.utils.aoa_to_sheet(allData);
  // 定义统一边框样式
  const fullBorder = {
    top: { style: "thin", color: { rgb: "000000" } },
    left: { style: "thin", color: { rgb: "000000" } },
    bottom: { style: "thin", color: { rgb: "000000" } },
    right: { style: "thin", color: { rgb: "000000" } }
  };
  // 创建样式对象
  const styles = {
    title: {
      font: { bold: true, sz: 12 },
      alignment: { horizontal: "center", vertical: "center" },
      border: fullBorder // 共用边框样式
    },

    data: {
      alignment: { horizontal: "center", vertical: "center" },
      border: fullBorder // 共用边框样式
    }
  };


  // 设置数据行样式（带边框）
  for (let rowIndex = 0; rowIndex < allData.length; rowIndex++) {
    adjustedColumns.forEach((_, colIndex) => {
      const cellAddress = XLSX.utils.encode_cell({ r: rowIndex, c: colIndex });

      // 设置表头行样式（第一行）
      if (rowIndex === 0 && ws[cellAddress]) {
        ws[cellAddress].s = styles.title; // 应用标题样式
      }
      // 设置数据行样式
      else if (ws[cellAddress]) {
        ws[cellAddress].s = styles.data; // 应用数据行样式
      }
    });
  }
  // 设置列宽
  ws["!cols"] = adjustedColumns.map(col => {
    if (col.label === "身份证号") return { width: 30 };
    return { width: 25 };
  });
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, "学生信息明细");
  XLSX.writeFile(wb, "信息报表.xlsx");
};
至此，一个完整的Excel表就完成了

（4）导出txt文件逻辑
// TXT导出逻辑
const exportTXT = (data: any[]) => {
  // 定义列宽，每列的宽度根据最大数据长度确定
  const columnWidths = [16, 20, 25, 14, 12, 12, 12, 12, 12, 12, 12, 15, 25, 15, 25, 15, 25];
  const columnWidthsTwo = [15, 20, 25, 10, 15, 18, 18, 18, 18, 25, 15, 20, 30, 20, 35, 22, 25];
  // 生成表头并填充空格确保列宽一致
  const headers = [
    "考试号",
    "准考证号",
    "身份证号",
    "姓名",
    "县区",
    "考试批次",
    "考试组",
    "考场",
    "考场组",
    "序号",
    "考试类型",
    "第一次成绩",
    "第一次成绩时间",
    "第二次成绩",
    "第二次成绩时间",
    "第三次成绩",
    "第三次成绩时间"
  ]
    .map((header, index) => header.padEnd(columnWidths[index])) // 使用 padEnd 填充空格
    .join("");

  // 生成数据行
  const rows = data.map(item =>
    [
      item.ksh,
      item.ksZkz,
      item.bmh,
      item.xm,
      item.xq,
      item.kspc,
      item.ksz,
      item.kcDm,
      item.kcZb,
      item.xh,
      item.erType,
      item.erOneScore,
      item.oneScoreTime,
      item.erSecScore,
      item.secScoreTime,
      item.erThrScore,
      item.thrScoreTime
    ]
      .map((value, index) => {
        // 判断值是否为 null，如果是则替换为空字符串
        const cellValue = value === null || value === undefined ? "" : String(value);
        return cellValue.padEnd(columnWidthsTwo[index]); // 对每个数据值进行填充
      })
      .join("")
  );

  // 合并内容
  const content = [headers, ...rows].join("\n");

  // 创建文件
  const blob = new Blob([content], {
    type: "text/plain;charset=utf-8"
  });
  saveAs(blob, `考生信息_${new Date().toISOString().slice(0, 10)}.txt`);
};
至此，一个完整的txt文件就完成了

Vue 导出前端数据报表为xlsx文件（通用组件）
一碗清深的博客
03-06 632
导出数据报表基本上有两种形式，第一种是前端请求数据之后，后端将数据导出为文件，前端再将文件下载下来；第二种是前端请求数据之后，前端将数据保存到文件。 本文将讲解第二种方法，前端请求数据之后将数据渲染到表格，再通过按钮点击保存到本地文件。
vue多级表头前端下载导出excel，XLSX
weixin_46806380的博客
01-19 931
vue前端实现用插件导出复杂多级表头的excel，无需后端接口。
vue3 + xlsx 实现导出表格，动态获取表头和数据
weixin_61769998的博客
03-01 631
vue3 + xlsx 实现导出表格，动态获取表头和数据
Vue3利用xlsx、xlsx-js-style导出Excel表格初步使用
一名业余前端的博客
03-05 2760
Vue3利用xlsx、xlsx-js-style导出Excel表格初步使用
vue3前端实现导出Excel功能
最新发布
weixin_45561965的博客
06-06 358
1.首先我们需要在vue3的项目中安装xlsx库。可以使用npm 或者 pnpm来进行安装。2.在vue组件中引入xlsx库。加个关注不迷路~~~~我使用的是xlsx库。3.定义导出实例方法。
导出表格数据
dxhhchcf的博客
08-01 78
count++;ws["!
Vue3导出数据为txt文件
wsdshdhdhd的博客
02-04 1525
上述代码中，首先创建了一个Blob对象，该对象用于存储待导出的文档内容。接着，使用URL.createObjectURL()方法根据Blob对象创建了一个下载链接。然后，通过创建一个带有下载链接的a标签，并设置下载文件的名称，来实现下载操作。首先，你需要在Vue组件中创建一个方法来生成txt文档的内容。你可以使用普通的Javascript字符串操作来创建文档内容，比如将文本字符串拼接成一段段文字。在Vue3中，可以通过使用Blob对象以及URL.createObjectURL()方法导出txt文档。
Vue3使用 xlsx 导出excel 数据
Mr. Zhang Xiaojian's Blog
11-08 1166
首先，在你的 Vue 3 项目中使用 npm 或 yarn 安装 xlsx 库。在你的 Vue 组件中，创建一个方法来处理数据并导出 Excel。二、创建一个导出 Excel 的方法。一、安装 xlsx 库。
vue3表格导入导出.xlsx
m0_74060440的博客
12-20 2096
vue3导入导出.xlsx
基于xlsx、xlsx-style框架改进的vue前端页面导出功能（可导出样式、自定义样式、可导出合并单元格）
08-30
基于xlsx、xlsx-style框架改进的vue前端页面导出功能（可导出样式、自定义样式、可导出合并单元格），适用于前端开发人员，在非分页场景下对于table的导出。 主要方法：_export_table_to_excel()，在ExportExcel.js...
【纯前端excel导出】vue3纯前端导出excel，使用xlsx插件，修改样式、合并单元格
11-25
【纯前端excel导出】vue3纯前端导出excel，使用xlsx插件，修改样式、合并单元格
Vue3 导出 txt 和 excel
FitnessSnail的博客
12-25 764
回头看看，感觉挺不错！记录，做专属的备忘录，
vue3导出excel表格方式 ---XLSX文件（最快的导出方法 ）
qq_70703397的博客
03-08 2667
vue3导出excel表格方式 ---XLSX文件（最快的导出方法）
vue3导出excel表格方式之一——xlsx文件
h_jQuery的博客
05-23 2538
下载插件 "element-plus": "^2.2.1", "file-saver": "^2.0.5", "xlsx": "^0.17.4" <script setup> import { reactive, ref } from "vue"; import XLXS from "xlsx"; import FileSaver from "file-saver"; defineProps({ msg: String, }); const count = ref(0); const st
vue3 导出excl文件
zhangyu_98的博客
04-14 2709
vue,表格导出成excl表格
Vue3 表格数据导出xlsx文件
weixin_52072629的博客
09-19 585
开箱即用，简单易上手，保姆级教学
【vue3+xlxs+xlsx-style-vite】vue3项目中使用xlsx插件实现Excel表格的导出和解析，已实现
花椒和蕊的博客
08-15 5548
【vue3+xlxs+xlsx-style-vite】vue3项目中使用xlsx插件实现Excel表格的导出和解析，已实现
vue3中使用xlsx实现表格导出
彭于晏的博客
02-28 539
vue3中使用xlsx实现表格导出
vue3 前端导出excel表格
一个努力搬砖的前端开发
01-04 3557
【代码】vue3 前端表格导出excel（不调用接口）
前端vue3 生成的xlsx文件转化为word格式文件
02-25
<think>嗯，用户想了解如何将Vue3生成的XLSX文件转换为Word格式。首先，我需要确认用户的具体场景。可能他们有一个前端应用，用户导出数据为Excel，但现在需要转成Word，比如生成报告或者其他文档。这时候要考虑转换是在前端还是后端处理。 如果在前端转换，用户可能希望不依赖服务器，减少后端负担。但前端处理复杂文档可能比较麻烦，特别是格式方面。XLSX文件通常用SheetJS处理，而Word文档的话，前端库像docxtemplater或Mammoth.js可能有用，但需要模板或者处理现有文档。 另一个可能性是用户希望在后端转换，这样可以利用更强大的库，比如Python的python-docx或者Node.js的docxtemplater。这时候可能需要前端上传XLSX到后端，处理后下载Word文件。这种方法更可靠，格式控制更好。 用户可能不太清楚前后端的区别，需要解释两者的优缺点。比如前端方案简单但功能有限，后端更灵活但需要服务器支持。还要考虑文件大小，大文件可能不适合前端处理。 另外，用户可能没有提到是否需要保留样式或复杂格式，这会影响库的选择。比如，简单的表格转换可能用文本拼接，但复杂的需要模板引擎。可能需要提醒用户注意格式兼容性问题。 最后，给出具体的实现步骤和代码示例会更好，比如使用SheetJS读取XLSX，然后用docxtemplater生成Word，或者用服务器端处理。同时提醒可能的局限性和注意事项，比如样式处理、性能等。</think>在前端使用 Vue3 将 XLSX 文件转换为 Word 文档，通常需要借助第三方库来实现格式转换。以下是两种常见方案及实现思路： --- ### 方案一：前端直接转换（适合简单需求） **适用场景**：简单表格转换、无需复杂格式、小数据量 ```javascript // 1. 读取 XLSX 文件 import { read, utils } from &#39;xlsx&#39; import { saveAs } from &#39;file-saver&#39; const convertXLSXToWord = async (file) => { // 读取 Excel 数据 const data = await file.arrayBuffer() const workbook = read(data) const worksheet = workbook.Sheets[workbook.SheetNames[0]] const htmlContent = utils.sheet_to_html(worksheet) // 转换为 HTML 表格 // 2. 生成 Word 文档 const blob = new Blob([ `<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns="http://www.w3.org/TR/REC-html40"> <head><meta charset="UTF-8"></head> <body>${htmlContent}</body> </html>` ], { type: "application/msword" }) // 3. 触发下载 saveAs(blob, "converted-file.doc") } ``` **特点**： - 使用 `xlsx` 库解析 Excel - 生成伪 Word 文件（本质是 HTML 包装） - 格式简单但兼容性有限 --- ### 方案二：后端转换服务（推荐生产环境使用） **实现步骤**： 1. 前端上传 XLSX 文件到后端 2. 后端使用专业库处理转换（Python示例）： ```python # 使用 python-docx 和 pandas 库 from docx import Document import pandas as pd def convert_xlsx_to_word(input_path, output_path): df = pd.read_excel(input_path) doc = Document() # 添加表格到 Word table = doc.add_table(rows=df.shape[0]+1, cols=df.shape[1]) for col_idx, column in enumerate(df.columns): table.cell(0, col_idx).text = str(column) for row_idx, row in df.iterrows(): for col_idx, value in enumerate(row): table.cell(row_idx+1, col_idx).text = str(value) doc.save(output_path) ``` 3. 前端下载生成的 Word 文件 --- ### 方案三：使用专业文档库（复杂格式） **推荐工具**： - **docxtemplater**：基于 Word 模板注入数据 - **Officegen**：动态生成复杂 Office 文档 - **Mammoth.js**：HTML 转 Word 格式 **Vue3 示例（配合 docxtemplater）**： ```javascript import JSZip from &#39;jszip&#39; import Docxtemplater from &#39;docxtemplater&#39; async function generateWordFromXLSX(xlsxData) { // 1. 读取 Excel 获取数据 const workbook = read(xlsxData) const jsonData = utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]) // 2. 加载 Word 模板 const templateResponse = await fetch(&#39;/template.docx&#39;) const template = await templateResponse.arrayBuffer() // 3. 注入数据到模板 const zip = new JSZip(template) const doc = new Docxtemplater().loadZip(zip) doc.setData({ items: jsonData }) doc.render() // 4. 生成并下载 const out = doc.getZip().generate({ type: &#39;blob&#39; }) saveAs(out, &#39;report.docx&#39;) } ``` --- ### 关键注意事项： 1. **格式兼容性**：Word 对复杂样式的支持优于前端生成方案 2. **性能限制**：浏览器端处理超过 10MB 文件可能卡顿 3. **安全因素**：敏感数据建议使用后端转换 4. **样式控制**：推荐使用预制的 Word 模板保证格式一致 根据实际需求选择方案： - 快速原型开发：方案一 - 生产环境：方案二 - 复杂报表系统：方案三
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值