前端技巧——HTML转Excel，并实现打印，下载功能

最新推荐文章于 2024-05-16 18:15:52 发布
最新推荐文章于 2024-05-16 18:15:52 发布
阅读量1.8w 收藏 24
点赞数 8
分类专栏： HTML Excel 下载 打印 前端技巧 前端 文章标签： HTML Excel 下载 打印 前端技巧
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/quyunde/article/details/80654687
版权
前端 同时被 3 个专栏收录
9 篇文章 0 订阅
订阅专栏
前端技巧
4 篇文章 0 订阅
订阅专栏
Excel
1 篇文章 0 订阅
订阅专栏 
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		
	</head>

	<body link="blue" vlink="purple">
		<table id="print-content" border="1" cellpadding="0" cellspacing="0" style='border-collapse:collapse;table-layout:fixed;'>
			<colgroup>
				<col width="80 ">
				<col width="80 ">
				<col width="150 ">
				<col width="80 ">
				<col width="150 ">
				<col width="80 ">
				<col width="80 ">
			</colgroup>
			<tr height="20" style="text-align: center;font-size:18px">
				<td colspan="7">会签单</td>
			</tr>
			<tr height="20" style="text-align: center;font-size:14px">
				<td></td>
				<td colspan="2">流转</td>
				<td></td>
				<td colspan="3">会议</td>
			</tr>
			<tr height="20" style="text-align: center;font-size:14px">
				<td>名称</td>
				<td colspan="2">自动获取</td>
				<td>编号</td>
				<td colspan="3">自动获取</td>
			</tr>
			<tr height="20" style="text-align: center;font-size:14px">
				<td>主持</td>
				<td colspan="2">自动获取</td>
				<td>类型</td>
				<td colspan="3">自动获取</td>
			</tr>
			<tr height="20" style="text-align: center;font-size:14px">
				<td>人</td>
				<td colspan="2">自动获取</td>
				<td>日期</td>
				<td colspan="3">自动获取</td>
			</tr>
			<tr height="100" style="text-align: center;font-size:14px">
				<td rowspan="5">内容</td>
				<td colspan="6" rowspan="5">自动获取</td>
			</tr>
			<tr/>
			<tr/>
			<tr/>
			<tr/>
			<tr height="20" style="text-align: center;font-size:14px">
				<td>备注</td>
				<td colspan="6">自动获取</td>
			</tr>
			<tr height="24" style="text-align: center;font-size:16px">
				<td colspan="7">意见</td>
			</tr>
			<tr height="24" style="text-align: center;font-size:14px">
				<td>序号</td>
				<td>人</td>
				<td>部门</td>
				<td>意见</td>
				<td>时间</td>
				<td>节点</td>
				<td>状态</td>
			</tr>
			<tr height="20" style="text-align: center;font-size:14px">
				<td>1</td>
				<td>顾</td>
				<td>办公室</td>
				<td>同意！</td>
				<td>2018/5/14 15:21</td>
				<td></td>
				<td>已提交</td>
			</tr>
		</table>
		<!-- 下载方法1.超链接_导出文件-->
		<a id="print-click">超链接_导出表格</a>
		<!-- 下载方法2.引入文件保存js-->
		<input type="button" οnclick="download()" value="函数_导出表格"></input>
		<input type="button" οnclick="printout()" value="打印"></input>
		<!-- 下载方法2.引入文件保存js-->
		<script type="application/javascript" src="js/FileSaver.js" ></script>
		<script>
			// 使用outerHTML属性获取整个table元素的HTML代码（包括<table>标签），然后包装成一个完整的HTML文档，设置charset为urf-8以防止中文乱码
			var html = "<html><head><meta charset='utf-8' /></head><body>" + document.getElementById("print-content").outerHTML + "</body></html>";
			// 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
			var blob = new Blob([html], {
				type: "application/vnd.ms-excel"
			});
			var a = document.getElementById("print-click");
			// 利用URL.createObjectURL()方法为a元素生成blob URL
			a.href = URL.createObjectURL(blob);
			// 设置文件名，目前只有Chrome和FireFox支持此属性
			a.download = "会签单.xls";

			function download() {
				debugger
					// 使用outerHTML属性获取整个table元素的HTML代码（包括<table>标签），然后包装成一个完整的HTML文档，设置charset为urf-8以防止中文乱码
					var html2 = "<html><head><meta charset='utf-8' /></head><body>" + document.getElementById("print-content").outerHTML + "</body></html>";
					// 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
					var blob2 = new Blob([html2], {
						type: "application/vnd.ms-excel"
					});
					saveAs(blob2, "应系单.xls");
			};
			  //打印具体实现代码
           function printout() {
           		debugger;
                var newWindow;
                //打开一个新的窗口  
                newWindow = window.open();
                // 是新窗口获得焦点  
                newWindow.focus();
                //保存写入内容  
                var newContent = "<html><head><meta charset='utf-8'/><title>打印</title></head><body>"
                newContent += document.getElementById("print-content").outerHTML;
                newContent += "</body></html>"
                // 将HTML代码写入新窗口中  
                newWindow.document.write(newContent);
                newWindow.print();
                // close layout stream 
                newWindow.document.close();
                //关闭打开的临时窗口
                newWindow.close();
                return false;
           };
		</script>
	</body>

</html>


逍遥运德
关注
  • 8
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
table-download:从页面以电子表格格式下载 HTML 表格
05-31
表格下载 此插件用于从网页下载 HTML 表格作为 XLS 文件。 从网站安装。 目的 将 HTML 表格下载为 XLS 文件 内容 安装 下载存储库并解压。 转到并将其加载为临时扩展 浏览器兼容性： 下一步是什么 去做 学分 Christian Kaindl使用 i18n API 翻译 HTML 页面 信息 Table Download由Arun编写和维护许可证：麻省理工学院
前端原生下载excel表格
ABC123220的博客
09-18 795
前端导出excel表格几种方式
Web前端最全html table 如何导出为excel表格案例分享_html table导出为excel，面试加分项 徐强百度云
最新发布
2401_84435739的博客
05-16 679
1）页面添加一个动作按钮。">导出});//导出html表格为 excel 文件### js基础1)对js的理解？2)请说出以下代码输出的值？3)把以下代码，改写成依次输出0-94)如何区分数组对象，普通对象，函数对象5)面向对象、面向过程6)面向对象的三大基本特性7)XML和JSON的区别？8)Web Worker 和webSocket？9)Javascript垃圾回收方法？10)new操作符具体干了什么呢？11)js延迟加载的方式有哪些？
html/jsp下载Excel文件
weixin_33720078的博客
10-17 483
2019独角兽企业重金招聘Python工程师标准>>> ...
Html实现Excel模板下载
dxinyu的博客
01-13 1039
Html实现Excel模板下载 首先，在项目中选择一个文件夹，将自己制作的excel模板放进文件夹中。 html在href中加上下文$｛ctxPath｝ html代码部分： 下载模板 就可以实现网页中下载excel模板啦！！！
html的table下载为excel格式的文件(支持大文件下载)
buler_sky的博客
02-22 1653
代码如下： // 前端下载Excel el：dom元素，fileName: 文件名称 export function exportExcel(el, fileName = '下载.xls') { let uri = 'data:application/vnd.ms-excel;base64,'; let template = '<html><head><meta charset="UTF-8"><style type="text/css"&gt
纯前端html+js实现的excel转json格式
02-28
标题 "纯前端html+js实现的excel转json格式" 描述了一个完全在浏览器环境中完成的Excel到JSON转换功能。这个技术方案特别适用于那些不需要服务器端处理的场景，比如小型项目或者临时的数据导入需求。它允许用户上传...
在django项目中导出数据到excel文件并实现下载的功能
09-17
在Django项目中导出数据到Excel文件并实现下载功能是一项常见的需求，这通常涉及到后端数据处理和前端用户交互。以下将详细讲解这个过程的关键步骤和涉及的技术点。 首先，我们需要安装必要的依赖模块，这里是`xlwt...
HTML——旋转线条（追光者）.zip
10-08
在本示例中，"HTML——旋转线条（追光者）.html" 文件很可能包含了一段代码，用于实现一种动态的、旋转的线条效果，这在前端设计中常被称为“追光者”效果。这种效果通常用于增加页面的视觉吸引力，给用户带来更丰富...
HTML——旋转红线（追光者）.zip
09-15
在这个"HTML——旋转红线（追光者）"的项目中，我们可以看到这三个核心技术的综合应用。 首先，HTML文件（HTML——旋转红线（追光者）.html）是整个效果的载体，它定义了网页的基本结构和内容。HTML标签如`<div>`、...
excel转成html代码实现在线预览完美解决无法显示图片的问题
06-17
亲测，完美解决excel转换成html后图片无法显示的问题。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。...
html表格<table></table>
06-07
html表格 <table border="1"> <tr > <td rowspan="2"> </td> <td> 第二行的单元格 </td> <td> 第三行的单元格 </td> </tr> <tr > <td colspan="2" align="center"> 第二行的单元格 </td> </tr> <tr > <td> 第一行的单元格 </td> <td> 第二行的单元格 </td> <td> 第三行的单元格 </td> </tr> </table>
html表单（表格）
07-15
表单标签 table form
html js 页面表格导出示例
qq_36521848的博客
05-12 447
将html中的表格下载下来。
js取得html数据怎么输出,js中获取到的数据怎么遍历到cshtml页面的table中
weixin_34856035的博客
06-04 247
$(function () {$(“#upload”).click(function () {var formData = new FormData($(‘#uploadForm’)[0]);$.ajax({type: ‘post’,url: “Upload”,data: formData,cache: false,processData: false,contentType: false,suc...
原生js实现excel下载
weixin_42331327的博客
02-05 439
<!DOCTYPE html> <html lang="en"> <head> <p style="font-size: 20px;color: red;">使用table标签方式将json导出xls文件</p> <button onclick='tableToExcel()'>导出</button> </head> <body> <script> .
移动端excel导出_js 实现纯前端将数据导出excel两种方式，亲测有效
weixin_39616686的博客
12-21 1318
由于项目需要，需要在不调用后台接口的情况下，将json数据导出到excel表格，参考了好多资料以及很多大佬写的博客终于实现，兼容chrome没问题，其他还没有测试过，这边介绍两种实现方式，并附上代码和gif动图，博主不才还望轻喷方法一将table标签，包括tr、td等对json数据进行拼接，将table输出到表格上实现，这种方法的弊端在于输出的是伪excel，虽说生成xls为后缀的文件，但文件形式...
原生js动态为table追加html,JS实现动态生成html table表格的方法分析
weixin_29981095的博客
05-31 586
本文实例讲述了JS实现动态生成html table表格的方法。分享给大家供大家参考，具体如下：刚在论坛上面逛的时候看到有人问html表格怎么动态生成，我回了一下发现有好多小伙伴追问- - 看来还是有很多人不会的啊，于是决定写个博来解救万千小伙伴于水火之中(mdzz)首先我们要在html里面有如下代码：如果想在table里面加其他的可以随便加(如加一个表头等等)，只需要知道等会js动态生成的内容全部...
js 调用php 导出表格,[拿来主义]使用layui纯JS导出html页面中的table为excel
weixin_39980184的博客
03-22 152
使用场景：将当前html页面中table的数据导出为excel(分析：页面无分页，不用再查数据库，直接使用js插件导出数据即可)js代码：layui.config({base:'{$Think.PLUGINS_SITE_ROOT}/layuiv2.4.3/lay/extend/'}).extend({excel:'excel'});layui.use(['table','excel'],f...
Web前端 页面功能——点击按钮返回顶部的实现方法
06-11
实现点击按钮返回顶部的方法可以分为两种： 1. 使用 JavaScript 实现 在 HTML 中添加一个“返回顶部”按钮，并在 JavaScript 中绑定该按钮的点击事件，使其在点击时返回页面顶部。 HTML 代码： ```html <button id="backToTopBtn">返回顶部</button> ``` JavaScript 代码： ```javascript // 获取“返回顶部”按钮 var backToTopBtn = document.getElementById("backToTopBtn"); // 给按钮添加点击事件 backToTopBtn.onclick = function() { // 滚动到页面顶部的代码 document.documentElement.scrollTop = 0; document.body.scrollTop = 0; } ``` 2. 使用 CSS 实现 在 HTML 中添加一个“返回顶部”按钮，并使用 CSS 给该按钮添加 fixed 定位和动画效果，使其在点击时返回页面顶部。 HTML 代码： ```html <button id="backToTopBtn">返回顶部</button> ``` CSS 代码： ```css #backToTopBtn { position: fixed; bottom: 20px; right: 20px; display: none; animation: fadeIn 0.3s; } #backToTopBtn:hover { cursor: pointer; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } ``` JavaScript 代码： ```javascript // 获取“返回顶部”按钮 var backToTopBtn = document.getElementById("backToTopBtn"); // 监听页面滚动事件 window.onscroll = function() { // 如果页面滚动距离超过了 500px，则显示“返回顶部”按钮，否则隐藏 if (document.documentElement.scrollTop > 500 || document.body.scrollTop > 500) { backToTopBtn.style.display = "block"; } else { backToTopBtn.style.display = "none"; } } ``` 以上两种方法都可以实现点击按钮返回顶部的功能，具体选择哪种方法取决于个人喜好和项目需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值