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

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

• Vue

当我们在使用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.js 遇到的那些坑

    学习Vue.js遇到的坑可以总结为以下几点： 1. 环境搭建 Vue.js是基于Vue-cli脚手架搭建的，我们需要先安装Node.js和npm，然后通过npm安装Vue-cli。在使用Vue-cli创建项目时，需要选择不同的模板，如Webpack、Browserify等。选择合适的模板会影响到后续的开发和打包。 示例： 安装Vue-cli命令： npm i…

    Vue 2023年5月28日
    00

  • 优雅地使用loading(推荐)

    优雅地使用loading(推荐) 在Web应用程序中，常常需要使用loading提示来增加用户体验，并为用户提供反馈信息。然而，如果loading的呈现不恰当，可能会让用户感觉烦躁、失去信心。因此，我们需要知道如何优雅地使用loading，尽可能减少其对用户的影响。 选择loading样式和位置 在使用loading时，样式和位置是很重要的。一般来说，loa…

    Vue 2023年5月27日
    00

  • 解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题

    在使用 mpvue + vuex 开发微信小程序时，可能会遇到 vuex 辅助函数 mapState、mapGetters 不可用的问题。这是因为 mpvue 框架在编译时将 store 对象注入到每个组件的 data 属性中，而在 wxs 中无法访问 data 中的对象，因此会导致 mapState、mapGetters 函数无法正常使用。 要解决这个问题…

    Vue 2023年5月27日
    00

  • Vue.js实现列表清单的操作方法

    针对”Vue.js实现列表清单的操作方法”，我会提出以下攻略步骤并提供两个相关的代码示例： 一、 定义列表项组件： 使用Vue.js，我们可以定义一个组件，用于渲染列表中的单个项。组件应该有两个props，一个用于接收数据数组，一个用于接收点击事件的回调函数，用于处理单击事件。该组件的代码示例如下： <template> <li v-for…

    Vue 2023年5月27日
    00

  • 关于vue中element-ui form或table lable换行的问题

    关于Vue中Element UI Form或Table Label换行的问题，可以采用下述两种方法： 使用自定义Label和El-tooltip 在Element UI的Form组件中，默认情况下，Label标签是不支持换行的。因此，可以采用自定义Label和El-tooltip的方式解决。 示例代码： <template> <el-for…

    Vue 2023年5月27日
    00

  • 配置一个vue3.0项目的完整步骤

    下面是配置一个Vue3.0项目的完整步骤： 步骤一：安装Vue CLI 在配置一个Vue 3.0项目之前，首先需要安装Vue CLI。Vue CLI是Vue.js 官方脚手架工具，可以帮助我们快速地搭建Vue项目。以下是安装Vue CLI的命令： npm install -g @vue/cli 步骤二：创建一个新的Vue项目 使用Vue CLI创建Vue项目…

    Vue 2023年5月27日
    00

  • vue-cli或vue项目利用HBuilder打包成移动端app操作

    下面就详细讲解一下如何将vue-cli或vue项目通过HBuilder打包成移动端app的操作攻略。 1. 安装HBuilder 首先，我们需要下载并安装HBuilder。HBuilder是一个支持多平台的HTML5开发工具，内置了多款开发框架和常用的UI组件，支持打包成Android和iOS原生应用。 你可以在DCloud官网上下载HBuilder：htt…

    Vue 2023年5月27日
    00

  • vue如何判断数组中的对象是否包含某个值

    当需要在Vue中判断数组中的对象是否包含某个特定值时，可以使用JavaScript中的find()函数和includes()函数来实现。 使用find()函数 find()函数返回数组中第一个符合条件的元素值，如果没有符合条件的元素则返回undefined。可以将find()函数与箭头函数配合使用来查找数组中特定对象是否存在。 以下是一个示例： const …

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