html table 如何导出为excel表格案例分享

这篇具有很好参考价值的文章主要介绍了html table 如何导出为excel表格案例分享。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

1、先创建 html 的表格,并指定表格唯一ID:impTable​编辑

 2、定义导出表格的函数方法 toExcel()。


应用场景,页面就是普通的 html 。

例如要导出这个示例Table表格。

html table 如何导出为excel表格案例分享

 先来看看导出的表格如下:

html table 如何导出为excel表格案例分享

1、先创建 html 的表格,并指定表格唯一ID:impTable

 2、定义导出表格的函数方法 toExcel()。

1)页面添加一个动作按钮。

<div class="searchBt" onclick="toExcel()" style="float: right;margin: 10px 20px;">导出</div>

2) 具体的 JavaScript 代码如下:

function base64(content) {
		    	return window.btoa(unescape(encodeURIComponent(content)));
		    }
		    var format = function (s, c) {
		        return s.replace(/{(\w+)}/g,
		            function (m, p) {
		                return c[p];
		            });
		    }
            //导出html表格为 excel 文件
		    function toExcel() {
		    	var excelContent = $("#impTable").html();
		    	var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>";
		    	excelFile += "<head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head>";
		        excelFile += "<body><table width='50%'  border='1'>";
		        excelFile += excelContent;
		        excelFile += "</table></body>";
		        excelFile += "</html>";
                //定义excel 的sheet名称
		        var ctx = {worksheet: "授信审批表"};
		        var link = "data:application/vnd.ms-excel;base64," + base64(format(excelFile, ctx));
		        var a = document.createElement("a");
                //定义excel 的文件名称
		        var fileName ="授信审批表_"+$("#skrName").val();
		        a.download = fileName+".xls";
		        a.href = link;
		        a.click();
			}

是不是非常简单好用呢?而且他不需要额外的插件支持,导出的样式也还挺合适的。

对您有用的话,还请动动发财的小手帮小编一键三连吧!你的支持,是我不断输出的最大动力。文章来源地址https://www.toymoban.com/news/detail-444233.html

到了这里,关于html table 如何导出为excel表格案例分享的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 若依vue 多table前端HTML页面导出一张Excel表

    导入依赖,具体前端vue配置就不介绍了,直接晒具体细节代码 js代码 点个赞吧!

    2024年02月15日
    浏览(44)
  • 记录--Vue中如何导出excel表格

    注意,此插件对node有版本要求,安装失败检查一下报错是否由于node版本造成! 在template节点下使用download-excel标签即可 在data节点下定义数据 点击导出 如果需要在点击按钮前动态的获取数据,则需要使用fetch属性来指定一个参数。 注意,使用此参数时不能再绑定data参数 以导

    2024年02月05日
    浏览(30)
  • 如何使用Vue实现Excel表格数据的导入,在前端实现Excel表格文件的上传和解析,并使用Table组件将解析出来的数据展示在前端页面上

    随着互联网的发展和社会的进步,各个行业的数据量越来越大,对于数据的处理变得越来越重要。其中,Excel表格是一种重要的数据处理工具。在前后端项目中,实现Excel表格的导入和导出功能也愈加常见。这篇文章将介绍如何使用Vue实现Excel表格数据的导入。 在开始介绍实现

    2024年02月11日
    浏览(34)
  • 前端vue自定义table 表格 表格组件 Excel组件

    前端组件化开发与Excel组件设计 一、前端开发的复杂性与组件化的必要性 随着技术的发展,前端开发的复杂度越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。

    2024年02月09日
    浏览(39)
  • javascript 导出表格的excel

    一个php网站的表格,需要增加导出excel的功能, 因对web开发不甚了解,开始想着用php导出, 搜索一番发现比较复杂,而且我的表格里已经有数据了, 如果导出又要去库中获取一次,不是负担加倍, 可否把现有表格数据,直接导出来? 答案是肯定的,用js在前端导出 开源js组

    2024年02月16日
    浏览(26)
  • EasyPio导入导出excel表格

    EasyPoi是一个功能强大且易于使用的Java Excel操作框架,其主要特点如下: 简单易用:EasyPoi提供简洁而直观的API,使Java开发人员能够轻松地进行Excel导入导出操作,无需繁琐的代码和复杂的配置。 支持多种数据源:EasyPoi支持从数据库、List集合、Map等各种数据源快速生成Excel文

    2024年02月12日
    浏览(45)
  • axios请求、 Excel 表格导出

    注:基于axios 直接请求后端接口,导出Excel 表格

    2024年02月11日
    浏览(26)
  • HTML-table表格详解

    1. 说明 表格在日常生活中使用非常多,比如 excel 就是专门用来创建表格的工具, 表格就是由用来表示一些格式化的数据的,比如:额课程表,银行对账单 在网页中也可以创建出不同的表格。 2. 设置 在 HTML 中,使用 table 标签来创建一个表格 在 table 中使用 tr 来表示表格中的

    2024年02月06日
    浏览(22)
  • el-table实现纯前端导出(适用于el-table任意表格)

    2023.9.1今天我学习了如何使用el-table实现前端的导出功能,该方法的好处有无论你的el-table长什么样子,导出之后就是什么样子。 1.安装三个插件 npm install file-save npm install xlsx npm install xlsx-style 2.创建Export2Excel.js 3.按需引入 4.vue.config.js引入 效果: 扩展: 当我们会出现这样的表

    2024年02月10日
    浏览(38)
  • JS实现Excel导入以及table导出为Excel

    在开发项目的过程中遇到了一个需求,将excel文件导入并且解析渲染到页面上。用户可以对表格内的部分内容做修改后再上传到服务端。 导入Excel 1.使用html支持上传标签从本地获取文件,例如type为file的input,el-upload等 2.实例化FileReader,并且通过readAsBinaryString将文件读取为二

    2024年02月09日
    浏览(30)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包