Vue+element-table组件将选中的数据导出为excel（导出的是当前页选中的数据）

2023-11-10 06:08
文章标签 javascript 数据 excel 组件 vue 导出 table frontend 选中 element 当前页

本文主要是介绍Vue+element-table组件将选中的数据导出为excel（导出的是当前页选中的数据），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在这里插入图片描述
在这里插入图片描述

1.安装插件

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

如果想详细看前两个插件使用，地址如下。

https://github.com/SheetJS/sheetjs.
https://github.com/eligrey/FileSaver.js.

2.在src文件夹下新建 excel文件夹，并在excel文件夹下新建 Blob.js 和 Export2Excel.js 文件（文章末尾处附 Blob.js 和 Export2Excel.js 代码）
在这里插入图片描述
3.使用：
（1）. 如果项目中有很多地方用到导出数据成表格，则在 main.js中引入 Blob.js 和 Export2Excel.js

// 引入导出Excel表格依赖
import Blob from './excel/Blob.js'    
import Export2Excel from './excel/Export2Excel.js'

（2）. 如果项目中只有一个地方用到，则在要使用到的页面里引入：在这里插入图片描述
4、以下以在项目中的多处地方使用为例：

<template><div><!--导出按钮--><el-button size="small" type="primary" @click="exportExcel" icon="el-icon-plus">导出</el-button><!--列表--><el-table:header-cell-style="{ background: '#eef1f6', color: '#606266' }" //设置table表头的背景色size="small"id="out-table"stripe:data="listData"highlight-current-rowv-loading="loading"borderelement-loading-text="拼命加载中"style="width: 100%;"@selection-change="handleSelectionChange"><el-table-column align="center" type="selection" width="60"></el-table-column><el-table-column:show-overflow-tooltip="true"sortableprop="province"label="地市"><template slot-scope="scope"><span v-show="scope.row.country">{{ scope.row.province }}-{{ scope.row.city }}-{{scope.row.area}}-{{ scope.row.country }}</span><span v-show="!scope.row.country">{{ scope.row.province }}-{{ scope.row.city }}-{{ scope.row.area }}</span></template></el-table-column><el-table-column sortable prop="code" label="邮编"> </el-table-column><el-table-column sortable prop="link" label="负责人"> </el-table-column><el-table-column sortable prop="phone" label="联系电话"></el-table-column><el-table-column:show-overflow-tooltip="true"sortableprop="intodate"label="进入时间"></el-table-column><el-table-columnsortable:show-overflow-tooltip="true"prop="address"label="联系地址"></el-table-column><el-table-column prop="isdel" sortable align="center" label="服务状态"><template slot-scope="scope"><el-switchdisabled@click.native.prevent="deleteUser(scope.$index, scope.row)"v-model="scope.row.isdel"active-color="#13ce66"inactive-color="#ff4949"></el-switch></template></el-table-column><el-table-column align="center" label="操作"><template slot-scope="scope"><el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button></template></el-table-column></el-table></div>
</template>
<script>
import VDistpicker from "v-distpicker";
import { addcity, updatecity, getcitys } from "../../api/api";
export default {components: { VDistpicker },data() {return {selectList: [],  // 选中需要导出的数据},methods: {//选中某条数据时handleSelectionChange(row){console.log(row);this.selectList = row;},//定义导出Excel表格事件exportExcel() {if (this.selectList.length === 0) {this.$message({message: '请至少选择一条需要导出的数据',type: 'warning'});return;}this.$msgbox.confirm('该操作将导出选中的数据，是否继续', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {//导出require.ensure([], () => {const { export_json_to_excel } = require('@/excel/Export2Excel');   //注意这个Export2Excel路径const tableHeader = ['地市', '邮编', '负责人', '联系电话', '进入时间','联系地址','服务状态'];   // 设置Excel表格的表头const filterVal = ['province', 'code', 'link', 'phone', 'intodate', 'address', 'isdel'];  // 跟表格表头对应的绑定的proplet list =this.filterTableData(JSON.parse(JSON.stringify(this.selectList)));   // this.selectList为选中的要导出的数据，用filterTableData方法先处理一下数据格式(要进行深度拷贝，以免过滤的时候，影响页面上展示的数据)，再存到listlet data = this.formatJson(filterVal, list);export_json_to_excel(tableHeader, data, 'sheetjs');    //最后一个是导出表格的名字})}).catch(() => { });},formatJson(filterVal, Data) {return Data.map(v => filterVal.map(j => v[j]))},//导出数据前对数据处理filterTableData(data) {data.forEach(item => {// 将地市拼接在一起item.country?item.province = item.province+'-'+item.city+'-'+item.area+'-'+item.country:item.province = item.province+'-'+item.city+'-'+item.areaitem.isdel?item.isdel='已开启':'已关闭'})return data;}},
};
</script>

5.使用中碰到的问题：
当按照上面步骤执行后，可能会报如下错误：
在这里插入图片描述

查询了网上各种资料和分析后（网上资料说这个的不多）分析应该是require 浏览器不能识别的原因，因为并不影响正常使用，虽然刷新页面和初始化都会报这个错误，但是只要导出都是正常的导出的数据也没有影响

长时间调试还是觉得报错很碍眼，方案一：下载兼容require的插件，并配置即可

方案二，直接改插件源码：（不是cnpm里的插件，而是下载下来的export2Excel.js）

在export2Excel.js内只要改动头部一行源码即可

	改之前：/* eslint-disable */require('script-loader!file-saver');//保存文件用require('script-loader!@/excel/Blob');//转二进制用// require('./Blob');//转二进制用require('script-loader!xlsx/dist/xlsx.core.min');//xlsx核心...改成：/* eslint-disable */require('script-loader!file-saver');//保存文件用// require('script-loader!@/excel/Blob');//转二进制用require('./Blob');//转二进制用require('script-loader!xlsx/dist/xlsx.core.min');//xlsx核心

问题解决，不再报错
在这里插入图片描述
6.
Blob.js

/*global self, unescape */
/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,plusplus: true */
(function(view) {"use strict";view.URL = view.URL || view.webkitURL;if (view.Blob && view.URL) {try {new Blob();return;} catch (e) {}}// Internally we use a BlobBuilder implementation to base Blob off of// in order to support older browsers that only have BlobBuildervar BlobBuilder =view.BlobBuilder ||view.WebKitBlobBuilder ||view.MozBlobBuilder ||(function(view) {var get_class = function(object) {return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];},FakeBlobBuilder = function BlobBuilder() {this.data = [];},FakeBlob = function Blob(data, type, encoding) {this.data = data;this.size = data.length;this.type = type;this.encoding = encoding;},FBB_proto = FakeBlobBuilder.prototype,FB_proto = FakeBlob.prototype,FileReaderSync = view.FileReaderSync,FileException = function(type) {this.code = this[(this.name = type)];},file_ex_codes = ("NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR " +"NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR").split(" "),file_ex_code = file_ex_codes.length,real_URL = view.URL || view.webkitURL || view,real_create_object_URL = real_URL.createObjectURL,real_revoke_object_URL = real_URL.revokeObjectURL,URL = real_URL,btoa = view.btoa,atob = view.atob,ArrayBuffer = view.ArrayBuffer,Uint8Array = view.Uint8Array;FakeBlob.fake = FB_proto.fake = true;while (file_ex_code--) {FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1;}if (!real_URL.createObjectURL) {URL = view.URL = {};}URL.createObjectURL = function(blob) {var type = blob.type,data_URI_header;if (type === null) {type = "application/octet-stream";}if (blob instanceof FakeBlob) {data_URI_header = "data:" + type;if (blob.encoding === "base64") {return data_URI_header + ";base64," + blob.data;} else if (blob.encoding === "URI") {return data_URI_header + "," + decodeURIComponent(blob.data);}if (btoa) {return data_URI_header + ";base64," + btoa(blob.data);} else {return data_URI_header + "," + encodeURIComponent(blob.data);}} else if (real_create_object_URL) {return real_create_object_URL.call(real_URL, blob);}};URL.revokeObjectURL = function(object_URL) {if (object_URL.substring(0, 5) !== "data:" && real_revoke_object_URL) {real_revoke_object_URL.call(real_URL, object_URL);}};FBB_proto.append = function(data /*, endings*/) {var bb = this.data;// decode data to a binary stringif (Uint8Array &&(data instanceof ArrayBuffer || data instanceof Uint8Array)) {var str = "",buf = new Uint8Array(data),i = 0,buf_len = buf.length;for (; i < buf_len; i++) {str += String.fromCharCode(buf[i]);}bb.push(str);} else if (get_class(data) === "Blob" || get_class(data) === "File") {if (FileReaderSync) {var fr = new FileReaderSync();bb.push(fr.readAsBinaryString(data));} else {// async FileReader won't work as BlobBuilder is syncthrow new FileException("NOT_READABLE_ERR");}} else if (data instanceof FakeBlob) {if (data.encoding === "base64" && atob) {bb.push(atob(data.data));} else if (data.encoding === "URI") {bb.push(decodeURIComponent(data.data));} else if (data.encoding === "raw") {bb.push(data.data);}} else {if (typeof data !== "string") {data += ""; // convert unsupported types to strings}// decode UTF-16 to binary stringbb.push(unescape(encodeURIComponent(data)));}};FBB_proto.getBlob = function(type) {if (!arguments.length) {type = null;}return new FakeBlob(this.data.join(""), type, "raw");};FBB_proto.toString = function() {return "[object BlobBuilder]";};FB_proto.slice = function(start, end, type) {var args = arguments.length;if (args < 3) {type = null;}return new FakeBlob(this.data.slice(start, args > 1 ? end : this.data.length),type,this.encoding);};FB_proto.toString = function() {return "[object Blob]";};FB_proto.close = function() {this.size = this.data.length = 0;};return FakeBlobBuilder;})(view);view.Blob = function Blob(blobParts, options) {var type = options ? options.type || "" : "";var builder = new BlobBuilder();if (blobParts) {for (var i = 0, len = blobParts.length; i < len; i++) {builder.append(blobParts[i]);}}return builder.getBlob(type);};
})((typeof self !== "undefined" && self) ||(typeof window !== "undefined" && window) ||this.content ||this
);

Export2Excel.js ： 在 Export2Excel.js 代码里面有引入 Blob，注意引入时的路径

//Export2Excel.js
require("script-loader!file-saver");
require("script-loader!./Blob"); //转二进制用  引入项目中的blob的实际路径
require("script-loader!xlsx/dist/xlsx.core.min");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);console.log("a");var oo = generateArray(theTable);var ranges = oo[1];/* original data */var data = oo[0];var ws_name = "SheetJS";console.log(data);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");
}function formatJson(jsonData) {console.log(jsonData);
}
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);/* 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 || "列表";saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}),title + ".xlsx");
}

这篇关于Vue+element-table组件将选中的数据导出为excel（导出的是当前页选中的数据）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/380810。

相关文章

部署Vue项目到服务器后404错误的原因及解决方案

部署Vue项目到服务器后404错误的原因及解决方案

《部署Vue项目到服务器后404错误的原因及解决方案》文章介绍了Vue项目部署步骤以及404错误的解决方案,部署步骤包括构建项目、上传文件、配置Web服务器、重启Nginx和访问域名,404错误通常是... 目录一、vue项目部署步骤二、404错误原因及解决方案错误场景原因分析解决方案一、Vue项目部署步骤
阅读更多...
前端原生js实现拖拽排课效果实例

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》：本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2
阅读更多...
Python创建Excel的4种方式小结

Python创建Excel的4种方式小结

《Python创建Excel的4种方式小结》这篇文章主要为大家详细介绍了Python中创建Excel的4种常见方式,文中的示例代码简洁易懂,具有一定的参考价值,感兴趣的小伙伴可以学习一下... 目录库的安装代码1——pandas代码2——openpyxl代码3——xlsxwriterwww.cppcns.c
阅读更多...
CSS弹性布局常用设置方式

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re
阅读更多...
Redis的数据过期策略和数据淘汰策略

Redis的数据过期策略和数据淘汰策略

《Redis的数据过期策略和数据淘汰策略》本文主要介绍了Redis的数据过期策略和数据淘汰策略,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录一、数据过期策略1、惰性删除2、定期删除二、数据淘汰策略1、数据淘汰策略概念2、8种数据淘汰策略
阅读更多...
轻松上手MYSQL之JSON函数实现高效数据查询与操作

轻松上手MYSQL之JSON函数实现高效数据查询与操作

《轻松上手MYSQL之JSON函数实现高效数据查询与操作》：本文主要介绍轻松上手MYSQL之JSON函数实现高效数据查询与操作的相关资料,MySQL提供了多个JSON函数,用于处理和查询JSON数... 目录一、jsON_EXTRACT 提取指定数据二、JSON_UNQUOTE 取消双引号三、JSON_KE
阅读更多...
CSS3中使用flex和grid实现等高元素布局的示例代码

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》：本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法，通过简单的两列实现、每行放置3列以及全部代码的展示，展示了这两种布局方式的实现细节和效果，详细内容请阅读本文，希望能对你有所帮助... 过往的实现方法是使用浮动加
阅读更多...
css渐变色背景|＜gradient示例详解

css渐变色背景|＜gradient示例详解

《css渐变色背景|＜gradient示例详解》CSS渐变是一种从一种颜色平滑过渡到另一种颜色的效果,可以作为元素的背景,它包括线性渐变、径向渐变和锥形渐变，本文介绍css渐变色背景|＜gradien... 使用渐变色作为背景可以直接将渐China编程变色用作元素的背景，可以看做是一种特殊的背景图片。（是作为背
阅读更多...
Python给Excel写入数据的四种方法小结

Python给Excel写入数据的四种方法小结

《Python给Excel写入数据的四种方法小结》本文主要介绍了Python给Excel写入数据的四种方法小结,包含openpyxl库、xlsxwriter库、pandas库和win32com库,具有... 目录1. 使用 openpyxl 库2. 使用 xlsxwriter 库3. 使用 pandas 库
阅读更多...
SpringBoot定制JSON响应数据的实现

SpringBoot定制JSON响应数据的实现

《SpringBoot定制JSON响应数据的实现》本文主要介绍了SpringBoot定制JSON响应数据的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们... 目录前言一、如何使用@jsonView这个注解？二、应用场景三、实战案例注解方式编程方式总结 前言
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2