完美解决vue将 element el-table 表格导出为excel

最新推荐文章于 2025-02-22 17:32:20 发布

原创最新推荐文章于 2025-02-22 17:32:20 发布 · 741 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #excel #elementui

vue 专栏收录该内容

19 篇文章

订阅专栏

这篇博客展示了如何在Vue.js应用中利用file-saver和xlsx库将HTML表格数据导出为Excel文件。通过编写JS代码，实现了点击按钮触发表格数据的转换和下载功能，使得前端开发者能够方便地处理和分享表格数据。

第一步：安装依赖包

npm install --save file-saver xlsx

第二步：vue中的js例子，照着写，聪明的你看的懂。

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