vue中前端导出excel的两种方法

vue中前端导出excel方法

其实前端导出和后端导出的处理方式很类似 我们这样主要是根据后端接口返回的不分页的列表来进行整体导出功能的实现

依赖文件 可以直接cv到项目中

utils下的 Export2Excel.js文件

require('script-loader!file-saver');
require('script-loader!xlsx/dist/xlsx.core.min');
const {blob} = require('./Blob')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")
}

同级别的Blob.js文件 也可以直接cv到项目中都是依赖文件

const blob = 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) {varget_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) {vartype = 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)) {varstr = "", 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);};
}
exports.blob = blob;

然后自己创建个方法这里是老项目直接挂载到了vue原型链上

    // 前端导出// 数据 表头 接口字段 文件名称Vue.prototype.getExcel = function (res, head, file, fileName = "表单数据") {require.ensure([], () => {const {export_json_to_excel} = require('./utils/Export2Excel.js')const tHeader = headconst filterVal = fileconst list = resconst data = list.map(v => filterVal.map(j => v[j]))export_json_to_excel(tHeader, data, fileName)})};

在页面中如何使用

    //导出async function exportEvent() {//element loading组件封装startLoading();let head, file, fileName;//这个为表头 基本和你展示的列表一摸一样head = ['市场属性', '市场名称', '全部订单', '全部退款', '部分退款', '合计退款订单', '退款率'];//这个为列表对应的后端字段数据file = ['market_type', 'market_name', 'pay_num', 'refund_all_num', 'refund_part_num', 'refund_num', 'refund_rate'];//这个为下载的列表名称fileName = '退款分析导出列表';//接口搜索参数(可有可无) 我这里需要const params = {...search.value,need_page: 0,start_date: search.value.date ? search.value.date[0] : '',end_date: search.value.date ? search.value.date[1] : '',};delete params.date;let data;try {const { data: resData } = await getList(params);data = resData;} catch (error) {throw new Error('导出失败');} finally {// 调用vue原型链上的getExcel方法 // vue3 直接可以引入function进传参调用proxy.getExcel(data.data.data, head, file, fileName);Message.success('导出成功');//element loading组件结束endLoading();}}

第二种方法导出excel的方法 使用插件 file-saver 和 xlsx

我们需要先下载一个 xlsx 和 file-saver

npm install --save xlsx file-saver

然后我们还是在uitls文件下创建一个 exportTbale.js 文件

//引入插件
import FileSaver from 'file-saver'
import * as XLSX from 'xlsx'
//写入方法
export const exportExcel2 = async (id, name) => {// 这里的outTable是需要导出的表格,选择对应idlet vb = XLSX.utils.table_to_book(document.getElementById(id));let vbout = XLSX.write(vb, { bookType: 'xlsx', bookSST: true, type: 'array' });try {FileSaver.saveAs(new Blob([vbout], { type: 'application/octet-stream' }), name + '.xlsx');} catch (e) {if (typeof console !== 'undefined') console.log(e, vbout);}return vbout;
}

组件中使用


<el-table:data="tableData"class="table"id="outTable" 
><el-table-column prop="source" label="平台" align="center"><template slot-scope="scope"><span>****</span></template></el-table-column>
</el-table>

import { exportExcel2 } from "@/utils/exportTbale";// 导出
exportExcelTable () {setTimeout(() => {//这里的前提是不分页的情况下 如果有单独不分页的接口 需要重新给 tableData 赋值然后再进行调用exportExcel2// ps: tableData.value = res.data.data - (这里为不分页的接口数据)//不然会导致只有前面10条的数据//这里的第一个参数为el-table的id 第二个为excel的名称exportExcel2('outTable', '**表')}, 500)
},

希望此文章能帮助到您,一键三连 谢谢支持

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/118763.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

crossover23.6闪亮登场发布啦，2023最新功能解析

crossover23.6闪亮登场发布啦，2023最新功能解析

CrossOver刚刚更新了23.6版本&#xff0c;新增了多款游戏的支持&#xff0c;快来看看你想玩的游戏在不在里面吧。点击这里立即下载最新版CrossOver。 软件介绍 CrossOver 23.6 让Mac可以运行Windows程序的工具 已通过小编安装运行测试 100%可以使用。 CrossOver for Mac 23.…
阅读更多...
OKLink携手CertiK在港举办Web3生态安全主题论坛

OKLink携手CertiK在港举办Web3生态安全主题论坛

2023年10月23日&#xff0c;OKLink与CertiK共同发起的Web3生态安全主题论坛在香港铜锣湾拉开帷幕。本次论坛由OKLink和CertiK主办&#xff0c;香港投资推广署独家支持&#xff0c;聚焦如何构建安全可靠的Web3生态系统议题&#xff0c;同时深入剖析这一进程中所面临的潜在挑战。…
阅读更多...
企事业单位/公司电脑文件透明加密保护 | 防泄密软件\系统！

企事业单位/公司电脑文件透明加密保护 | 防泄密软件\系统！

推荐——「天锐绿盾电脑文件防泄密系统」 一款全面的企业/公司数据透明加密防泄密系统&#xff0c;旨在从源头上保障数据的安全和使用安全。 PC访问地址&#xff1a; https://isite.baidu.com/site/wjz012xr/2eae091d-1b97-4276-90bc-6757c5dfedee 它具有以下特点&#xff1a…
阅读更多...
第6周 .NET

第6周 .NET

好嘛&#xff01;本来以为上周SQL Server环境配置等已经够恶心了&#xff0c;没想到这周又得去搞所谓的Microsoft Visual Studio 2005了。 首先非常离谱的是&#xff0c;这个Microsoft Visual Studio 2005如果就是指Visual Studio 2005&#xff0c;那么已经是8年前的老的不行的…
阅读更多...
TensorFlow图像多标签分类实例

TensorFlow图像多标签分类实例

接下来&#xff0c;我们将从零开始讲解一个基于TensorFlow的图像多标签分类实例&#xff0c;这里以图片验证码为例进行讲解。 在我们访问某个网站的时候&#xff0c;经常会遇到图片验证码。图片验证码的主要目的是区分爬虫程序和人类&#xff0c;并将爬虫程序阻挡在外。 下面…
阅读更多...
Python超入门（6）__迅速上手操作掌握Python

Python超入门（6）__迅速上手操作掌握Python

# 26.函数和参数 # 注意&#xff1a;有参函数和无参函数的名字要不同 def user(): # 无参函数print("hello world!")def user1(my_id): # 有参函数print(my_id)def user2(first_name, last_name): # 有参函数print(fMy name is {first_name} {last_name})print(&…
阅读更多...
【机器学习】迁移学习（Transfer）详解！

【机器学习】迁移学习（Transfer）详解！

1. 什么是迁移学习 迁移学习(Transfer Learning)是一种机器学习方法&#xff0c;就是把为任务 A 开发的模型作为初始点&#xff0c;重新使用在为任务 B 开发模型的过程中。迁移学习是通过从已学习的相关任务中转移知识来改进学习的新任务&#xff0c;虽然大多数机器学习算法都是…
阅读更多...
微信小程序云开发笔记-初始化商城小程序

微信小程序云开发笔记-初始化商城小程序

缘起&#xff1a;由于痴迷机器人&#xff0c;店都快倒闭了&#xff0c;没办法&#xff0c;拿出点精力搞一下店里的小程序&#xff0c;要多卖货才能活下来搞机器人&#xff0c;在此记录一下搞小程序的过程&#xff0c;要不然搞完又忘了。腾讯的云开发&#xff0c;前端和后端都有…
阅读更多...
改变光标形状的多种方式

改变光标形状的多种方式

一&#xff0c;用css的方式进行添加属性&#xff1a; #div{cursor:pointer; } 二&#xff0c;使用js的方式改变光标的状态&#xff1a; 1 // 使用在元素的标签上的事件 2 // 第一种方式 3 onmouseover"this.style.cursormouseHand" 4 5 // 第二种方式 6 onmouseo…
阅读更多...
Linux阻塞IO（高级字符设备二）

Linux阻塞IO（高级字符设备二）

阻塞IO属于同步 IO&#xff0c;阻塞IO在Linux内核中是非常常用的 IO 模型&#xff0c;所依赖的机制是等待队列。 一、等待队列介绍 在 Linux 驱动程序中&#xff0c;阻塞进程可以使用等待队列来实现。等待队列是内核实现阻塞和唤醒的内核机制&#xff0c;以双循环链表为基础结…
阅读更多...
C笔记：引用调用，通过指针传递

C笔记：引用调用，通过指针传递

代码 #include<stdio.h> int max1(int num1,int num2) {if(num1 < num2){num1 num2;}else{num2 num1;} } int max2(int *num1,int *num2) {if(num1 < num2){*num1 *num2; // 把 num2 赋值给 num1 }else{*num2 *num1;} } int main() {int num1 0,num2 -2;int…
阅读更多...
SLAM从入门到精通（三边测量法详解）

SLAM从入门到精通（三边测量法详解）

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 三边测量&#xff0c;或者说叫三角定位&#xff0c;是定位系统中很常见的一种测量方法。它最主要的原理就是依靠已有的三个特征坐标和半径&#xf…
阅读更多...
Windows10系统安装telnet命令

Windows10系统安装telnet命令

简介 telnet命令可以测试目标服务器端口是否开通&#xff0c;使用命令 telnet ip地址 端口&#xff0c;输入命令后回车&#xff0c;如果进入输入状态&#xff0c;则表示目标服务器端口已开通&#xff0c;可以通过外网访问 Windows10系统安装步骤 1.打开控制面板 2.选择程序…
阅读更多...
Hadoop3教程（三十一）：（生产调优篇）异构存储

Hadoop3教程（三十一）：（生产调优篇）异构存储

文章目录 &#xff08;157&#xff09;异构存储概述概述异构存储的shell操作 &#xff08;158&#xff09;异构存储案例实操参考文献 &#xff08;157&#xff09;异构存储概述 概述 异构存储&#xff0c;也叫做冷热数据分离。其中&#xff0c;经常使用的数据被叫做是热数据&…
阅读更多...
Python Opencv实践 - 车辆统计（2）检测线绘制，车辆数量计数和显示

Python Opencv实践 - 车辆统计（2）检测线绘制，车辆数量计数和显示

针对我所使用的视频&#xff0c;对上一节的代码进行了修改&#xff0c;增加了更多参数。 Python Opencv实践 - 车辆统计&#xff08;1&#xff09;读取视频&#xff0c;移除背景&#xff0c;做预处理_亦枫Leonlew的博客-CSDN博客示例中的图像的腐蚀、膨胀和闭运算等需要根据具…
阅读更多...
操作系统-浅谈CPU与内存

操作系统-浅谈CPU与内存

目录 计算机的基本组成CPU内存虚拟内存内存分段内存分页 CPU与内存的交互过程高速缓存cache 所有图片均来自&#xff1a;小林coding 计算机的基本组成 计算机由软件和硬件组成 硬件由CPU(中央处理器&#xff09;存储器(内存外存&#xff09;外部设备组成。 软件由应用软件和系…
阅读更多...
【算法】模拟退火算法（SAA,Simulated Annealing Algorithm）

【算法】模拟退火算法（SAA,Simulated Annealing Algorithm）

模拟退火算法&#xff08;SAA&#xff09;简介 模拟退火算法&#xff08;SAA&#xff0c;Simulated Annealing Algorithm&#xff09;的灵感来源于工艺铸造流程中的退火处理&#xff0c;随着铸造温度升高&#xff0c;分子运动趋于无序&#xff0c;徐徐冷却后&#xff0c;分子运…
阅读更多...
ES6初步了解Symbol的用法

ES6初步了解Symbol的用法

ES6中为我们新增了一个原始数据类型Symbol&#xff0c;让我为大家介绍一下吧&#xff01; Symbol它表示是独一无二的值 Symbol要如何创建 第一种创建方式&#xff1a; let sy Symbol()第二种创建方式&#xff1a; let sy Symbol.for()具体独一无二在哪呢&#xff1f;它们的地…
阅读更多...
几道面试题记录20231023

几道面试题记录20231023

1, JVM优化 -Xms-Xmx -Xmn -Xss -XX:PermSize -XX:MaxPermSize -NewRatio -SuvriorRatio 收集器配置&#xff1a; 一般&#xff1a;串行收集 Serial 吞吐优先&#xff1a;并行收集Pramllel 响应优先&#xff1a;并发收集Conc 2,支付掉单如何解决&#xff1f; 因为网络等原…
阅读更多...
Docker安装MariaDB

Docker安装MariaDB

Docker安装MariaDB 1 docker search mariadb 搜索mariadb镜像&#xff08;非必须&#xff09; 2 docker pull mariadb 下载docker镜像 3 docker images 查看本地已有的所有镜像 4 mkdir -p /data/mariadb/data 建一个目录作为和容器的映射目录 5 docker run --name mariadb…
阅读更多...
最新文章

Copyright @ 2022~2023