vue導出數據為Excel文件

首先下載依賴

npm install xlsx file-saver --save

然后在src文件夾里面創建一個utils文件夾

在utils文件夾內創建Excel.js文件

把以下代碼直接帖進去

import FileSaver from "file-saver"; import * as XLSX from "xlsx/xlsx.mjs"; export default {// 導出Excel表格exportExcel(name, tableName) {//name表示生成excel的文件名 tableName表示表格的idvar sel = XLSX.utils.table_to_book(document.querySelector(tableName));var selIn = XLSX.write(sel, {bookType: "xlsx",bookSST: true,type: "array",});try {FileSaver.saveAs(new Blob([selIn], { type: "application/octet-stream" }),name);} catch (e) {if (typeof console !== "undefined") console.log(e, selIn);}return selIn;}, };

在main.js中進行全局引入

//全局導出excel
import htmlToExcel from “./utils/Excel”; //剛剛寫好的那個js文件的路徑
Vue.prototype.Excels = htmlToExcel;

最后就是運用到頁面中

methods: {exportExcel() {this.Excels.exportExcel("本月數據報表.xlsx", "#excel"); //此括號里面（第一個是導出文件的名稱，第二個是需要導出的標簽的id）},},

以下為例

<template><div class=""><el-buttontype="primary"title=""icon="el-icon-bottom"@click="exportExcel">導出為Execl</el-button><el-table :data="tableData" style="width: 100%" id="excel"><el-table-column prop="date" label="日期" width="180"> </el-table-column><el-table-column prop="name" label="姓名" width="180"> </el-table-column><el-table-column prop="address" label="地址"> </el-table-column></el-table></div> </template><script> export default {data() {return {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 弄",},],};},mounted() {},methods: {exportExcel() {this.Excels.exportExcel("本月數據報表.xlsx", "#excel");},},components: {},computed: {}, }; </script><style lang="scss" scoped></style>

總結

以上是生活随笔為你收集整理的vue导出数据为Excel文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。