首页 > 其他 > 详细

vue --》前端导出excel表

时间:2020-07-07 11:57:36      阅读:54      评论:0      收藏:0      [点我收藏+]

1.安装两个依赖包

   cnpm install file-saver  xlsx --save

2.在所用的页面中引入

import FileSaver from "file-saver";
import XLSX from "xlsx";
 
3.导出的方法
<el-button class="fr m-r-10 m-t-10" @click="exportExcel(deviceName)" size="mini">导出列表<i class="el-icon-download el-icon--right"></i></el-button>

<el-table :data="tableData" :id=tables :height="hg" style="text-align: left;width: 100%;" size="mini" empty-text="无符合条件数据" stripe></el-table>


//导出
    exportExcel(name) {
      let idNames = "tables"; //需要导出的表id
      let xlsxParam = { raw: true }; //转换成excel时,使用原始的格式
      let wb = XLSX.utils.table_to_book(document.getElementById(idNames), xlsxParam);
      let wbout = XLSX.write(wb, { bookType: "xlsx", bookSST: true, type: "array" });
      try {
        FileSaver.saveAs(new Blob([wbout], { type: "application/octet-stream" }), name + ".xlsx");  //导出表名称
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },

 

vue --》前端导出excel表

原文:https://www.cnblogs.com/wangqi2019/p/13259822.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!