1. 在前端HTML上绘制想要导出的表格（包含后端获取的数据）

<div class="exportExcel" id="exportOutTable" style="display:none">
        <table></table>
</div>
2. 导出
let excelHtml: any = document.getElementById("exportOutTable")?.outerHTML;
  let html =
    "<html><head><meta charset='utf-8' /></head><body>" +
    excelHtml +
    "</body></html>";
  let blob = new Blob([html], { type: "application/vnd.msexcel" });
  if ((window.navigator as any).msSaveOrOpenBlob) {
    (window.navigator as any).msSaveOrOpenBlob(blob, "表格名称.xls");
  } else {
    let a = document.createElement("a");
    let url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = "表格名称.xls";
    a.style.display = "none";
    document.body.appendChild(a);
    a.click();
    a.remove();
    window.URL.revokeObjectURL(url);
  }

通过前端导出excel表格的更多相关文章

  1. vue 纯前端导出 excel 表格

    在开发后台管理系统的时候,很多地方都要用到导出excel 表格,比如将table中的数据导出到本地,那么实现这种需求往往有两种方案: 一.后端开发一个下载链接,前端将这个链接放到 a 标签的 href ...

  2. 前端导出excel表格

    前言近期项目有个新需求--将折线图表的数据加一个下载成excel表格的功能.以前下载功能都是调后台接口的,但是这个迭代,后台压力比较重,部分就交给了前端自己实现,下面就记录一下前端如何实现excel表 ...

  3. js前端导出Excel表格后数字自动变成科学计数法问题

    一般的文件导出都是后端进行导出,最近一个项目遇到导出接口挂掉了,前端实现导出的情况. 背景是vue框架,iView组件.可以直接使用exportCsv方法进行导出. 导出时进行一下行和列的切割就可以了 ...

  4. vue实现前端导出excel表格

    1.在src目录下创建一个文件(vendor)进入Blob.js和Export2Excel.js 2.npm install -S file-saver 用来生成文件的web应用程序 3.npm in ...

  5. 纯前端导出Excel表格

    <html> <head> <p style="font-size: 20px;color: red;">使用a标签方式将json导出csv文件 ...

  6. 原生JavaScript 导出excel表格（兼容ie和其他主流浏览器）

    因同事的需求是想前端导出excel表格,网上找了一些demo,自己修改了一下,可能以后会用到,记录下来吧,兼容ie和一些主流浏览器,ie可能会报错,原因参考 这里,edge 浏览器还没有办法导出,正在 ...

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

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

  8. 前端导出Excel兼容写法

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

  9. 在vue中导出excel表格

    初学者学习vue开发,想把前端项目中导出Excel表格,查了众多帖子,踩了很多坑,拿出来与大家分享一下经验. 安装依赖 //npm npm install file-saver -S npm inst ...

  10. Vue中导出Excel表格方法

    本文记录一下在Vue中实现导出Excel表格的做法.参考度娘上各篇博客,最后实现功能 Excel表格,我的后端返回的是数据流,然后文件名是放进了content-disposition中,前端进行获取. ...

随机推荐

  1. 使用myBadboy(python自主开发工具)启动谷歌浏览器并自动录制jmeter脚本

    一.源代码下载 https://gitee.com/rmtic/mybadboy 说明:因现有的录制方法有不能定制等不足之处,所以自力更生,自动生成对应jmeter脚本,减少维护成本 二.操作说明 1 ...

  2. Oracle View的 With Check OPTION 參數有什麼用途？

    1. 當通過View Insert數據到定義此View的SQL中的基本表的時候,insert的資料要符合SQL中here條件,否則Insert View 的操作無法成功: 2. 注意:WITH REA ...

  3. Ubuntu20.04 无网络标识，网卡显示network为UNCLAIMED。附回退内核方法

    ubuntu自动装完驱动后发现没有网络标识了,打开设置发现Network里边只有VPN,没有网卡的信息. 输入以下代码查看网络信息: sudo lshw -C network 发现输出"*- ...

  4. GuzzleHttp示例

    一般请求 $httpClient = new Client([ 'timeout' => 5 ]); $request = $httpClient->post("http://l ...

  5. 【小记】golang_map

    map 前言:map 几个操作实现有点复杂,即便之前看懂了没过多久也就忘了,这里简单做下记录.为了便于记忆,将 mapassign 的全过程以流程图的方式展示,其他省略 mapassign 在流程图中 ...

  6. C# goto 语法

    test: Console.WriteLine("yest"); goto test;

  7. unity meta pass

    简单说就是在meta pass计算 albedo,emission,specular 3个值 光照烘焙,gi计算间接光照时都会用到这些值 Shader "MyShader/SampleLig ...

  8. k8s资源清单

    资源清单就是k8s当中用来定义pod的文件,语法格式遵循yaml语法,在yaml当中可以定义控制器类型,元数据,容器端口号等等等....,也可以针对于清单对pod进行删除等操作. 我们可以用kubec ...

  9. zTree异步获取，默认展开一级节点

    zTree官网 https://treejs.cn/v3/api.php 涉及到zTree的异步获取 这里主要是在setting部分的设置: setting: { ..., async: {enabl ...

  10. 【SQL Server】列名首字母大写

    使用UPPER 和 LOWWER函数组合首字母大写.例如: 1 SELECT user_id,(UPPER(LEFT(name,1) ) + RIGHT(name , LEN(name) -1) )A ...