方式一：vue-json-excel

1、引入vue-json-excel

2、 main.js中全局注册

3、使用

4、效果图

方式二：file-saver、xlsx、script-loader

1、引入依赖

2、下载并引入Blob.js和Export2Excel.js

3、使用

4、效果图

导出指定的记录

1、引入依赖

2、使用

3、效果图

方式一：vue-json-excel

这种方式会导出xls后缀的格式

1、引入vue-json-excel

cnpm i -S vue-json-excel

2、 main.js中全局注册

import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)

3、使用

<!--home-->
<template><div class="home"><download-excelclass="export-excel-wrapper":data="json_data":fields="json_fields"type="xls"worksheet="My Worksheet"name="用户信息"><el-button>导出EXCEL</el-button></download-excel></div>
</template><script>
export default {data() {return {json_fields: {年龄: "age", //常规字段姓名: "info.name", //支持嵌套属性密码: {field: "info.phone",//自定义回调函数callback: value => {return `+86 ${value}`;}}},json_data: [{age: 22,info: {name: "张三",phone: 12222222222},sex: "男"},{age: 23,info: {name: "李四",phone: 13333333333},sex: "女"}]// json_meta: [//   [//     {//       " key ": " charset ",//       " value ": " utf- 8 "//     }//   ]// ]};}
};
</script><style lang="scss" scoped>
.home {height: 100%;background-color: rgb(128, 126, 126);
}
</style>

在这里说明一下组件的各个属性

json_data：需要导出的数据
json_fields：自主选择要导出的字段，若不指定，默认导出全部数据中心全部字段

属性名	类型	描述
data	Array	需要导出的数据，支持中文
fields	Object	定义需要导出数据的字段
name	String	导出excel的文件名
type	String	导出excel的文件类型（xls,csv）,默认是xls

4、效果图

方式二：file-saver、xlsx、script-loader

1、引入依赖

cnpm i -S file-saver xlsx
cnpm i -D script-loader

2、下载并引入Blob.js和Export2Excel.js

在src目录下创建excel文件,里面放入Blob.js 和Export2Excel.js两个文件

下载地址：https://pan.baidu.com/s/14cYTqYx7M0oyyYawsB0jjQ 提取码：ksnq

3、使用


<template><div><el-button type="primary" @click="export2Excel()">导出Excel</el-button></div>
</template><script>
export default {components: {},data() {return {tableData: [{ index: 0, username: "张三", password: 333, age: 22 },{ index: 1, username: "李四", password: 444, age: 23 }]};},props: {},created() {},mounted() {},computed: {},methods: {export2Excel() {require.ensure([], () => {const { export_json_to_excel } = require("@/excel/Export2Excel");const fieldName = ["索引", "用户名", "密码"];const filterVal = ["index", "username", "password"];const data = this.tableData.map(v => filterVal.map(j => v[j]));export_json_to_excel(fieldName, data, "用户列表");});}},watch: {}
};
</script><style lang="scss" scoped>
</style>

参数	说明	类型	可选值	默认值
header	导出数据的表头	Array	/	[]
data	导出的具体数据	Array	/	[]
filename	导出文件名	String	/	excel-list
autoWidth	单元格是否要自适应宽度	Boolean	true / false	true
bookType	导出文件类型	String	xlsx, csv, txt, more	xlsx

4、效果图

基于此方法，封装的导出Excel组件：ExportExcel

首先还是引入依赖

cnpm i -S file-saver xlsx
cnpm i -D script-loader

再下载Blob.js和Export2Excel.js，并在src目录下创建excel文件,里面放入Blob.js 和Export2Excel.js两个文件

下载地址：https://pan.baidu.com/s/14cYTqYx7M0oyyYawsB0jjQ 提取码：ksnq

@/components/ExportExcel/index.vue：

<!--ExportExcel-->
<template><div style="display: inline-block"><el-popover placement="left" title="文件名" width="200" trigger="hover"><el-inputv-model="filename"placeholder="请输入文件名"clearable></el-input><el-button @click="export2Excel()" style="margin: 10px 0">确定</el-button><el-button slot="reference">导出</el-button></el-popover></div>
</template><script>
export default {name: "ExportExcel",components: {},props: {multipleSelection: {type: Array,default: () => [],required: true,},fieldName: {type: Array,default: () => [],required: true,},fieldValue: {type: Array,default: () => [],required: true,},},data() {return {filename: "",};},created() {},mounted() {},computed: {},methods: {//导出Excelexport2Excel() {if (this.multipleSelection.length == 0) {this.$message.warning("请勾选需要导出的记录");return;}try {require.ensure([], () => {const { export_json_to_excel } = require("@/excel/Export2Excel");const data = this.multipleSelection.map((v) =>this.fieldValue.map((j) => v[j]));export_json_to_excel(this.fieldName, data, this.filename);this.filename = "";this.$emit("exported");this.$message.success("导出成功");});} catch (error) {this.$message.error("导出失败");this.filename = "";this.$emit("exported");}},},watch: {},
};
</script><style lang="scss" scoped>
.ExportExcel {
}
</style>

使用：

<template><div><ExportExcel:multipleSelection="multipleSelection":fieldName="exportExcelData.fieldName":fieldValue="exportExcelData.fieldValue"@exported="clearSelect()"></ExportExcel><el-table ref="ref_table"/></div>
</template>
<script>
import ExportExcel from "@/components/ExportExcel/index.vue";export default {components: {DialogSuppliers,ExportExcel,},data() {return {multipleSelection: [{"username":"admin","password":123},{"username":"test","password":1243}],exportExcelData: {fieldName: ["用户名", "密码"],fieldValue: ["username", "password"]}};},methods: {clearSelect() {this.$refs["ref_table"].clearSelection();}
}
</script>

导出指定的记录

1、引入依赖

cnpm i -S file-saver xlsx
cnpm i -D script-loader

2、使用

<template><div><el-button type="primary" @click="exportExcel">导出文件</el-button><el-table :data="tableData" style="width: 100%" id="out-table"><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="age" label="年龄" width="80"></el-table-column><el-table-column prop="date" label="日期"></el-table-column></el-table></div>
</template><script>
//引入安装的依赖
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {data() {return {tableData: [{name: "张三",age: 22,date: "2016-05-02"},{name: "王小虎",age: 23,date: "2016-05-04"}]};},methods: {// XLSX.uitls.table_to_book( 放入的是table 的DOM 节点 ) ，sheetjs.xlsx 即为导出表格的名字，可修改！exportExcel() {let wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));let wbout = XLSX.write(wb, {bookType: "xlsx",bookSST: true,type: "array"});FileSaver.saveAs(new Blob([wbout], { type: "application/octet-stream" }),"用户列表.xlsx");return wbout;}}
};
</script><style scoped>
</style>

3、效果图

此外，如果想导出指定的记录，可以参考这篇文章：https://www.jianshu.com/p/2819b563bfd7

Vue中导出Excel相关推荐

vue中导出Excel表格
vue中导出Excel表格项目中我们可能会碰到导出Excel文件的需求,一般后台管理系统中居多,将table中展示的数据导出保存到本地.当然我们也可以通过一些处理来修改要导出的数据格式,具体需求具体 ...
VUE中导出Excel功能的实现
一.在上一篇文章中我们已经完成了WebSql的操作,并且初始化了一些数据,那么如何导出这些数据呢? **当然方法有多种,本次我们采用引入Export2Excel.js的方法 1.添加所需依赖 npm ...
vue中导出excel表格(支持导出图片)
//安装插件 npm install js-table2excel //引入插件 import table2excel from 'js-table2excel' //tableData数据 tabl ...
vue中实现Excel导入导出功能
导入Excel功能前置条件: 依赖包xlsx npm install xlsx -S 这里提供一个现成的在vue中导入Excel的功能(原作者-花裤衩),代码在最下面,可直接复制. 创建一个文件夹, ...
如何在 Vue 中导出数据至 Excel 表格 - 卡拉云
本文首发:<如何在 Vue 中导出数据至 Excel 表格 - 卡拉云> 我们经常需要在 Vue 搭建的后台管理系统里导出数据到 Excel / CSV ,方便我们将数据共享给其他同学或在 ...
vue中使用excel单个/批量导出表格数据
在后台管理系统中导出excel表格是很常见的,简单实现过程如下所示:
vue中下载excel的使用，后端链接两种情况，一个是链接，一个是文件流
vue中下载excel使用一.这是第一种情况,后台链接地址返回的是一个url,这个时候我只要在导出按钮上绑定exportData()这个事件方法就好了 exportData() {this.time ...
vue导入导出excel组件封装
vue导入导出excel组件可直接使用参考以下博客,侵删参考的博客 ##一: 项目安装依赖 npm install --save xlsx 在项目中创建文件夹及文件如下图: excel-impo ...
Acey.ExcelX实例演练(1)—从GridView中导出Excel报表
Acey.ExcelX实例演练(1) -从GridView中导出Excel报表关键词:GridView,数据绑定,Excel报表在开发过程中我们经常遇到需要将页面中查看到的数据导出Excel的情况 ...
WinForm中导出Excel
通过传入不同的数据集来控制Excel中sheet的数目,此例依照两个为例,仅供大家参考: #region 導出Excel private void outPutExcel(System ...

Vue中导出Excel

方式一：vue-json-excel

1、引入vue-json-excel

2、 main.js中全局注册

3、使用

4、效果图

方式二：file-saver、xlsx、script-loader

1、引入依赖

2、下载并引入Blob.js和Export2Excel.js

3、使用

4、效果图

导出指定的记录

1、引入依赖

2、使用

3、效果图

Vue中导出Excel相关推荐

最新文章

热门文章

Vue中导出Excel

方式一 ：vue-json-excel

1、引入vue-json-excel

2、 main.js中全局注册

3、使用

4、效果图

方式二：file-saver、xlsx、script-loader

1、引入依赖

2、下载并引入Blob.js和Export2Excel.js

3、使用

4、效果图

导出指定的记录

1、引入依赖

2、使用

3、效果图

Vue中导出Excel相关推荐

最新文章

热门文章

方式一：vue-json-excel