vue導出Excel格式 vue-json-excel file-saver xlsx

第一種 :vue-json-excel

npm 安裝依賴包

安裝依賴包 npm install vue-json-excel

在main.js種引入:

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

在項目中使用:

<template><div id="app"><download-excel class="export-excel-wrapper" :data="json_data" :fields="json_fields" name="點擊下載"></download-excel></div> </template> <script>export default {data() {return {json_fields: {"Complete name": "name", //常規字段Telephone: "phone.mobile", //支持嵌套屬性"Telephone 2": {field: "phone.landline",//自定義回調函數callback: value => {return `Landline Phone - ${value}`;}}},json_data: [{name: "Tony Pe?a",city: "New York",country: "United States",birthdate: "1978-03-15",phone: {mobile: "1-541-754-3010",landline: "(541) 754-3010"}},{name: "Thessaloniki",city: "Athens",country: "Greece",birthdate: "1987-11-23",phone: {mobile: "+1 855 275 5071",landline: "(2741) 2621-244"}}],json_meta: [[{" key ": " charset "," value ": " utf- 8 "}]]};}} </script>

第二種: file-saver xlsx

第一步: 安裝依賴包:

npm:安裝依賴包:

npm install -S file-saver xlsx npm install -D script-loader

yarn:安裝依賴包:

yarn add file-saver yarn add xlsx yarn add script-loader --dev

第二部導入Blob.js 和Export2Excel.js兩個文件,在src目錄下創建excel文件,里面放入Blob.js 和Export2Excel.js兩個文件,

在main.js 里面引入兩個文件

import Blob from './excel/Blob' import Export2Excel from './excel/Export2Excel.js'

在項目中:

<template><div class="hello"><button class="tap" @click="export2Excel">導出表格</button></div> </template><script> export default {data () {return {tableData: [{'index':'999',"nickName": "的舊時光", "name": "98491231841251"},{'index':'1',"nickName": "高貴", "name": "張"},{'index':'2',"nickName": "海aaa灰塵", "name": "小蘭"}]}},methods: {export2Excel() {require.ensure([], () => {const { export_json_to_excel } = require('../excel/Export2Excel');const tHeader = ['序號', '昵稱', '姓名']; // 設置Excel的表格第一行的標題const filterVal = ['index', 'nickName', 'name']; // index、nickName、name是tableData里對象的屬性const list = this.tableData; //把data里的tableData存到listconst data = this.formatJson(filterVal, list);export_json_to_excel(tHeader, data, '導出文件名'); //導出Excel 文件名})},formatJson(filterVal, jsonData) {return jsonData.map(v => filterVal.map(j => v[j]));}} }

注意： axios異步執行，要確保導出組件在之前已經拿到數據了。 vue-json-excel 使用:fetch = “fetchData” 下載，存在下載無反應的bug,因此推薦使用 第二種方式。

現獲取數據，然后使用組件導出到Excel，否則可能會出現導出Excel無反應的情況。獲取數據和下載操作如下：

export2Excel() {this.$axios.get("/sys/dataUnit/list", {params: {status: 2,}}).then(res => {this.tableData = res.data.data.records;console.log("this.tableData");console.log(this.tableData);require.ensure([], () => {const { export_json_to_excel } = require('../excel/Export2Excel');const tHeader = ['中文含義', 'xml tag', '數據類型','默認值']; // 設置Excel的表格第一行的標題const filterVal = ['chineseMessage', 'xmlTag', 'dataType','defaultValue']; // index、nickName、name是tableData里對象的屬性const list = this.tableData; //把data里的tableData存到listconsole.log("list:");console.log(list);const data = this.formatJson(filterVal, this.tableData);export_json_to_excel(tHeader, data, '導出文件名'); //導出Excel 文件名})});},

三、實現Excel寬度自適應

Export2Execl.js文件內容如下，中間注釋代碼為寬度自適應代碼，如有需要解除注釋方可:

/* eslint-disable */ // require('script-loader!file-saver'); // require('script-loader!@/vendor/Blob'); require('script-loader!file-saver'); require('./Blob'); require('script-loader!xlsx/dist/xlsx.core.min'); import XLSX from 'xlsx'function generateArray(table) {var out = [];var rows = table.querySelectorAll('tr');var ranges = [];for (var R = 0; R < rows.length; ++R) {var outRow = [];var row = rows[R];var columns = row.querySelectorAll('td');for (var C = 0; C < columns.length; ++C) {var cell = columns[C];var colspan = cell.getAttribute('colspan');var rowspan = cell.getAttribute('rowspan');var cellValue = cell.innerText;if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;//Skip rangesranges.forEach(function (range) {if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);}});//Handle Row Spanif (rowspan || colspan) {rowspan = rowspan || 1;colspan = colspan || 1;ranges.push({ s: { r: R, c: outRow.length }, e: { r: R + rowspan - 1, c: outRow.length + colspan - 1 } });};//Handle ValueoutRow.push(cellValue !== "" ? cellValue : null);//Handle Colspanif (colspan) for (var k = 0; k < colspan - 1; ++k) outRow.push(null);}out.push(outRow);}return [out, ranges]; };function datenum(v, date1904) {if (date1904) v += 1462;var epoch = Date.parse(v);return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000); }function sheet_from_array_of_arrays(data, opts) {var ws = {};var range = { s: { c: 10000000, r: 10000000 }, e: { c: 0, r: 0 } };for (var R = 0; R != data.length; ++R) {for (var C = 0; C != data[R].length; ++C) {if (range.s.r > R) range.s.r = R;if (range.s.c > C) range.s.c = C;if (range.e.r < R) range.e.r = R;if (range.e.c < C) range.e.c = C;var cell = { v: data[R][C] };if (cell.v == null) continue;var cell_ref = XLSX.utils.encode_cell({ c: C, r: R });if (typeof cell.v === 'number') cell.t = 'n';else if (typeof cell.v === 'boolean') cell.t = 'b';else if (cell.v instanceof Date) {cell.t = 'n';cell.z = XLSX.SSF._table[14];cell.v = datenum(cell.v);}else cell.t = 's';ws[cell_ref] = cell;}}if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);return ws; }function Workbook() {if (!(this instanceof Workbook)) return new Workbook();this.SheetNames = [];this.Sheets = {}; }function s2ab(s) {var buf = new ArrayBuffer(s.length);var view = new Uint8Array(buf);for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;return buf; }export function export_table_to_excel(id) {var theTable = document.getElementById(id);var oo = generateArray(theTable);var ranges = oo[1];/* original data */var data = oo[0];var ws_name = "SheetJS";var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);/* add ranges to worksheet */// ws['!cols'] = ['apple', 'banan'];ws['!merges'] = ranges;/* add worksheet to workbook */wb.SheetNames.push(ws_name);wb.Sheets[ws_name] = ws;var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: false, type: 'binary' });saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), "test.xlsx") }export function export_json_to_excel(th, jsonData, defaultTitle) {/* original data */var data = jsonData;data.unshift(th);var ws_name = "SheetJS";var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);// /*設置worksheet每列的最大寬度*/// const colWidth = data.map(row => row.map(val => {// /*先判斷是否為null/undefined*/// if (val == null) {// return { 'wch': 10 };// }// /*再判斷是否為中文*/// else if (val.toString().charCodeAt(0) > 255) {// return { 'wch': val.toString().length * 2 };// } else {// return { 'wch': val.toString().length };// }// }))// /*以第一行為初始值*/// let result = colWidth[0];// for (let i = 1; i < colWidth.length; i++) {// for (let j = 0; j < colWidth[i].length; j++) {// if (result[j]['wch'] < colWidth[i][j]['wch']) {// result[j]['wch'] = colWidth[i][j]['wch'];// }// }// }// ws['!cols'] = result;/* add worksheet to workbook */wb.SheetNames.push(ws_name);wb.Sheets[ws_name] = ws;var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: false, type: 'binary' });var title = defaultTitle || 'excel-list'saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), title + ".xlsx") }

參考：

https://blog.csdn.net/qq_21013249/article/details/121094224

https://zhuanlan.zhihu.com/p/66069444

https://blog.csdn.net/tao20010624/article/details/121399826

總結

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

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