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

exportData(tableid, name) {

        let table;

        let uri = 'data:application/vnd.ms-excel;base64,',

          template = '<html><head><meta charset="UTF-8"></head><body><table  border="1">{table}</table></body></html>',

          base64 = function (

            s) {

            return window.btoa(unescape(encodeURIComponent(s)))

          },

          format = function (s, c) {

            return s.replace(/{(\w+)}/g, function (m, p) {

              return c[p];

            })

          };

        table = document.getElementById(tableid)

        let ctx = {

          worksheet: name || 'Worksheet',

          table: table.innerHTML

        };

        window.location.href = uri + base64(format(template, ctx))

      },

2、导出有分页的数据

exportData2() {

      let table;//把所有要导出的数据全部封装成tbody内的数据，然后导出

      let uri = "data:application/vnd.ms-excel;base64,",

        template =

          '<html><head><meta charset="UTF-8"></head><body><table  border="1">{table}</table></body></html>',

        base64 = function(s) {

          return window.btoa(unescape(encodeURIComponent(s)));

        },

        format = function(s, c) {

          return s.replace(/{(\w+)}/g, function(m, p) {

            return c[p];

          });

        };

      let ctx = {

        worksheet:"导出",

        table: table

      };

      window.location.href = uri + base64(format(template, ctx));

    },

当前导出的话，我目前在我司的项目上应用，导出超过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. Ubuntu18.04 instsall XMind_8 and crack

    1.dowload XMind_8 linux install zip wget https://www.xmind.cn/xmind/downloads/xmind-8-update8-linux. ...

  2. 0010.Regular Expression Matching(H)

    jjc . Regular Expression Matching(hard) Given an input string (s) and a pattern (p), implement regul ...

  3. cordon、drain、delete node区别

    cordon.drain.delete node区别 主要目的:导致node处于不可调度状态,新创建的pod容器不会调度在node上. cordon将node置为SchedulingDisabled不 ...

  4. RocketMQ控制台命令

    本文未完成,有空再补充,不小心发布了,抱歉 Rocket版本:4.3.0 这几天在整RocketMQ,可谓是困难重重,其中关于控制台的命令,网上的都是一半一半的, 所以我打算直接用整一个完整的官方的命 ...

  5. Intellij热部署插件JRebel的详细配置及图解

    参考博客地址:https://blog.csdn.net/nyotengu/article/details/80629631 参考博客地址:https://blog.csdn.net/weixin_4 ...

  6. CSS 常用效果--持续更新

    单行超出省略: white-space: nowrap; text-overflow:ellipsis; overflow:hidden; 多行超出省略: text-overflow: -o-elli ...

  7. 常见的序列化框架及Protobuf序列化原理

    原文链接:https://www.jianshu.com/p/657fbf347934 https://www.cnblogs.com/javazhiyin/p/11375553.html https ...

  8. qt qml 类型之Keys

    Keys 类是 Qt Quick 提供的,专门供 Item 处理按键事件的类.它定义了很多针对特定按键的信号,比如 onReturnPressed / onEscapePressed / onDown ...

  9. Machine Learning Glossary

    http://people.seas.harvard.edu/~mgelbart/glossary.html more at:http://www.metacademy.org/list

  10. Http 请求到后端过程

    描述下网页一个 Http 请求,到后端的整个请求过程 评注:基础题,感觉属于常识题!必会! 回答: 利用DNS进行域名解析 -------> 发起TCP的3次握手 --------> 建立 ...