Vue项目中配置Webpack加载读取本地.xlsx文件的方法

步骤1：安装依赖 #

首先安装解析xlsx文件的核心库和Webpack处理二进制文件的loader：

npm install xlsx file-loader --save
# 或使用yarn
yarn add xlsx file-loader

步骤2：修改vue.config.js配置 #

在chainWebpack中添加处理.xlsx文件的规则，更新后的完整配置如下：

const { defineConfig } = require('@vue/cli-service')
const path = require('path');

module.exports = defineConfig({
  transpileDependencies: true,

  pluginOptions: {
    'style-resources-loader': {
        preProcessor: 'scss',
        'patterns': [
            path.resolve(__dirname, './src/styles/setup/*.scss'),
        ]
    }
  },

  chainWebpack: (config) => {
    // 原有svg文件处理规则
    config
    .module
      .rule("svg")
        .set('generator', {
          filename: "[contenthash][ext]"
        })
    
    // 新增xlsx文件处理规则
    config.module
      .rule('xlsx')
        .test(/\.xlsx$/)
        .use('file-loader')
          .loader('file-loader')
          .options({
            // 自定义输出文件名和路径，可按需调整
            name: '[name].[hash:8].[ext]',
            outputPath: 'assets/xlsx/'
          })
          .end()
  },
})

步骤3：在组件中读取并解析xlsx文件 #

在组件的created钩子中，通过fetch获取静态资源后用xlsx库解析：

<template>
  <!-- 组件内容 -->
</template>

<script>
import * as XLSX from 'xlsx'
// 导入本地xlsx文件，路径根据你的实际文件位置调整
import targetXlsx from '@/assets/data/your-file.xlsx'

export default {
  created() {
    fetch(targetXlsx)
      .then(res => res.arrayBuffer())
      .then(buffer => {
        // 将二进制数据解析为工作簿
        const workbook = XLSX.read(buffer, { type: 'array' })
        // 获取第一个工作表的名称
        const firstSheetName = workbook.SheetNames[0]
        // 将工作表转换为JSON格式数据
        const parsedData = XLSX.utils.sheet_to_json(workbook.Sheets[firstSheetName])
        console.log('解析完成的数据：', parsedData)
        // 后续业务逻辑处理
      })
      .catch(err => console.error('文件读取失败：', err))
  }
}
</script>

补充说明 #

• file-loader的作用是告知Webpack如何打包、输出.xlsx静态资源，配置中的name和outputPath可根据项目目录结构自定义。
• 导入的xlsx文件会被Webpack处理为静态资源URL，因此需要通过fetch获取二进制数据，才能被xlsx库正确解析。

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