vue实现导出excel

参考小圣贤君

最终效果

点击导表

跳出导出文件

实现过程

1.先安装依赖

npm install --save xlsx file-saver
  
  

2.在需要的组件内引入

  
  

    
    

     
     

    
    
    
    

     
     

      
      import FileSaver 
      
      from 
      
      "file-saver";
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      import XLSX 
      
      from 
      
      "xlsx";
     
     
    
    
  
  

3.使用---必须保证表格格式对应，不然报错

 

我用了布局来写的表格，然后就会报这个错

好吧，来看看正确的写法

  
  

    
    

     
     

    
    
    
    

     
     

      
      <template>
     
     
    
    

    
    

     
     

    
    
    
    

     
     
    
      
      <div>
     
     
    
    

    
    

     
     

    
    
    
    

     
     
        
      
      <!-- 导出按钮 -->
     
     
    
    

    
    

     
     

    
    
    
    

     
     
        
      
      <div class="toexcel">
     
     
    
    

    
    

     
     

    
    
    
    

     
     
            
      
      <el-button  @click="exportExcel" type="primary" class="button" style="width:70px;position:absolute;top:0;right:30px">导出
      
      </el-button>
     
     
    
    

    
    

     
     

    
    
    
    

     
     
        
      
      </div>
     
     
    
    

    
    

     
     

    
    
    
    

     
     
        
      
      <el-table
     
     
    
    

    
    

     
     

    
    
    
    

     
     
            
      
      class=
      
      "table"
     
     
    
    

    
    

     
     

    
    
    
    

     
     
            
      
      :data=
      
      "tableData"
     
     
    
    

    
    

     
     

    
    
    
    

     
     
            
      
      border
     
     
    
    

    
    

     
     

    
    
    
    

     
     
            
      
      style=
      
      "width: 100%">
     
     
    
    

    
    

     
     

    
    
    
    

     
     
            
      
      <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>
     
     
    
    

    
    

     
     

    
    
    
    

     
     
    
      
      </div>
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      </template>
     
     
    
    
  
  

js

  
  

    
    

     
     

    
    
    
    

     
     

      
      <script>
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      import FileSaver 
      
      from 
      
      "file-saver";
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      import XLSX 
      
      from 
      
      "xlsx";
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      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() {
     
     
    
    

    
    

     
     

    
    
    
    

     
     
      
      
      // 设置当前日期
     
     
    
    

    
    

     
     

    
    
    
    

     
     
      
      
      let time = 
      
      new 
      
      Date();
     
     
    
    

    
    

     
     

    
    
    
    

     
     
      
      
      let year = time.getFullYear();
     
     
    
    

    
    

     
     

    
    
    
    

     
     
      
      
      let month = time.getMonth() + 
      
      1;
     
     
    
    

    
    

     
     

    
    
    
    

     
     
      
      
      let day = time.getDate();
     
     
    
    

    
    

     
     

    
    
    
    

     
     
      
      
      let name = year + 
      
      "" + month + 
      
      "" + day;
     
     
    
    

    
    

     
     

    
    
    
    

     
     
      
      
      // console.log(name)
     
     
    
    

    
    

     
     

    
    
    
    

     
     
      
      
      /* generate workbook object from table */
     
     
    
    

    
    

     
     

    
    
    
    

     
     
      
      
      //  .table要导出的是哪一个表格
     
     
    
    

    
    

     
     

    
    
    
    

     
     
      
      
      var wb = XLSX.utils.table_to_book(
      
      document.querySelector(
      
      ".table"));
     
     
    
    

    
    

     
     

    
    
    
    

     
     
      
      
      /* 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;
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
          }
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
        }
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      };
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      </script>
     
     
    
    
  
  

css

  
  

    
    

     
     

    
    
    
    

     
     

      
      <
      
      style 
      
      scoped>
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      /* 导出按钮 */
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      .toexcel {
     
     
    
    

    
    

     
     

    
    
    
    

     
     
  
      
      cursor: pointer;
     
     
    
    

    
    

     
     

    
    
    
    

     
     
  
      
      cursor: hand;
     
     
    
    

    
    

     
     

    
    
    
    

     
     
  
      
      width: 
      
      70px;
     
     
    
    

    
    

     
     

    
    
    
    

     
     
  
      
      height: 
      
      34px;
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      }
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      </
      
      style>