Vue3导出HTML表格为.xlsx时vue3-xlsx报模块未找到错误如何解决

问题概述 #

• 需求场景：Vue 3项目需要实现HTML表格导出为.xlsx格式文件，测试多个相关依赖库均存在运行兼容问题
• 测试vue3-xlsx库时，执行安装命令npm install -save vue3-xlsx后，按照示例使用相对路径../../dist/vue3-xlsx.cjs.prod.js导入组件，运行时触发「Module not found（模块未找到）」错误，示例错误导入代码如下：

import { XlsxRead, XlsxTable, XlsxSheets, XlsxJson, XlsxWorkbook, XlsxSheet, XlsxDownload } from "../../dist/vue3-xlsx.cjs.prod.js";

可行解决思路 #

方案1：使用底层稳定库实现（优先推荐） #

绝大多数Vue生态的xlsx封装库都是基于xlsx（SheetJS）做的上层包装，直接使用原生库不存在框架兼容问题，稳定性最高，实现步骤：

1. 卸载存在兼容问题的封装库：npm uninstall vue3-xlsx
2. 安装稳定版底层依赖：npm install xlsx
3. 直接读取表格DOM实现导出，不需要额外注册组件，示例代码：

<template>
  <div>
    <!-- 给需要导出的表格绑定ref -->
    <table ref="targetTable">
      <thead>
        <tr>
          <th>序号</th>
          <th>名称</th>
          <th>数值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>测试数据1</td>
          <td>100</td>
        </tr>
        <tr>
          <td>2</td>
          <td>测试数据2</td>
          <td>200</td>
        </tr>
      </tbody>
    </table>
    <button @click="exportToXlsx">导出表格</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import * as XLSX from 'xlsx'

const targetTable = ref(null)

const exportToXlsx = () => {
  // 读取表格DOM生成工作簿对象
  const workbook = XLSX.utils.table_to_book(targetTable.value)
  // 触发文件下载，可自定义导出文件名
  XLSX.writeFile(workbook, '导出结果.xlsx')
}
</script>

• 该方案支持多Sheet导出、JSON数据转表格、单元格样式自定义等扩展能力，无Vue版本兼容问题，长期维护有保障。

方案2：修正vue3-xlsx导入路径 #

如果一定要使用vue3-xlsx库，不要照搬示例里的相对路径导入写法，直接从依赖包名导入即可：

// 替换原有错误的相对路径导入
import { XlsxRead, XlsxTable, XlsxSheets, XlsxJson, XlsxWorkbook, XlsxSheet, XlsxDownload } from "vue3-xlsx"

如果修改路径后仍报模块不存在，先删除node_modules文件夹和lock文件，重新执行npm install安装依赖即可。注意该库已经长期未更新，存在Vue3小版本兼容风险，非必要不推荐使用。

内容的提问来源于stack exchange，提问作者Getaye