vue将表格导出为excel

2018-03-18 19:51  龙恩0707  阅读(2649)  评论(1)  编辑  收藏  举报 vue将表格导出为excel

vue将表格导出为excel

一：在项目中需要安装2个依赖项，如下命令：

npm install --save file-saver xlsx

二：在vue文件中如下使用即可：

<template>
  <div class="hello">
    <h1>vue</h1>
    <h2>{{msg}}</h2>
    <p><button type="button" id="export-table" @click="exportFunc">下载excel文件</button></p>
    <div id="out-table">
      <table>
        <thead>
          <tr>
            <td>ID</td>
            <td>姓名</td>
            <td>年龄</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>111111</td>
            <td>我是前端开发</td>
            <td>今年29岁</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import FileSaver from \'file-saver\';
import XLSX from \'xlsx\';
console.log(FileSaver);
export default {
  name: \'helloworld\',
  data () {
    return {
      msg: \'Welcome to Your Vue.js App\'
    };
  },
  methods: {
    exportFunc: function(e) {
      // 从表生成工作簿对象
      var wb = XLSX.utils.table_to_book(document.getElementById(\'out-table\'));
      // 得到二进制字符串作为输出
      var wbout = XLSX.write(wb, {
        bookType: \'xlsx\',
        type: \'binary\'
      });
      FileSaver.saveAs(new Blob([this.s2ab(wbout)], {
        type: \'application/octet-stream\'
      }), \'a.xlsx\');
    },
    s2ab: function(s) {
      var cuf;
      var i;
      if (typeof ArrayBuffer !== \'undefined\') {
        cuf = new ArrayBuffer(s.length);
        var view = new Uint8Array(cuf);
        for (i = 0; i !== s.length; i++) {
          view[i] = s.charCodeAt(i) & 0xFF;
        }
        return cuf;
      } else {
        cuf = new Array(s.length);
        for (i = 0; i !== s.length; ++i) {
          cuf[i] = s.charCodeAt(i) & oxFF;
        }
        return cuf;
      }
    }
  },
  components: {
    FileSaver,
    XLSX
  }
};
</script>

git上源码

注意：table里面中的表头thead中不能使用th标签，否则的话，表头导入不出去到excel文件中，只能使用tr，td这样的。

• 分类 vue
• 标签 vue将表格导出为excel