vue导出Excel组件

导出Excel组件

任务场景：上传图片生成表格（百度api）展示表格内容并可以导出成Excel(前端实现)

前端导出表格为Excel文件，就封装了一个按钮可以直接点击然后导出表格(记录一下)

效果展示

具体实现 (组件篇)

// 首先要引入两个js文件 别人封好的 Blob.js和Export2Excel.js这两个网上很多可以直接去下载
// 或者npm下载也可以
<template>
<div v-if="flag"><slot></slot>
</div>
</template><script>
export default {/*columns: [{title: '', key: 'date'},{title: '', key: 'name'},{title: '', key: 'address'}],tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]父组件点击事件click () {this.exportTableFlag = false// 这里面写数据的处理this.$nextTick(() => {this.exportTableFlag = truethis.$refs.exportTableRef.exportData()})}*/props: {columns: {require: true,Object: Array},tableData: {require: true,Object: Array},tableName: {require: false,default: '数据列表',Object: String},btnName: {require: false,default: '导出表格',Object: String},flag: {require: true,default: false,Object: Boolean}},data() {return {e_columns: [],e_tableData: []}},watch: {columns: {handler (newV) {this.e_columns = newV},deep: true,immediate: true},tableData: {handler (newV) {this.e_tableData = newV},deep: true,immediate: true}},mounted () {// this.$nextTick(() => {//   this.$on('exportData', function () {//   console.log(this.e_tableData)//   })// })},methods: {// 由父组件通过ref直接调用exportData () {this.$emit('exportData')console.log(this.e_tableData)console.log(this.e_columns)this.export2Excel(this.e_columns, this.e_tableData)},export2Excel(columns,list){require.ensure([], () => {const { export_json_to_excel } = require('./excel/Export2Excel');let tHeader = []let filterVal = []console.log(columns)if(!columns){return;}columns.forEach(item =>{tHeader.push(item.title)filterVal.push(item.key)})const data = list.map(v => filterVal.map(j => v[j]))export_json_to_excel(tHeader, data, this.tableName);})}}
}
</script><style></style>

具体地方使用

<export-table ref="exportTableRef" :columns="columns" :tableData="tableData" :flag="exportTableFlag"><el-button type="primary" @click="createdExcel" style="margin-top: 20px" size="small">生成Excel表格</el-button>
</export-table>
// 不知道为啥直接父组件直接调用时，子组件的watch监听不到，所以使用了v-if来让子组件能够监听到数据变化
import exportTable from '@/components/Common/exportTable/exportTable'
components: {exportTable
}，
data () {return {exportTableFlag: false}
},
methods: {// 把数据处理成子组件需要的数据 我这儿由于下方加了一个操作按钮，所以需要把操作按钮干掉，所以写了这些逻辑// 点击之前先隐藏按钮 然后调用方法前再显示 页面上没有任何消失显示的效果 createdExcel () {console.log(this.imgTableList)this.exportTableFlag = falsethis.columns = []this.tableData = []let tableObj = {}this.imgTableList.map((item, index) => {if (index === 0) {item.map((item1, index1) => {this.columns.push({title: item1.word,key: item1.column})})} else if (index !== this.imgTableList.length - 1) {item.map((item2, index2) => {tableObj[item2.column] = item2.word})this.tableData.push(tableObj)tableObj = {}}})console.log(this.columns)console.log(this.tableData)this.$nextTick(() => {this.exportTableFlag = true// 调用子组件导出表格方法this.$refs.exportTableRef.exportData()})},
}

vue导出Excel组件相关推荐

封装vue导出excel组件（扩展嵌入图片、操作工作表、表格样式等功能）
导出的excel中嵌入图片,同时还需要操作多个工作表与表格样式, 看了一些java的插件不太适合,因为我这边的需求是动态表单,字段不固定.后端的插件大部分依赖实体类注解,要不就是操作比较繁琐.又看了一 ...
vue导入导出excel组件封装
vue导入导出excel组件可直接使用参考以下博客,侵删参考的博客 ##一: 项目安装依赖 npm install --save xlsx 在项目中创建文件夹及文件如下图: excel-impo ...
vue导出excel加一个进度条_vue导出excel遇到的问题解决方法
本篇文章给大家带来的内容是关于vue导出excel遇到的问题解决方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 需求: Vue+element UI el-table下的导出当前 ...
vue导出excel功能实现
vue导出excel功能实现第一步安装依赖包第二步在项目中assets创建一个新的文件夹js用于存放Blob和Export2Excel两个js文件第三步在你那个组件中使用写事件方法 Expor ...
vue导出excel表的时候有多张图片
vue导出excel的时候多张图片遇到数据结构是[ { id:id, image:['图片','图片','图片'] } ] 这样的数据导出,使用插件 js-table2excel 导出的时候发现它只 ...
(vue)vue导出excel文件打不开，或者文件内容为object object
(vue)vue导出excel文件打不开,或者文件内容为object object[已解决] bug: 主要原因:没有注意到后端返回的数据格式,需要的是res而不是res.data 正确写法: < ...
vue导出Excel表格全局函数（简洁明了）
vue导出excel全局函数(简洁明了) 将导出到Excel功能封装成一个公用js函数,供其他vue页面复用. 1.安装Excel插件 npm install --save xlsx file-sav ...
Magicodes.IE.Excel 用法注意导出Excel 组件,非常好用的.
Magicodes.IE.Excel 导出Excel 组件,非常好用的. 本人在使用过程中遇到的一些小小问题分享给大家注意的: 第一:注意字段不能有空格第二:注意属性类型最好都是string类型 [ ...
java导出excel组件alibaba easyexcel和apache poi性能对比
java导出excel组件alibaba easyexcel和apache poi性能对比背景: 开发中出现web页面导出记录到excel导致服务oom奔溃,代码中使用apache poi组件导出, ...
【vue开发】vue导出Excel表格教程demo
前端工作量最多的就是需求,需求就是一直在变,比如当前端数据写完之后,需要用Excel把数据下载出来:再比如前端在没有数据库想写些demo玩时,也是很好的选择. 第一步安装依赖包,修改配置 1.装依赖: ...

vue导出Excel组件

导出Excel组件

vue导出Excel组件相关推荐

最新文章

热门文章