zoukankan      html  css  js  c++  java
  • vue导出table内容至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>

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

     

    ------------------------------------------------------------------------------------------------------

    转自:https://www.cnblogs.com/tugenhua0707/p/8597050.html

  • 相关阅读:
    人月神话 读书笔记01
    团队项目个人每日总结(4.26)
    团队项目个人每日总结(4.25)
    团队项目个人每日总结(4.24)
    百度的用户体验
    团队项目个人每日总结(4.23)
    用户场景描述
    团队项目个人每日总结(4.22)
    团队项目个人每日总结(4.21)
    构建之法阅读笔记03
  • 原文地址:https://www.cnblogs.com/liuboyuan/p/11340030.html
Copyright © 2011-2022 走看看