vue实现导出表格数据

先看实现效果

1.安装依赖

cnpm install -S file-saver xlsx
cnpm install -S script-loader

2.在公共组件中引入

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

3.使用

小案例

封装的公共组件

<template><!-- // 导出按钮  --><el-button type="success" icon="el-icon-upload" @click="exportEvent">导出</el-button>
</template><script>
// 引入导出插件
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {data() {return {};},//需要的参数props: {id: {type: String,default: "Table",},name: {type: String,default: "Table",},},methods: {// 导出Excel表格事件exportEvent() {let gatherData = { raw: true };let grid = XLSX.utils.table_to_book(document.querySelector("#" + this.id),gatherData);let workbook = XLSX.write(grid, {bookType: "xlsx",bookSST: true,type: "array",});try {FileSaver.saveAs(new Blob([workbook], {type: "application/octet-stream",}),this.name + ".xlsx");} catch (e) {if (typeof console !== "undefined") console.log(e, workbook);}return workbook;},},
};
</script>

使用的组件

<template><div><div><derive :id="spreadsheet.id" :name="spreadsheet.name">导出</derive></div><div class="tableBox"><el-table :data="tableData" border :id="spreadsheet.id"><el-table-column align="center" prop="sqrq" label="申请日期"></el-table-column><el-table-column align="center" prop="clpp" label="车辆品牌"></el-table-column><el-table-column align="center" prop="clxh" label="车辆型号"></el-table-column><el-table-column align="center" prop="vin" label="VIN码"></el-table-column><el-table-column align="center" prop="scqy" label="生产企业"></el-table-column><el-table-column align="center" prop="cllx" label="车辆类型"></el-table-column><el-table-column align="center" prop="rlzl" label="燃油种类"></el-table-column><el-table-column align="center" prop="obdlw" label="OBD联网"></el-table-column></el-table></div></div>
</template><script>
import derive from "@/components/derive"; //引入公共组件
export default {data() {return {tableData: [], //要导出的表格数组spreadsheet: {id: "exportTable", //idname: "交易数据", //导出文件名},};},//注册组件components: {derive,},
};
</script>

vue实现导出表格数据相关推荐

标题vue导出表格数据，excel表格打不开
vue导出表格数据,excel表格打不开代码如下,当时是将**responseType: 'blob'**写在{headers: getHeader() }外面,导致问题一直没解决,后来经过度娘,了 ...
前端使用插件导出表格数据到Excel
1.安装 vue-json-excel 依赖 npm install vue-json-excel 2.初始化 vue-json-excel import Vue from 'vue' import ...
vue实现导入表格数据【纯前端实现】
一.文章引导 #mermaid-svg-j9HOnISPE2Hyb9Zj {font-family:"trebuchet ms",verdana,arial,sans-serif; ...
Vue+element-ui实现表格数据渲染+分页
Vue+element-ui实现表格数据渲染+分页具体属性请看官方文档:Table 表格这里给大家看一个比较不错的表格数据渲染的例子,也是我目前所写的项目中的一部分. 这里呢我们就不给大家说顶栏和 ...
根据查询结果导出表格数据
根据查询结果导出表格数据 bootstrap table 自定义导出excle 甲方非要根据查询结果导出数据 $("#导出按钮").on('click', function () ...
js+PHP利用PHPExcel导出表格数据到excel
这里写自定义目录标题前言通过js筛选出表格数据 PHP利用PHPExcel导出表格数据到excel 前言因为在开发平台的时候遇到了需要将表格数据导出到Excel的情况,通过百度找到了PHP插件P ...
php输出json到表格,Vue如何导出json数据到Excel电子表格方法
本文主要介绍了Vue导出json数据到Excel电子表格的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助到大家. 一.安装依赖(前面基本一样) npm install file- ...
vue中导出json数据为excel表格并保存到本地
继我上次成功利用vue和elemen把excel的数据导入至前端vue,因为excel表中的数据有些必填项没有填写或者填写错误(比如写错字)所以就要将没有成功导入的数据导出成一份excel表并保存至本 ...
记element + xlsx 导出表格数据重复的坑
在使用elementui做管理平台时遇到导出表格的需求,网上有很多解决方案,最多的就是使用xlsx + FileSaver 将页面上的表格转换成excel book. // 安装xlsx filesa ...

vue实现导出表格数据

先看实现效果

vue实现导出表格数据相关推荐

最新文章

热门文章