elementui中有导出组件吗_Element-ui组件库Table表格导出Excel表格

安装

npm install --save xlsx file-saver

两个插件的详细地址在下面

https://github.com/SheetJS/js-xlsx

https://github.com/eligrey/FileSaver.js

代码部分(有注释解释说明)

:data="tableData"

border

style="width: 100%"

id="out-table"

prop="date"

label="日期"

width="180"

prop="name"

label="姓名"

width="180"

prop="address"

label="地址"

点击导出

// 引入导出Excel表格依赖

import FileSaver from "file-saver";

import XLSX from "xlsx";

export default {

data() {

return {

tableData: [

{

date: "2016-05-02",

address: "上海市普陀区金沙江路 1518 弄"

{

date: "2016-05-04",

address: "上海市普陀区金沙江路 1517 弄"

{

date: "2016-05-01",

address: "上海市普陀区金沙江路 1519 弄"

{

date: "2016-05-03",

address: "上海市普陀区金沙江路 1516 弄"

}

]

};

mounted() {},

methods: {

//定义导出Excel表格事件

exportExcel() {

/* 从表生成工作簿对象 */

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" }),

//设置导出文件名称

"sheetjs.xlsx"

);

} catch (e) {

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

}

return wbout;

}

};

.table {

width: 100%;

height: 300px;

}

elementui中有导出组件吗_Element-ui组件库Table表格导出Excel表格相关推荐

使用最新的poi-4.1.0.jar导入导出Excel表格——读取Excel表格数据用法
使用最新的poi-4.1.0.jar导入导出Excel表格--读取Excel表格数据用法其中主要的一点心得就是在switch语句哪里进行读取数据转换时,我看到网上的一些用法都是使用 HSSFCell ...
elementui 上传七牛_element ui使用上传组件上传文件到七牛(qiniu-js)
博主正在重构博客中,刚开始时静态资源都是上传到本地服务器的,但这个项目博主最后打算真正上线运营的.索性就改进了下,把静态资源尽量放到云存储中,方便后续开发.这里把方法和遇到坑给记录下. 1.使用前提注 ...
Kotlin x Java打造 UI 通用组件三-------高级UI组件定制与解耦设计之HiRefresh
需求分析: 设计一个下拉刷新组件,能够提供通用的API,并且支持自定义Head.关于这块其实在之前https://www.cnblogs.com/webor2006/p/7989766.html已经有 ...
Unity自定义UI组件(六)日历、日期拾取器
前言考虑到工业项目中可能会利用到类似日历的工具,就比如选取某个时间节点,所以我结合UGUI源码开发了日历工具和日期拾取器工具,简单易用,接口齐全,可中文显示,外观可自定义.只需要导入脚本,即可在Hi ...
element ui input视图没刷新_聊聊前端 UI 组件：组件体系
本文是文章系列「聊聊前端 UI 组件」的第三篇. 在本系列的上篇文章<聊聊前端 UI 组件:组件特征>中,通过从关注点分离的角度进行前端 UI 组件的构成分析,并以较为抽象的视角对 UI ...
Vue 开发 UI 组件库
Vue 开发 UI 组件库前言一.开发环境搭建 1.项目初始化 2.开发前准备二.Vue 实现常用组件 1.button 组件 1.1 参数支持 1.2 事件支持 1.3 Button 组件 1 ...
php 输出内容到表格,phpexcel 输出表格到页面（在线预览表格），导出excel
php导出excel我们经常采用phpexcel方便,可是在开发过程中,没修过一次就点击下载一个excel文件着实麻烦,而且还不容易调试错误.其实phpexcel 还可以输出表格到页面,方便调试实例 ...
【封装UI组件库】手把手教你仿一下Element-ui的Button组件（发布至npm）
所谓UI组件库,就是封装了平常项目开发中经常会使用的页面组件,发布至npm库中作为插件供项目组成员及其他开发者使用(不发布也行),目的就是为了避免多次重复劳动. 以插件的形式使用可以做到即插即用,非常 ...
Vue.js之UI组件elementUI——MintUI
目的: 为了提高开发效率功能原则: 拿过来直接使用 vue-cli -> vue-loader bower 前端包管理器 jquery#1.11.1 自动解决依赖 npm node包管理 ...

elementui中有导出组件吗_Element-ui组件库Table表格导出Excel表格

elementui中有导出组件吗_Element-ui组件库Table表格导出Excel表格相关推荐

最新文章

热门文章