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. 【sqlalchemy】

    https://www.cnblogs.com/ccorz/p/5711955.html

  2. 静态站点生成器-md-mkdocs

    推荐指数:

  3. 批处理&提权命令

    提权应用 批处理遍历webshell可访问目录 opendir.readdir.is_dir.is_writable这几个遍历文件夹的函数,在php限制的情况下,找可执行目录就没有优势了. @echo ...

  4. Okhttp3基本使用

    https://square.github.io/okhttp/ https://www.jianshu.com/p/da4a806e599b https://www.cnblogs.com/wzk- ...

  5. Ubuntu18.04 root 登录

    默认安装Ubuntu18.04都是不允许以root用户进行登录的,想要以root用户进行登录需要进行一些操作,主要是以下几个步骤:第一步:以普通用户登录系统,创建root用户的密码在终端输入命令:su ...

  6. nodejs ffi 调用dll

    安装依赖 npm install --global --production windows-build-tools(在管理员权限打开的命令行中执行) npm install -g node-gyp ...

  7. 2019ICPC南昌现场赛总结

    非常可惜的一场比赛,多了60分钟罚时与银牌无缘.今年6场ICPC网络赛里面打的最差的就是南昌站,冥冥之中自有天意吧,最后被安排去了南昌. 开场被队友叫去先看的L,说是足球,发现就是简单模拟,就直接上机 ...

  8. Linux下 sftp服务配置

    查看openssh的版本,使用ssh -V 命令来查看openssh的版本,版本必须大于4.8p1,低于的这个版本需要升级. 参考博客:https://yq.aliyun.com/articles/6 ...

  9. php-获取某个文件夹下面的文件数量

    /** * 获取文件夹下文件的数量 * @param $url 传入一个url如:/apps/web * @return int 返回文件数量 */ public function getFileNu ...

  10. shiro登录验证简单理解

    这两天接手了下师兄的项目,要给系统加个日志管理模块,其中需要记录登录功能的日志,那么首先要知道系统的登录是在哪里实现验证的. 该系统把所有登录验证还有权限控制的工作都交给了shiro. 这篇文章就先简 ...