vue组件导入Excel

冬天不会冷ll

已于 2022-12-21 10:21:03 修改

阅读量598

点赞数

文章标签： vue.js javascript 前端

于 2022-09-28 14:22:27 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_48567214/article/details/122600720

版权

本文将详细介绍如何在Vue.js应用中实现Excel文件的导入功能，通过使用JavaScript库处理文件读取，结合Vue组件，实现实时预览和数据解析，为前端开发提供便利。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<template>
  <div>
    <input id="excel-upload-input" ref="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick">
    <div id="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
      拖动excel文件到此或
      <el-button :loading="loading" style="margin-left:16px;" size="mini" type="primary" @click="handleUpload">浏览文件</el-button>
    </div>
  </div>
</template>

<script>
  import XLSX from 'xlsx'

  export default {
   
    props: {
   
      beforeUpload: Function,
      onSuccess: Function
    },
    data() {
   
      return {
   
        loading: false,
        excelData: {
   
          header: null,
          results: null
        }
      }
    },
    methods: {
   
      generateDate({
    header, results }) {
   
        this.excelData.header = header

最低0.47元/天解锁文章