vue导出excel

vue使用FileSaver XLSX导出excel

---

一、安装插件

npm install file-saver xlsx --save-dev

二、使用步骤

1.引入插件

import FileSaver from 'file-saver';
import XLSX from 'xlsx';

2.使用插件

代码如下（示例）：
使用id选择器包裹要打印的表格

 <div class="right-table tableClass" id="out-table">
        <el-table
          :data="tableDataOfRight"
          style="width: 100%"
          :height="rightHeight"
          size="medium "
          highlight-current-row
          v-loading="loadingRight"
          :header-cell-style="{
            textAlign: 'center',
            color: '#fff ',
            backgroundColor: '#1192AC',
            fontSize: '14px',
            height: '38px',
            padding: '0',
          }"
          border
          show-summary
          :summary-method="totalOutPrice"
        >
          <el-table-column
            prop="therapyItemName"
            label="治疗项目"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="price"
            label="单价"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="totalNumber"
            label="总次数"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="totaMoney"
            label="合计金额"
            align="center"
          ></el-table-column>
        </el-table>
        <el-pagination
          @size-change="sizeChangeRight"
          @current-change="currentChangeRight"
          :current-page="pageRight"
          :page-sizes="[10, 15, 20, 30, 10000]"
          :page-size="limitRight"
          :total="totalCountRight"
          layout="total, sizes, prev, pager, next, jumper"
          class="pageClaa"
        >
        </el-pagination>
      </div>

调用方法

 exportBtn() {
      /* 从表生成工作簿对象 */
      var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
      /* 获取二进制字符串作为输出 */
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        FileSaver.saveAs(
          //Blob 对象表示一个不可变、原始数据的类文件对象。
          //Blob 表示的不一定是JavaScript原生格式的数据。
          //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
          //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
          new Blob([wbout], { type: "application/octet-stream" }),
          //设置导出文件名称
          '某某某工作量.xlsx'
        );
      } catch (e) {
        if (typeof console !== "undefined");
      }
      return wbout;
    },

该处使用的url网络请求的数据。

---

打印大量数据

如：添加分页项为10000条/页