vue3上传excel并在线预览的实现

更新时间：2025年12月17日 09:39:08 作者：Summer不秃

文章介绍了通过将Excel文档的数据处理成HTML表格字符串,实现在线预览的方法,使用了XLSX库中的`sheet_to_html`和`sheet_to_json`函数将Excel工作表转换为HTML表格和JSON格式

前言

关于实现excel文档在线预览的做法，一种方式是通过讲文档里的数据处理成html，一种是将文档处理成图片进行预览，这里使用的是第一种。

安装 xlsx 依赖

npm i xlsx --save

XLSX.utils.sheet_to_html

使用XLSX.utils.sheet_to_html方法将工作表(workSheet)转化成html表格的字符串表示，然后显示在前端页面，按照表格的行列结构进行排序，从而实现在线预览的效果

import * as XLSX from 'xlsx'

export const file2Preview = (file: File) => {
  return new Promise(function (resolve) {
    const reader = new FileReader();// 文件加载事件
    reader.onload = function (e) {
      const data = e.target?.result;
      const workbook = XLSX.read(data, {
        type: "binary", cellDates: true,
      });
      // 拿第-个sheet
      const worksheet = workbook.Sheets[workbook.SheetNames[0]];
      const html = XLSX.utils.sheet_to_html(worksheet);
      // 返回html
      resolve(html);
    };
    reader.readAsBinaryString(file);
  });
};

调用实现

<template>
    <n-upload
    v-model:file-list="fileList"
    action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
    @change="handleUploadChange"
    @remove="handleRemove"
    @update:file-list="handleFileListChange"
  >
        <n-button>上传文件</n-button>
    </n-upload>

    <div class="flex-center preview-table" id="previewTable"></div>
 
</template>
<script lang="ts" setup>
import { defineComponent, ref } from 'vue'
import { useMessage } from 'naive-ui'
import type { UploadFileInfo } from 'naive-ui'
import { NButton } from "naive-ui";
import {file2Preview} from '@main/utils/index';

    const message = useMessage()
    const fileListRef = ref<UploadFileInfo[]>([

    ])

    const fileList = ref(fileListRef)
    const handleUploadChange = async (data: { fileList: UploadFileInfo[] }) => {
        const html= await file2Preview(data.fileList[0].file as File);
        const previewTable = document.getElementById('previewTable');
      }

      const handleRemove = (data: { file: UploadFileInfo, fileList: UploadFileInfo[] }) => {
        if (data.file.id === 'text-message') {
          message.info('居然没传上去，算了，删了吧')
        }
        else if (data.file.id === 'notification') {
          message.error('不行，这个有用，不许删')
          return false
        }
        else if (data.file.id === 'contact') {
          message.loading('不知道这个有没有用，等我问问服务器能不能删', {
            duration: 4000
          })
          return new Promise((resolve) => {
            setTimeout(() => {
              message.error('不行，他们也不许删这个')
              resolve(false)
            }, 4000)
          })
        }
      }
      const handleFileListChange = () => {
        message.info('是的，file-list 的值变了')
      }

</script>

<style lang="less" scoped>
  ::v-deep table {
    border: 1px solid #000 !important;
    margin-top: 10px;
    border-collapse: collapse;
    }
  ::v-deep th {
    border: 1px solid #000 !important;
    }
  ::v-deep tr {
    border: 1px solid #000 !important;
    }
  ::v-deep td {
    border: 1px solid #000 !important;
    text-align: center;
    min-width:20px;
    height: 20px;
    line-height: 20px;
    padding: 4px;
    color:#3e3e3e;
}
</style>

XLSX.utils.sheet_to_json

XLSX.utils.sheet_to_json用于将excel表格中的工作表(sheet)转换成JSON格式的函数，使用组件显示

export const file2Data = (file: File)  => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = function (e) {
      const data = e.target?.result;
      if (!data) {
        reject(new Error("Failed to read file data"));
        return;
      }

      try {
        const workbook = XLSX.read(data, { type: "binary" });
        const result: any[] = [];

        workbook.SheetNames.forEach((sheetName) => {
          const sheet = workbook.Sheets[sheetName];
          const jsonData = XLSX.utils.sheet_to_json(sheet, { header: 1, raw: false });
          if (jsonData.length > 0) {
            result.push({
            sheetName,
            sheet: jsonData
          });
          }
          
        });

        console.log(result); // 输出解析后的数据
        resolve(result);
      } catch (error) {
        reject(error);
      }
    };

    reader.onerror = function (e) {
      reject(new Error("FileReader error: " + e.target?.error?.message));
    };

    reader.readAsBinaryString(file);
  });
};

调用实现

<script lang="ts" setup>
import { defineComponent, ref } from 'vue'
import { useMessage } from 'naive-ui'
import type { UploadFileInfo } from 'naive-ui'
import { NButton } from "naive-ui";
import {file2Data} from '@main/utils/index';

const message = useMessage()
const fileListRef = ref<UploadFileInfo[]>([

])

const datas = ref({
  source:[],
  columns:[]
})

const fileList = ref(fileListRef)
const handleUploadChange = async (data: { fileList: UploadFileInfo[] }) => {
  fileListRef.value = data.fileList;
  const excelData = await file2Data(data.fileList[0].file as File)
  
  datas.value.source = excelData[0].sheet;
  datas.value.columns = [];

  Object.keys(datas.value.source[0]).map((v) => {
    datas.value.columns = [
      ...datas.value.columns,
      {
        title: datas.value.source[0][v],
        key: v
      }
    ]
  })

  datas.value.source = datas.value.source.slice(1);
  console.log(datas.value);
}

const handleRemove = (data: { file: UploadFileInfo, fileList: UploadFileInfo[] }) => {
  if (data.file.id === 'text-message') {
    message.info('居然没传上去，算了，删了吧')
  }
  else if (data.file.id === 'notification') {
    message.error('不行，这个有用，不许删')
    return false
  }
  else if (data.file.id === 'contact') {
    message.loading('不知道这个有没有用，等我问问服务器能不能删', {
      duration: 4000
    })
    return new Promise((resolve) => {
      setTimeout(() => {
        message.error('不行，他们也不许删这个')
        resolve(false)
      }, 4000)
    })
  }
}
const handleFileListChange = () => {
  message.info('是的，file-list 的值变了')
}

</script>

<template>
    <n-upload
    v-model:file-list="fileList"
    action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
    @change="handleUploadChange"
    @remove="handleRemove"
    @update:file-list="handleFileListChange"
  >
    <n-button>上传文件</n-button>
  </n-upload>

    <n-data-table
    id="previewTable"
    class="preview-table"
    :columns="datas.columns"
    :data="datas.source"
    :pagination="false"
    :bordered="false"
  />

  
</template>

<style lang="less" scoped>
  ::v-deep table {
    border: 1px solid #000 !important;
    margin-top: 10px;
    border-collapse: collapse;
    }
  ::v-deep th {
    border: 1px solid #000 !important;
    }
  ::v-deep tr {
    border: 1px solid #000 !important;
    }
  ::v-deep td {
    border: 1px solid #000 !important;
    text-align: center;
    min-width:20px;
    height: 20px;
    line-height: 20px;
    padding: 4px;
    color:#3e3e3e;
}
</style>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Slots Emit和Props穿透组件封装实现摸鱼加钟
这篇文章主要为大家介绍了Slots Emit和Props穿透组件封装实现示例详解，为摸鱼加个钟，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
Vue 实用分页paging实例代码
本篇文章主要介绍了Vue 实用分页paging实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-04-04
Vue2单一事件管理组件通信
这篇文章主要为大家详细介绍了Vue2单一事件管理组件通信的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
小编最近遇到这样的需求，当点击一个按钮可以变换里面字的内容，刚开始还真是一头雾水，不知所措。仔细想想屡屡思绪，很容易的解决了。接下来通过本文给大家介绍elementUI Vue 单个按钮显示和隐藏的变换功能,需要的朋友可以参考下
2018-09-09
vue+vuex+axios实现登录、注册页权限拦截
下面小编就为大家分享一篇vue+vuex+axios实现登录、注册页权限拦截，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
Vue3绑定props默认值问题
使用Vue3的defineProps配合TypeScript的interface定义props类型,并通过withDefaults设置默认值,使组件能安全访问传入的props数据
2025-08-08
vue-cli3.X快速创建项目的方法步骤
这篇文章主要介绍了vue-cli3.X快速创建项目的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
vue开发自定义的全局公共组件详解
本文介绍了如何开发自定义全局公共组件的两种方法,第一种方法是通过在components文件夹中创建新的组件文件夹,例如Loading文件夹,并在其中创建index.js和index.vue文件,通过在vue的入口文件main.js中进行引入,可以实现组件的全局调用
2024-10-10
vue单页面SEO优化的实现
本文主要介绍了vue单页面SEO优化的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
关于vue-property-decorator的基础使用实践
这篇文章主要介绍了关于vue-property-decorator的基础使用实践，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08