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. Docker学习笔记-03 容器数据卷

    1.宿主 vs容器直接映射数据容器卷 docker run -it  --privileged=true  -v  /宿主机绝对路径目录 :/ 容器内目录   镜像名 eg:  docker run  ...

  2. （K8s学习笔记三）创建Namespace

    Namespace(命名空间)很多情况下用于实现多租户的资源隔离.Namespace通过将集群内部的资源对象"分配"到不同的Namespace中,形成逻辑上分为不同项目.小组或用户 ...

  3. 【翻译】了解Flink-概览 -- Learn Flink-Overview

    了解Flink: 上手手册 目录 手册目标和范围 流处理 并行数据流 及时的流处理 有状态流处理 通过状态快照进行容错 翻译来源 Learn Flink:Overview , Learn Flink: ...

  4. apk反编译工具--dex2jar

    dex2jar 2.1 https://github.com/pxb1988/dex2jar/releases 链接: https://pan.baidu.com/s/1ZU16mPE_QNhzWxF ...

  5. Day 22 22.1.1：增量式爬虫 - 场景1的实现

    场景1的实现: 数据指纹: 数据的唯一标识.记录表中可以不直接存储数据本身,直接存储数据指纹更好一些. 创建爬虫爬虫文件: cd project_name(进入项目目录) scrapy genspid ...

  6. vue _DAY1

    一.VUE概念? Vue.js  (打包工具Webpack) Vue.js 是最流行的前端框架(可以用于手机App开发,借助Weex) Vue.js 和 Angeular.React.js(React ...

  7. 2019-2020-1 20199318《Linux内核原理与分析》第九周作业

    第8章 进程的切换和系统的一般执行过程 一.学习总结 Linux系统的一般执行过程: 最一般的情况:正在运行的用户态进程X切换到运行用户态进程Y的过程. (1)正在运行的用户态进程X; (2)发生中断 ...

  8. FMC145-四路16位125Msps AD FMC子卡模块 模拟信号 中频信号采集 信号发出

    FMC145-四路16位125Msps AD FMC子卡模块 一.概述 该板卡可实现4路16bit 125Msps AD 功能,是xilinx开发板设计的标准板卡.FMC连接器是一种高速多pin的互连 ...

  9. code的用法

    今天写程序的时候用了const,想到之前遇到的code的用法,那是第一次遇到code的那样的用法,查了一下,解释如下: 在单片机使用C语言进行编程的时候,经常使用到code.code是keil C51 ...

  10. PIL画图只有黑白色

    背景 项目上需要对人工标注的图片上的框进行校对,验证有无漏框.错框等问题.尝试使用opencv把框信息画出来,但是中文无法写到图片上,么得办法,只能转战PIL.但是用PIL之后出现部分图画出来的框写出 ...