1、导出当前页面，这是最简单的，只是导出当前页面的数据。

  1. exportData(tableid, name) {
  2.         let table;
  3.         let uri = 'data:application/vnd.ms-excel;base64,',
  4.           template = '<html><head><meta charset="UTF-8"></head><body><table  border="1">{table}</table></body></html>',
  5.           base64 = function (
  6.             s) {
  7.             return window.btoa(unescape(encodeURIComponent(s)))
  8.           },
  9.           format = function (s, c) {
  10.             return s.replace(/{(\w+)}/g, function (m, p) {
  11.               return c[p];
  12.             })
  13.           };
  14.  
  15.         table = document.getElementById(tableid)
  16.         let ctx = {
  17.           worksheet: name || 'Worksheet',
  18.           table: table.innerHTML
  19.         };
  20.         window.location.href = uri + base64(format(template, ctx))
  21.       },

2、导出有分页的数据

  1. exportData2() {
  2.       let table;//把所有要导出的数据全部封装成tbody内的数据，然后导出
  3.       let uri = "data:application/vnd.ms-excel;base64,",
  4.         template =
  5.           '<html><head><meta charset="UTF-8"></head><body><table  border="1">{table}</table></body></html>',
  6.         base64 = function(s) {
  7.           return window.btoa(unescape(encodeURIComponent(s)));
  8.         },
  9.         format = function(s, c) {
  10.           return s.replace(/{(\w+)}/g, function(m, p) {
  11.             return c[p];
  12.           });
  13.         };
  14.       let ctx = {
  15.         worksheet:"导出",
  16.         table: table
  17.       };
  18.       window.location.href = uri + base64(format(template, ctx));
  19.     },

当前导出的话，我目前在我司的项目上应用，导出超过700条，数据就会在base64处转化失败，建议导出如果超过700条时，可以进行二次封装，每次只是500条，可以存两个变量，一个是{table}，一个是base64转化后的数据，然后组合起来，直至数据获取完毕，然后再导出

前端自己导出Excel的更多相关文章

  1. # vue 如何通过前端来导出excel表格

    在做一些简单的demo时,偶尔会遇到导出excel表格.如果请后端帮忙的话 比较浪费时间,那么前端如何导出excel表格,下面就来记录一下之前使用到的案例 一.安装依赖 npm i file-save ...

  2. 前端 json 导出 excel

    参考:https://blog.csdn.net/abel_yang/article/details/78684786 在github上有大神提供现成的插件,非常感谢 https://cuikangj ...

  3. 前端实现导出excel

    结果: 将网页上拿到的数据导出成excel文件 实现: HTML代码 <div> <button type="button" onclick="expo ...

  4. js 前端 table 导出 excel

    园子,github,stackoverflow 关于前端下载的文章不少 园子里大部分都是 利用ActiveXObject对象来实现,可他有个缺点安全等级,还有必须安装excel…… github,st ...

  5. vue项目，前端导出excel

    今天研究一下前端如何导出excel,边查边实践,边记录 1.安装依赖库 xlsx:这是一个功能强大的excel处理库,但是上手难度也很大,还涉及不少二进制的东西 file-saver:ES5新增了相关 ...

  6. 如何使用JavaScript实现前端导入和导出excel文件

    一.SpreadJS 简介 SpreadJS 是一款基于 HTML5 的纯 JavaScript 电子表格和网格功能控件,以“高速低耗.纯前端.零依赖”为产品特色,可嵌入任何操作系统,同时满足 .NE ...

  7. Atitit.导出excel功能的设计 与解决方案

    Atitit.导出excel功能的设计 与解决方案 1.1. 项目起源于背景1 1.2. Js  jquery方案(推荐)jquery.table2excel1 1.3. 服务器方案2 1.4. 详细 ...

  8. 前端导出Excel兼容写法

    今天整理出在Web前端导出Excel的写法,写了一个工具类,对各个浏览器进行了兼容. 首先,导出的数据来源可能有两种: 1. 页面的HTML内容(一般是table) 2. 纯数据 PS:不同的数据源, ...

  9. 前端导出excel数据-jsonToExcel

    咳咳,好久没有写博了... 在工作中遇到了纯前端,将数据导出为excel文件.正文开始: 第一步 安装依赖: npm i xlsx 第二步 写导出函数: import XLSX from 'xlsx' ...

随机推荐

  1. online学习和offline学习

    参考:https://blog.csdn.net/a133521741/article/details/79221015 解释: (1)offline学习:每次训练完一个batch后再更新参数: (2 ...

  2. 【DeepCTR】

    DeepFM: https://www.jianshu.com/p/6f1c2643d31b CCPM,FGCNN: https://cloud.tencent.com/developer/artic ...

  3. DevExpress v18.1 下载和教程文档

    http://www.zdfans.com/html/18682.html 教程文档 https://blog.csdn.net/AABBbaby/article/details/81094482 下 ...

  4. Nginx - upstream sent invalid chunked response while reading upstream 异常问题

    一个 post 的请求,直接调接口服务数据正常返回,但是通过 nginx 代理后, 什么都没有返回. nginx 配置如下: 使用 postman 调用,返回如下: 于是检查日志报错信息,如下: ng ...

  5. Python第一阶段06

    1.面向对象编程: class Dog: def __init__(self, name): self.name = name def bulk(self): print("%s 汪汪汪.. ...

  6. JS和vue文本框输入改变p标签的内容测试

    文本框输入,p标签的内容自动变成文本框的内容,如下是三种方法的测试: 方法1:JS里的onchange,当文本框内容改变事件,该事件里写的方法是,获取p标签本身,然后获取文本框的值,赋值给变量,最后给 ...

  7. axios发post请求，后端接收不到参数的问题

    axios会帮我们自动转换请求数据和响应数据 以及 自动转换JSON数据,我们的请求头转换成 Content-Type变成了application/json;charset=utf-8,然后因为我们的 ...

  8. 爬虫存储介质之MongoDB存储

    常用数据库 mongoDB4.0: 下载:https://www.mongodb.com/ windows安装.Linux安装见: https://www.runoob.com/mongodb/mon ...

  9. mac tar 解压

    1.下载mac上对应rar版本 http://www.rarlab.com/download.htm2.利用tar名解压下载的rarosx-5.4.0.tar.gz,版本可能会更新tar xzvf a ...

  10. STM32之SPI时钟相位选择

    SPI的时钟模式分为四种,由SPI_CR1寄存器的两位CPOL,CPHA组合选择. CPOL 如果为1,则时钟的空闲电平为高电平:CPOL 如果为0,则时钟的空闲电平为低电平.空闲电平影响不大. CP ...