目錄

方式一?：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、效果圖

導(dǎo)出指定的記錄

1、引入依賴

2、使用

?3、效果圖

---

方式一?：vue-json-excel

這種方式會導(dǎo)出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>導(dǎo)出EXCEL</el-button></download-excel></div> </template><script> export default {data() {return {json_fields: {年齡: "age", //常規(guī)字段姓名: "info.name", //支持嵌套屬性密碼: {field: "info.phone",//自定義回調(diào)函數(shù)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：需要導(dǎo)出的數(shù)據(jù)
• json_fields：自主選擇要導(dǎo)出的字段，若不指定，默認(rèn)導(dǎo)出全部數(shù)據(jù)中心全部字段

屬性名類型描述

data	Array	需要導(dǎo)出的數(shù)據(jù)，支持中文
fields	Object	定義需要導(dǎo)出數(shù)據(jù)的字段
name	String	導(dǎo)出excel的文件名
type	String	導(dǎo)出excel的文件類型（xls,csv）,默認(rèn)是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目錄下創(chuàng)建excel文件,里面放入Blob.js 和Export2Excel.js兩個文件

下載地址：https://pan.baidu.com/s/14cYTqYx7M0oyyYawsB0jjQ? ?提取碼：ksnq

3、使用

<template><div><el-button type="primary" @click="export2Excel()">導(dǎo)出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>

參數(shù)	說明	類型	可選值	默認(rèn)值
header	導(dǎo)出數(shù)據(jù)的表頭	Array	/	[]
data	導(dǎo)出的具體數(shù)據(jù)	Array	/	[]
filename	導(dǎo)出文件名	String	/	excel-list
autoWidth	單元格是否要自適應(yīng)寬度	Boolean	true / false	true
bookType	導(dǎo)出文件類型	String	xlsx, csv, txt, more	xlsx

4、效果圖

基于此方法，封裝的導(dǎo)出Excel組件：ExportExcel

?首先還是引入依賴

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

再下載Blob.js和Export2Excel.js，并在src目錄下創(chuàng)建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">導(dǎo)出</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: {//導(dǎo)出Excelexport2Excel() {if (this.multipleSelection.length == 0) {this.$message.warning("請勾選需要導(dǎo)出的記錄");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("導(dǎo)出成功");});} catch (error) {this.$message.error("導(dǎo)出失敗");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>

導(dǎo)出指定的記錄

1、引入依賴

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

2、使用

<template><div><el-button type="primary" @click="exportExcel">導(dǎo)出文件</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 節(jié)點 ) ，sheetjs.xlsx 即為導(dǎo)出表格的名字，可修改！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、效果圖

此外，如果想導(dǎo)出指定的記錄，可以參考這篇文章：https://www.jianshu.com/p/2819b563bfd7

總結(jié)

以上是生活随笔為你收集整理的Vue中导出Excel的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。