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

vue如何将v-for中的表格导出来

• Vue
yizhihongxing

当我们在使用Vue的v-for指令来动态渲染表格时，如何将表格导出成Excel或CSV文件呢？下面就是详细的攻略。

步骤一：安装依赖库

在Vue项目中，我们需要使用js-xlsx和file-saver这两个库来实现导出表格功能。

npm install file-saver xlsx -S

步骤二：定义数据和表头

在Vue组件中，我们需要定义要导出的数据和表头。

<template>
  <div>
    <button @click="exportTable">导出表格</button>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>职业</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in tableData" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.job }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import { saveAs } from 'file-saver'
import XLSX from 'xlsx'

export default {
  data () {
    return {
      tableData: [
        { id: 1, name: '张三', age: 20, job: '工程师' },
        { id: 2, name: '李四', age: 22, job: '设计师' },
        { id: 3, name: '王五', age: 24, job: '销售员' },
        { id: 4, name: '赵六', age: 26, job: '产品经理' },
        { id: 5, name: '钱七', age: 28, job: '运营总监' }
      ]
    }
  },
  methods: {
    exportTable () {
      const tHeader = ['姓名', '年龄', '职业']
      const filterVal = ['name', 'age', 'job']
      const data = this.formatJson(filterVal, this.tableData)
      const fileName = '表格导出'
      this.exportJsonToExcel(tHeader, data, fileName)
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    exportJsonToExcel (tHeader, data, fileName) {
      const sheetName = '表格1'
      const wb = { SheetNames: [], Sheets: {} }
      const ws = XLSX.utils.aoa_to_sheet([tHeader, ...data])
      wb.SheetNames.push(sheetName)
      wb.Sheets[sheetName] = ws
      const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' })
      this.saveAsExcel(excelBuffer, fileName)
    },
    saveAsExcel (buffer, fileName) {
      const fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
      const excelBlob = new Blob([buffer], { type: fileType })
      saveAs(excelBlob, `${fileName}.xlsx`)
    }
  }
}
</script>

上述代码中，我们定义了一个tableData数组保存表格数据，定义了tHeader数组用于保存表头信息，然后定义了三个方法：formatJson用于将表格数据格式化成数组形式、exportJsonToExcel用于将数据导出为Excel文件格式、saveAsExcel用于将Excel文件进行保存。其中，XLSX.utils.aoa_to_sheet方法用于将数组转换为Sheet格式。

步骤三：点击“导出表格”按钮进行导出

在Vue组件中，我们可以使用@click事件监听按钮的点击，然后调用exportTable方法即可。

以上就是Vue如何将v-for中的表格导出来的完整攻略。下面给出另外一种示例。

示例一：带有动态过滤和排序的表格

<template>
  <div>
    <button @click="exportTable">导出表格</button>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>职业</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in filteredData" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.job }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import { saveAs } from 'file-saver'
import XLSX from 'xlsx'

export default {
  data () {
    return {
      tableData: [
        { id: 1, name: '张三', age: 20, job: '工程师' },
        { id: 2, name: '李四', age: 22, job: '设计师' },
        { id: 3, name: '王五', age: 24, job: '销售员' },
        { id: 4, name: '赵六', age: 26, job: '产品经理' },
        { id: 5, name: '钱七', age: 28, job: '运营总监' }
      ],
      filterKey: '',
      sortKey: '',
      sortOrders: {
        name: 1,
        age: 1,
        job: 1
      }
    }
  },
  computed: {
    filteredData () {
      const sortKey = this.sortKey
      const filterKey = this.filterKey && this.filterKey.toLowerCase()
      const order = this.sortOrders[sortKey] || 1
      let data = this.tableData
      if (filterKey) {
        data = data.filter((row) => {
          return Object.keys(row).some((key) => {
            return String(row[key]).toLowerCase().indexOf(filterKey) > -1
          })
        })
      }
      if (sortKey) {
        data = data.slice().sort((a, b) => {
          a = a[sortKey]
          b = b[sortKey]
          return (a === b ? 0 : a > b ? 1 : -1) * order
        })
      }
      return data
    }
  },
  methods: {
    exportTable () {
      const tHeader = ['姓名', '年龄', '职业']
      const filterVal = ['name', 'age', 'job']
      const data = this.formatJson(filterVal, this.filteredData)
      const fileName = '表格导出'
      this.exportJsonToExcel(tHeader, data, fileName)
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    exportJsonToExcel (tHeader, data, fileName) {
      const sheetName = '表格1'
      const wb = { SheetNames: [], Sheets: {} }
      const ws = XLSX.utils.aoa_to_sheet([tHeader, ...data])
      wb.SheetNames.push(sheetName)
      wb.Sheets[sheetName] = ws
      const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' })
      this.saveAsExcel(excelBuffer, fileName)
    },
    saveAsExcel (buffer, fileName) {
      const fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
      const excelBlob = new Blob([buffer], { type: fileType })
      saveAs(excelBlob, `${fileName}.xlsx`)
    },
    sortBy (key) {
      this.sortKey = key
      this.sortOrders[key] = this.sortOrders[key] * -1
    }
  }
}
</script>

示例一是一个带有动态过滤和排序功能的表格组件，我们可以将过滤后的数据导出为Excel文件。

示例二：使用element-ui组件库实现的表格

<template>
  <div>
    <el-button type="primary" @click="exportTable">导出表格</el-button>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="年龄" prop="age"></el-table-column>
      <el-table-column label="职业" prop="job"></el-table-column>
    </el-table>
  </div>
</template>
<script>
import { saveAs } from 'file-saver'
import XLSX from 'xlsx'

export default {
  data () {
    return {
      tableData: [
        { id: 1, name: '张三', age: 20, job: '工程师' },
        { id: 2, name: '李四', age: 22, job: '设计师' },
        { id: 3, name: '王五', age: 24, job: '销售员' },
        { id: 4, name: '赵六', age: 26, job: '产品经理' },
        { id: 5, name: '钱七', age: 28, job: '运营总监' }
      ]
    }
  },
  methods: {
    exportTable () {
      const tHeader = ['姓名', '年龄', '职业']
      const filterVal = ['name', 'age', 'job']
      const data = this.formatJson(filterVal, this.tableData)
      const fileName = '表格导出'
      this.exportJsonToExcel(tHeader, data, fileName)
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    exportJsonToExcel (tHeader, data, fileName) {
      const sheetName = '表格1'
      const wb = { SheetNames: [], Sheets: {} }
      const ws = XLSX.utils.aoa_to_sheet([tHeader, ...data])
      wb.SheetNames.push(sheetName)
      wb.Sheets[sheetName] = ws
      const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' })
      this.saveAsExcel(excelBuffer, fileName)
    },
    saveAsExcel (buffer, fileName) {
      const fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
      const excelBlob = new Blob([buffer], { type: fileType })
      saveAs(excelBlob, `${fileName}.xlsx`)
    }
  }
}
</script>

示例二是使用element-ui组件库实现的表格组件，同样可以将数据导出为Excel文件，使用方法和示例一类似。

总体来说，Vue将v-for中的表格导出来的方法并不难，只需要对数据进行格式化、实现导出功能、使用Blob进行文件下载等简单操作即可。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue如何将v-for中的表格导出来 - Python技术站

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

相关文章

  • vue如何动态加载组件详解

    下面我将详细讲解“vue如何动态加载组件”的攻略。 一、为什么需要动态加载组件？ 在一些大型项目中，为了提高页面加载速度和减小打包体积，有时候会将某些组件按需动态加载。这时候如果使用Vue的公共组件库，需要对这些组件进行动态加载。 二、基本实现思路 在Vue中，动态加载组件的实现思路主要有两种方式： 1.通过动态import的方式 动态import的方式是指…

    Vue 2023年5月28日
    00

  • Vue项目打包部署的实战过程记录

    下面是Vue项目打包部署的实战过程记录的详细攻略： 1. 环境准备 在进行Vue项目打包部署前，需要准备好以下环境： Node.js环境： 因为Vue.js是基于Node.js的，所以需要在本地安装Node.js环境。 Vue CLI： 在安装好Node.js后，可以使用npm包管理器安装Vue CLI，它是Vue.js的一个命令行工具，可以帮助我们快速构建…

    Vue 2023年5月28日
    00

  • Vue3和Vite不得不说的那些事

    下面是关于“Vue3和Vite不得不说的那些事”的完整攻略。 什么是Vue3和Vite Vue3是Vue.js在2020年9月正式发布的一次重大版本更新，Vue3相较于Vue2来说，带来许多令人激动的新特性，包括Composition API、性能优化等。其中，Composition API是最大的亮点之一，它能够让开发者更好地组织和重用组件逻辑。 Vite…

    Vue 2023年5月28日
    00

  • vue的el-select绑定的值无法选中el-option问题及解决

    当使用Vue的el-select组件时，可能会遇到无法选中el-option的问题。这个问题常见于el-option基于v-for动态渲染的情况下。 出现这个问题的原因，是因为el-select组件中v-model绑定的值和el-option组件中v-bind:value绑定的值类型不一致导致的。解决这个问题有以下两种方法： 方法一：更换v-model绑定的…

    Vue 2023年5月28日
    00

  • Vue实现简单的发表评论功能

    下面是“Vue实现简单的发表评论功能”的完整攻略。 步骤一：创建基本的Vue项目 安装Vue CLI：在命令行中使用以下命令安装Vue CLI：npm install -g @vue/cli 使用Vue CLI创建项目：在命令行中使用以下命令创建Vue项目：vue create my-project，其中my-project是项目名称，可以自定义。 在浏览器…

    Vue 2023年5月29日
    00

  • await 错误捕获实现方式源码解析

    让我们来详细讲解一下“await 错误捕获实现方式源码解析”的完整攻略。 什么是 await？ 在 JavaScript 中，await 关键字可以用于暂停执行异步函数，并等待该异步函数的返回结果。我们可以使用 await 来获取异步操作中的结果，而不必使用回调函数或者 Promise 链来处理异步结果。 await 的错误捕获实现方式 在使用 await …

    Vue 2023年5月28日
    00

  • 傻瓜式vuex语法糖kiss-vuex整理

    傻瓜式vuex语法糖kiss-vuex整理是为了方便开发者在使用Vuex状态管理库时，提供一种更加简单、易用的语法糖。在本攻略中，我们将会讲解kiss-vuex的安装与使用，以及如何利用其提供的方法对Vuex进行快捷操作。 安装 kiss-vuex是一个npm包，安装非常简单。在终端中执行以下命令即可： npm install kiss-vuex 使用 在V…

    Vue 2023年5月28日
    00

  • Vue查询数据并通过bootstarp table渲染数据

    首先我们需要将Vue与Bootstrap Table集成，方法如下： 1. 安装依赖 npm install vue bootstrap-vue bootstrap jquery popper.js 2. 配置Bootstrap Table 在Vue的组件中，引入Bootstrap Table并在“mounted”钩子函数中初始化，示例如下： <tem…

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