Vue+Element UI Table表格导出Excel和打印

最新推荐文章于 2023-02-24 11:25:00 发布

Best_北诗

最新推荐文章于 2023-02-24 11:25:00 发布

阅读量1.1k

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/m0_48607837/article/details/125745054

版权

Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

安装相关的依赖；（xlsx，file-saver）

npm install --save xlsx file-saver

如果XLSX报错的的话可以选择指定版本下载

npm install --save xlsx@0.17.0
npm install --save file-saver@2.0.5

如果需要打印表格，安装 vue-print-nb 库

npm install vue-print-nb

下载完成以后需要在main.js中引入

// 导入打印
import Print from 'vue-print-nb'

Vue.use(Print)

录屏

展示代码

<template>
  <div>
    <el-table id="printTest" :data="tableData" style="width: 500px">
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
    </el-table>
    <el-button type="success" @click="htmlToExcel('#printTest', '表格')">导出Excel</el-button>
    <el-button type="primary" v-print="'#printTest'">打印</el-button>
  </div>
</template>

<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {
    components: {

    },
    data () {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王一虎',
            age:  '20'
          }, {
            date: '2016-05-02',
            name: '王二虎',
            age:  '18'
          }, {
            date: '2016-05-02',
            name: '王三虎',
            age:  '16'
          }, {
            date: '2016-05-02',
            name: '王小虎',
            age:  '14'
          }]
        };
    },
    computed: {

    },
    created() {

    },
    mounted() {

    },
    methods: {
      htmlToExcel(dom, title = '默认标题') {
        const wb = XLSX.utils.table_to_book(document.querySelector(dom))
        const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
        const blob = new Blob([wbout], { type: 'application/octet-stream' })
        FileSaver.saveAs(blob, `${title}.xlsx`)
      }
    },
};
</script>

<style scoped lang="less">

</style>