目录

方式一 ：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的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。