• Vue+element 实现表格导出xlsx格式


    Vue+element 实现表格导出xlsx格式

    1、安装

    npm install file-saver xlsx --save
    cnpm install file-saver xlsx --save //淘宝镜像

    2、新建一个文件夹daochubiaoge放daochubiaoge.js

    import FileSaver from 'file-saver'
    import XLSX from 'xlsx'
    
    export  function fileXlsx(biaogeName,id) {
        let time = new Date()
        let year = time.getFullYear()
        let month = time.getMonth() + 1
        let day = time.getDate()
        let name = biaogeName + year + '' + month + '' + day
        // console.log(name)
        /* generate workbook object from table */
        //  #table要导出的是哪一个表格
        var wb = XLSX.utils.table_to_book(document.querySelector(id))
        /* get binary string as output */
        var wbout = XLSX.write(wb, {
            bookType: 'xlsx',
            bookSST: true,
            type: 'array',
        })
        try {
            //  name+'.xlsx'表示导出的excel表格名字
            FileSaver.saveAs(
                new Blob([wbout], { type: 'application/octet-stream' }),
                name + '.xlsx'
            )
        } catch (e) {
            if (typeof console !== 'undefined') console.log(e, wbout)
        }
        return wbout
    }

    3、在需要的vue文件中引用

     <template>
        <div>
            <el-table :data="tableData" style=" 100%" id="table">
            <el-table-column prop="date"  label="日期" width="180"> </el-table-column>
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
          </el-table>
          <el-button @click="exportExcel">导出</el-button>
        </div>
     </template>
     
     <script>
      import * as FileSaver from '@/daochubiaoge/daochubiaoge'
       export default {
           data() {
             return {
               tableData: [{
                 date: '2016-05-02',
                 name: '王小虎',
                 address: '上海市普陀区金沙江路 1518 弄'
               }, {
                 date: '2016-05-04',
                 name: '王小虎',
                 address: '上海市普陀区金沙江路 1517 弄'
               }, {
                 date: '2016-05-01',
                 name: '王小虎',
                 address: '上海市普陀区金沙江路 1519 弄'
               }, {
                 date: '2016-05-03',
                 name: '王小虎',
                 address: '上海市普陀区金沙江路 1516 弄'
               }]
             }
           },
             methods: {
               exportExcel () {
                 FileSaver.fileXlsx('表格1-','#table')
               }
             }
     }
    </script>

    如图:

  • 相关阅读:
    MasterPage中找尋控件
    Win2003服务器发布的网站Session经常丢失
    Toolkits
    aspnet_regiis 命令格式說明
    SQL转换数字中文大写
    ASP.NET2.0实现无刷新客户端回调
    SQL的使用规范
    pku3207 2SAT问题入门
    unity3d打包资源
    Vector3.Lerp 插值
  • 原文地址:https://www.cnblogs.com/juewuzhe/p/14192852.html
Copyright © 2020-2023  润新知