前端实现下载excel文件的el-table表格数据

创建一个js文件

安装依赖 file-saver xlsx

在刚才创建的js文件中粘以下代码我这里文件名就叫htmlToExcel.js

import FileSaver from "file-saver";

import XLSX from "xlsx";

const htmlToExcel = {

getExcel(dom,title='默认标题',){

var excelTitle = title;

var wb = XLSX.utils.table_to_book(document.querySelector(dom), { raw: true });

/* 获取二进制字符串作为输出 */

var wbout = XLSX.write(wb, {bookType: "xlsx",bookSST: true,type: "array"});

try {

FileSaver.saveAs(

new Blob([wbout], { type: "application/octet-stream" }),

excelTitle + ".xlsx"

);

} catch (e) {

if (typeof console !== "undefined") console.log(e, wbout);

}

return wbout;

}

};

export default htmlToExcel;

在需要下载的组件中引入刚才的js文件

import htmlToExcel from "../utils/htmlToExcel";

再给元素一个id 我这里就叫table了

<el-table

:data="tableData"

height="250"

id="table"

ref="print-content"

border

style="width: 100%">

在需要执行的DOM元素中给个点击事件

<el-button icon="el-icon-download" @click="exportExcel">下载</el-button>

exportExcel() {

htmlToExcel.getExcel('#table','设备查询') //参数1是刚才起的id的名字参数2是命名导出的excel文件的文件名

到这里下载功能就实现喽很简单

前端实现下载excel文件的el-table表格数据相关推荐

前端axios下载excel文件(二进制)的处理方法
前端axios下载excel文件(二进制)的处理方法后端生成excel后,前端 click 事件进行下载 ,脱坑记录,亲测有效. lz 使用的是 axios 发起请求 , 首先,介绍一下思路,准备通 ...
前端下载excel文件功能的三种方法
1 从后端接收json数据,前端处理生成excel下载 JsonExportExcel的github地址:https://github.com/cuikangjie/JsonExportExcel 这 ...
nodejs调用后端接口返回excel文件流，nodejs再转发前端实现下载excel
今天在项目上遇到了一个问题,就是后端接口返回excel文件流,然后前端实现下载excel,前端下载的excel文件居然无法打开! 在网上搜索了很多对应的资料,也尝试了很多办法,还是没能解决,最后在这篇 ...
Vue 下载 Excel 文件
Vue 下载 Excel 文件 Vue前端将List列表下载为Excel文件安装依赖包首先前端将List列表生成Excel文件需要下载几个依赖包. npm install -S file-save ...
php通过ajax下载文件,PHP使用ajax的post方式下载excel文件简单示例
本文实例讲述了PHP使用ajax的post方式下载excel文件.分享给大家供大家参考,具体如下: 项目需求,前端发起ajax请求,后端生成excel并下载,同时需要在header头中,带上token ...
react接收后端文件_React获取Java后台文件流并下载Excel文件流程解析
记录使用blob对象接收java后台文件流并下载为xlsx格式的详细过程,关键部分代码如下. 首先在java后台中设置response中的参数: public void exportExcel(Htt ...
PHP使用ajax的post方式下载excel文件简单示例
本文实例讲述了PHP使用ajax的post方式下载excel文件.分享给大家供大家参考,具体如下: 项目需求,前端发起ajax请求,后端生成excel并下载,同时需要在header头中,带上token ...
java文件流下载excel_React获取Java后台文件流下载Excel文件
记录使用blob对象接收java后台文件流并下载为xlsx格式的详细过程,关键部分代码如下. 首先在java后台中设置response中的参数: public void exportExcel(Htt ...
c #点击按钮下载excel文件
c #点击按钮下载excel文件前端代码省去了,button属性οnclick="excel" public void excel(object sender, EventArg ...

前端实现下载excel文件的el-table表格数据

前端实现下载excel文件的el-table表格数据相关推荐

最新文章

热门文章