1. Python技术站首页
  2. 其他
  3. Vue

Vue实现数据导出导入实战案例

• Vue
yizhihongxing

为了实现Vue的数据导入导出功能，我们需要遵循以下步骤：

第一步：安装依赖

使用Vue.js来实现数据导入导出功能需要安装以下依赖项：

  • FileSaver.js：用于在浏览器下载文件；
  • XLSX.js：Excel文件的解析和生成库。

可以通过npm安装这些依赖项：

npm install file-saver xlsx --save

第二步：导入需要Export到Excel的数据

在模板的script标签中通过import导入需要导出为Excel的数据，根据具体数据结构修改以下示例：

import { exportExcel } from '@/utils/excelUtils.js'

export default {
  data() {
    return {
      userList: [
        { id: 1, name: '张三', age: 20, gender: '男' },
        { id: 2, name: '李四', age: 22, gender: '女' },
        { id: 3, name: '王五', age: 24, gender: '男' }
      ]
    }
  },
  methods: {
    handleExportExcel() {
      let headerData = ['id', 'name', 'age', 'gender']
      let worksheetData = []
      for (let item of this.userList) {
        let arr = []
        Object.keys(item).forEach(key => {
          arr.push(item[key])
        })
        worksheetData.push(arr)
      }
      exportExcel('用户数据', headerData, worksheetData)
    }
  }
}

第三步：实现数据导出功能

在导出按钮的点击事件中调用exportExcel方法并传入需要导出的数据和表头信息，根据具体数据导出需求修改以下示例：

import XLSX from 'xlsx'
import FileSaver from 'file-saver'

export function exportExcel(fileName, headerData, worksheetData) {
  let worksheet = XLSX.utils.aoa_to_sheet([headerData, ...worksheetData])
  let workbook = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
  let excelFileName = fileName + '.xlsx'
  let excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })
  saveAsExcel(excelBuffer, excelFileName)
}

function saveAsExcel(buffer, filename) {
  let fileData = new Blob([buffer], { type: 'application/octet-stream' })
  FileSaver.saveAs(fileData, filename)
}

第四步：实现数据导入功能

实现数据导入功能需要以下两个步骤：

  1. 实现文件上传和解析功能；
  2. 解析Excel文件数据并存储到Vue组件中。

模板示例代码如下：

<template>
<div>
  <input type="file" ref="inputFile" style="display: none;" @change="handleFileInputChange">
  <button type="button" @click="handleImportExcel">导入Excel</button>
  <table>
    <thead>
      <tr>
        <th>id</th>
        <th>name</th>
        <th>age</th>
        <th>gender</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in userList" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.gender }}</td>
      </tr>
    </tbody>
  </table>
</div>
</template>

<script>
import XLSX from 'xlsx'
import FileSaver from 'file-saver'

export default {
  data() {
    return {
      userList: []
    }
  },
  methods: {
    handleFileInputChange(event) {
      let file = event.target.files[0]
      let fileReader = new FileReader()
      fileReader.onload = event => {
        let data = event.target.result
        let workbook = XLSX.read(data, { type: 'binary' })
        let firstSheetContent = workbook.Sheets[workbook.SheetNames[0]]
        let jsonData = XLSX.utils.sheet_to_json(firstSheetContent, { header: 1 })
        let headerData = jsonData[0]
        let worksheetData = jsonData.slice(1)
        let userList = this.formatUserList(headerData, worksheetData)
        this.userList = userList
      }
      fileReader.readAsBinaryString(file)
    },
    formatUserList(headerData, worksheetData) {
      let userList = []
      for (let item of worksheetData) {
        let user = {}
        for (let i = 0; i < headerData.length; i++) {
          user[headerData[i]] = item[i]
        }
        userList.push(user)
      }
      return userList
    },
    handleImportExcel() {
      this.$refs.inputFile.click()
    }
  }
}
</script>

在此代码示例中，我们创建了一个文件输入框并将其隐藏。当用户点击“导入Excel”按钮时，我们将触发文件输入框的点击事件，并在组件中找到它并模拟点击。接着，我们读取文件并解析Excel数据，格式为一个包含表头和数据的数组。最后，我们调用formatUserList()方法将Excel表格数据格式化为我们需要的格式。

示例说明

示例1：导出用户列表

假设我们在一个网站中需要将用户列表数据导出到Excel中。我们可以创建一个简单的Vue组件，在其中定义一个包含用户数据的数组和一个按钮，用于触发导出操作。当用户点击导出按钮时，我们将会准备Excel文件并将其下载到用户的设备上。代码示例如下：

<template>
  <div>
    <button type="button" @click="handleExportExcel">导出Excel</button>
  </div>
</template>

<script>
import { exportExcel } from '@/utils/excelUtils.js'

export default {
  data() {
    return {
      userList: [
        { id: 1, name: '张三', age: 20, gender: '男' },
        { id: 2, name: '李四', age: 22, gender: '女' },
        { id: 3, name: '王五', age: 24, gender: '男' }
      ]
    }
  },
  methods: {
    handleExportExcel() {
      let headerData = ['id', 'name', 'age', 'gender']
      let worksheetData = []
      for (let item of this.userList) {
        let arr = []
        Object.keys(item).forEach(key => {
          arr.push(item[key])
        })
        worksheetData.push(arr)
      }
      exportExcel('用户数据', headerData, worksheetData)
    }
  }
}
</script>

在这个示例中，我们使用exportExcel方法将用户列表数据导出为Excel文件。首先，我们定义一个包含表头信息的数组。在本例中，表头信息包括“id”、“name”、“age”和“gender”4个表头单元格。然后，我们将遍历用户列表数组，并将每个用户的属性值存储在一个数组中。最后，我们将添加的数组push到worksheetData数组中，这将用于在Excel文件中呈现用户数据。

示例2：导入用户列表

假设我们已经有了包含详细的用户列表的Excel文件，并且我们想把它导入到当前的Vue组件中。我们可以创建一个带有文件输入框的Vue组件，在其中加载Excel文件，并将其解析为包含UI组件用户列表的简单JavaScript对象数组。代码示例如下：

<template>
  <div>
    <input type="file" ref="inputFile" style="display: none;" @change="handleFileInputChange">
    <button type="button" @click="handleImportExcel">导入Excel</button>
    <table>
      <thead>
        <tr>
          <th>id</th>
          <th>name</th>
          <th>age</th>
          <th>gender</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in userList" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.gender }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import XLSX from 'xlsx'
import FileSaver from 'file-saver'

export default {
  data() {
    return {
      userList: []
    }
  },
  methods: {
    handleFileInputChange(event) {
      let file = event.target.files[0]
      let fileReader = new FileReader()
      fileReader.onload = event => {
        let data = event.target.result
        let workbook = XLSX.read(data, { type: 'binary' })
        let firstSheetContent = workbook.Sheets[workbook.SheetNames[0]]
        let jsonData = XLSX.utils.sheet_to_json(firstSheetContent, { header: 1 })
        let headerData = jsonData[0]
        let worksheetData = jsonData.slice(1)
        let userList = this.formatUserList(headerData, worksheetData)
        this.userList = userList
      }
      fileReader.readAsBinaryString(file)
    },
    formatUserList(headerData, worksheetData) {
      let userList = []
      for (let item of worksheetData) {
        let user = {}
        for (let i = 0; i < headerData.length; i++) {
          user[headerData[i]] = item[i]
        }
        userList.push(user)
      }
      return userList
    },
    handleImportExcel() {
      this.$refs.inputFile.click()
    }
  }
}
</script>

在这个示例中，我们使用FileReader API和支持文件下载的FileSaver库来处理Excel文件。我们首先定义了一个文件输入框和一个触发文件选择的按钮。当用户选择文件时，我们将在Vue组件中找到文件，并将其加载到内存中。接着，我们使用XLSX.js库和一组工具方法来解析文件并将其转换为JavaScript对象数组。最后，我们将这个JavaScript对象数组赋值给Vue组件的userList属性，用于在UI中呈现用户数据。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Vue实现数据导出导入实战案例 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • vue新玩法VueUse工具库具体用法@vueuse/core详解

    VueUse工具库详解 什么是VueUse工具库 VueUse是一个基于Vue3的工具库，旨在提供许多实用功能用于开发Vue应用程序。它由一系列的模块组成，每个模块都集成了一组相关功能。例如：表单，状态，副作用等，而这些模块均提供了许多工具函数和hooks，您可以在Vue3项目中使用它们来轻松完成特定任务。 如何使用VueUse 通常，您可以通过npm安装V…

    Vue 2023年5月27日
    00

  • vue项目中添加electron的详细代码

    在Vue项目中添加Electron的过程如下所述： 安装Electron相关依赖 需要安装Electron相关依赖，可以在终端或命令行中运行以下命令： npm install –save-dev electron 在Vue项目中添加Electron相关文件 在Vue项目的根目录下，需要添加一个名为“main.js”的文件，其中包含启动Electron的必要…

    Vue 2023年5月28日
    00

  • Vue浅拷贝和深拷贝实现方案

    Vue中实现对象的拷贝有两个常用的方法：浅拷贝和深拷贝。 浅拷贝 浅拷贝是将一个对象的属性值复制到另一个对象中，如果属性是基本类型，则拷贝的是这个值的副本；如果属性是引用类型，则拷贝的是这个引用的地址，因此两个对象会共享同一个引用对象。Vue中的$set方法就是使用浅拷贝实现的。以下是Vue中使用浅拷贝的示例代码： <template> <…

    Vue 2023年5月28日
    00

  • Vue 中使用富文本编译器wangEditor3的方法

    下面我将为你介绍如何在Vue中使用wangEditor3富文本编辑器。 1. 安装wangEditor3 首先，在Vue项目中安装wangEditor3，可以使用npm或者yarn进行安装，打开终端输入以下命令： npm install wangEditor3 –save 或者 yarn add wangEditor3 2. 创建富文本编辑器组件 在Vue…

    Vue 2023年5月28日
    00

  • axios如何取消重复无用的请求详解

    当我们使用 axios 发送请求时，可能会出现多次发送同样的请求，这种情况可能会降低我们应用的性能。因此我们需要控制请求的发送，以避免重复无用的请求。 使用 axios 取消请求有 3 种方式： 使用 CancelToken 取消请求。 const CancelToken = axios.CancelToken; let cancel; axios.get(…

    Vue 2023年5月28日
    00

  • 详解Vue.js在页面加载时执行某个方法

    想要在Vue.js页面加载的时候执行某个方法，可以利用Vue的生命周期函数，其中mounted()钩子函数会在该Vue实例被挂载到 DOM 后执行。下面详细介绍实现步骤： 第一步：定义一个 Vue 实例 首先需要定义一个 Vue 实例，这个 Vue 实例只需要有 el 属性和 data 属性，如下所示： Vue({ el: ‘#app’, data: { m…

    Vue 2023年5月28日
    00

  • 详解template标签用法(含vue中的用法总结)

    详解template标签用法(含vue中的用法总结) 简介： <template> 标签是一个通用的占位符元素，可以作为组件的模板，也可以作为一段代码片段，使你可以在渲染这段代码片段时，避免包含在页面中。这个标签在Vue的使用中尤其重要，在Vue的单文件组件中大量使用，尤其是作为组件的模板。 基本用法： <template> 标记的作…

    Vue 2023年5月28日
    00

  • 一个例子轻松学会Vue.js

    “一个例子轻松学会Vue.js”攻略 什么是Vue.js？ Vue.js是一个前端JavaScript框架，使得开发人员能够通过清楚、易于理解、易于维护的模板和构造函数编写Web应用程序，其主要目的是简化Web开发中的视图层。 学习Vue.js的第一步 学习Vue.js的第一步是先安装它。可以通过npm（Node包管理器）来安装Vue.js。执行以下命令进行…

    Vue 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部