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。

相关文章

鸿蒙中Axios数据请求的封装和配置方法

鸿蒙中Axios数据请求的封装和配置方法

《鸿蒙中Axios数据请求的封装和配置方法》：本文主要介绍鸿蒙中Axios数据请求的封装和配置方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1.配置权限 应用级权限和系统级权限2.配置网络请求的代码3.下载在Entry中 下载AxIOS4.封装Htt
阅读更多...
Vue3使用router,params传参为空问题

Vue3使用router,params传参为空问题

《Vue3使用router,params传参为空问题》：本文主要介绍Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录vue3使用China编程router,params传参为空1.使用query方式传参2.使用 Histo
阅读更多...
CSS Padding 和 Margin 区别全解析

CSS Padding 和 Margin 区别全解析

《CSSPadding和Margin区别全解析》CSS中的padding和margin是两个非常基础且重要的属性，它们用于控制元素周围的空白区域，本文将详细介绍padding和... 目录css Padding 和 Margin 全解析1. Padding: 内边距2. Margin: 外边距3. Padd
阅读更多...
CSS will-change 属性示例详解

CSS will-change 属性示例详解

《CSSwill-change属性示例详解》will-change是一个CSS属性，用于告诉浏览器某个元素在未来可能会发生哪些变化，本文给大家介绍CSSwill-change属性详解，感... will-change 是一个 css 属性，用于告诉浏览器某个元素在未来可能会发生哪些变化。这可以帮助浏览器优化
阅读更多...
CSS去除a标签的下划线的几种方法

CSS去除a标签的下划线的几种方法

《CSS去除a标签的下划线的几种方法》本文给大家分享在CSS中，去除a标签（超链接）的下划线的几种方法，本文给大家介绍的非常详细，感兴趣的朋友一起看看吧... 在 css 中，去除a标签（超链接）的下划线主要有以下几种方法：使用text-decoration属性通用选择器设置：使用a标签选择器，将tex
阅读更多...
前端高级CSS用法示例详解

前端高级CSS用法示例详解

《前端高级CSS用法示例详解》在前端开发中，CSS（层叠样式表）不仅是用来控制网页的外观和布局，更是实现复杂交互和动态效果的关键技术之一,随着前端技术的不断发展，CSS的用法也日益丰富和高级,本文将深... 前端高级css用法在前端开发中，CSS（层叠样式表）不仅是用来控制网页的外观和布局，更是实现复杂交
阅读更多...
Python将博客内容html导出为Markdown格式

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞？二、准备如何搞？三、说搞咱就搞！抓取文章提取内容构建html转存markdown
阅读更多...
Python获取中国节假日数据记录入JSON文件

Python获取中国节假日数据记录入JSON文件

《Python获取中国节假日数据记录入JSON文件》项目系统内置的日历应用为了提升用户体验,特别设置了在调休日期显示“休”的UI图标功能,那么问题是这些调休数据从哪里来呢？我尝试一种更为智能的方法：P... 目录节假日数据获取存入jsON文件节假日数据读取封装完整代码项目系统内置的日历应用为了提升用户体验，
阅读更多...
在React中引入Tailwind CSS的完整指南

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目
阅读更多...
vue使用docxtemplater导出word

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2