js前端打印

最新推荐文章于 2024-07-19 12:58:53 发布
最新推荐文章于 2024-07-19 12:58:53 发布
阅读量487 收藏
点赞数
分类专栏： js 文章标签： javascript html css java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011424470/article/details/44750785
版权
1、在页面的代码头部处加入 
JavaScript：
<script language=javascript> 
function onload() { 
bdhtml=window.document.body.innerHTML; 
sprnstr="<!--startprint-->"; 
eprnstr="<!--endprint-->"; 
prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); 
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); 
window.document.body.innerHTML=prnhtml; 
window.print(); 
} 

</script> 

2、在页面正文处加上<!--startprint-->与<!--endprint-->标识。也就是在需要用户 打印保存的正文所对应的html处附加上。



3、完整如下所示

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<html>
<head>
<script type="text/javascript">
window.οnlοad=function()//用window的onload事件，窗体加载完毕的时候
{
bdhtml=window.document.body.innerHTML; 
sprnstr="<!--startprint-->"; 
eprnstr="<!--endprint-->"; 
prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); 
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); 
window.document.body.innerHTML=prnhtml; 
window.print(); 
}
</script>
</head>
<style type="text/css">
.main td{ height:30px; border:#CCCCCC 1px solid;}
.v div{ width:1800px; height:700px;}
</style>
<!--startprint-->
<body>
<div class="v">
<table>
<tr width="100%" border="0" cellspacing="0" cellpadding="0" class="main" bgcolor="#5F9EA0">

<!--  <tr> -->
<td>机</td>
<td>关</td>
<td>起</td>
<td>降</td>
<td>开</td>
<td>飞</td>
<td>运</td>
<td>飞</td>
<td>运</td>
</tr>
<s:iterator  value="#request.airplaneInfos" status="status" id="airplane">
<tr width="100%" border="0" cellspacing="0" cellpadding="0" class="main">
<td><s:property value="#airplane.aircraftID"/></td>
<td><s:property value="#airplane.outTime"/></td>
<td><s:property value="#airplane.offTime"/></td>
<td><s:property value="#airplane.onnTime"/></td>
<td><s:property value="#airplane.innTime"/></td>
<td><s:property value="#airplane.timeOffonn"/></td>
<td><s:property value="#airplane.timeOutinn"/></td>
<td><s:property value="#airplane.fobOffonn"/></td>
<td><s:property value="#airplane.fobOutinn"/></td>
</tr>
</s:iterator>
</table>
</div>
</body>
<!--endprint-->
</html>

coco爱火女
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js打印页面
qq_36939013的博客
08-17 413
最近项目需要实现将局部页面输出pdf文件，做了以下案例 效果 html <template> <div id="test-page"> <!-- 额外元素 --> <div class="myInput"> <el-input v-model="text"></el-input>{{text}} </div> <!--
js调用打印
u011105380的专栏
05-28 593
方法一function printHTML(page){    var bodyHTML=window.document.body.innerHTML;    window.document.body.innerHTML=$(page).html();    console.log(window.document.body.innerHTML);    window.print();    win...
前端打印的相关实践
不咋爱学习の任大猫
12-11 1074
在前端开发过程中，遇到打印相关的需求时，该如何选择打印方式？目前支持的打印方式多种多样，例如说浏览器本身支持的print方法，还有第三方的付费打印软件，当然在公司内部也有功能完整的sdk支持。那么问题就接踵而至，该如何选择哪种打印方式来匹配实际需求呢？下面本文介绍了几种打印方式，会通过其使用方式、接入成本、打印呈现样式等方面来评估各打印方式的优劣，基于此，再通过与实际需求的对比，应该就能快速选择一种打印方案了吧～
前端页面打印分页
weixin_44997513的博客
07-25 927
前端打印
js 前端打印demo
10-27
总结来说，"js 前端打印demo"是一个帮助开发者理解和实践前端打印功能的示例，它涵盖了如何利用JavaScript和CSS实现打印优化的关键技术。通过学习和实践这个demo，我们可以提高前端项目的用户体验，特别是在需要提供...
前端打印时js分页实现共几页和第几页
08-06
本文将详细介绍如何使用JavaScript（js）在前端实现分页功能，包括显示总页数、当前页数，以及触底自动换页，并在每页表头增加固定部分，如金额大写转换和当前时间获取。 一、分页基础 1. 数据分块：分页的核心是...
前端打印模块hiprint
07-14
在IT行业中，前端打印模块是实现用户在网页端进行文档打印功能的关键部分。"Hiprint"作为一款前端打印模块，它的设计目标是提供一个自定义程度高的解决方案，以满足开发者在网页应用中对打印功能的各种需求。下面...
前端JavaScript 打印星星demo
12-24
打印星星demo
web前端页面通过BrowserPrint API连接斑马打印机进行RFID条形码贴纸打印
05-15
web前端页面通过BrowserPrint API连接斑马打印机进行RFID条形码贴纸打印 该资源提供了一个vue混入，通过混入提供一个可直接使用的方法执行打印。 在现代物流、仓储和零售行业中，RFID和二维码技术发挥着至关重要的...
HTML5 audio标签使用 浏览器触发函数提示声音（最小化后 、当前任务非浏览器时都可以使用）
u011424470的专栏
03-24 3239
1、上次写过一个浏览器播放提示音  但使用过程中不是很理想 （1）当前任务不是浏览器时（最前端运行浏览器）事件堆积到一起不执行  执行时一下子触发好多提示音 2、audio标签不存在这个问题具体代码如下  setInterval("myInterval()",5000);//1000为1秒钟        function myInterval()        {
window.event.keyCode - 兼容chrom和Firefox
u011424470的专栏
04-08 2991
1.HTML中加入onKeyDown事件 2.function keyCheck() { if (window.event.keyCode==38) {         //向上键 } if (window.event.keyCode==40) {             //向下键 } } 在chrom中是支持window.event.keyCode但是在Firefox
textarea替换换行和空格的方法
u011424470的专栏
12-17 2754
textarea替换换行和空格的方法 var reason=document.getElementById('temp').value.replace(/[\n\r]/gi,"").replace(/[ ]/g,"");  replace(/[\n\r]/gi,"") //替换回车符 replace(/[ ]/g,"");     //替换空格符
Ext grid多选后把选定的值提交到后台
u011424470的专栏
04-15 1553
var grid = new Ext.grid.GridPanel({ region : 'north', height : 300, // 表格面板标题,默认为粗体，这里设置样式将其格式为正常字体 title : '查询结果', frame : false, autoScroll : true, store : store, // 数据存储 stripeRows : true,
JQ判断是否与服务器断开连接
u011424470的专栏
10-16 1097
var boolean = true; $.ajax({  url: 'http://192.168.246.100:8080/SkyMonWeb/images/12.png',//项目下的某张图片  type: 'GET',  complete: function(response) {   if(response.status == 200) {   boolean = tru
复选框默认被选中
u011424470的专栏
04-15 1069
var Store = new Ext.data.Store({ proxy : new Ext.data.HttpProxy({ url : ‘Info.action' }), reader : new Ext.data.JsonReader({ totalProperty : 'TOTALCOUNT', root : 'ROOT' }, [{ name : 'ID' }, {
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1023
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
博客前端项目学习day03——框架页
最新发布
qq_53237241的博客
07-19 259
【代码】博客前端项目学习day03——框架页。
前端js调用打印机自动打印
05-31
您好，前端调用打印机自动打印可以使用 JavaScript 的 `window.print()` 方法来实现。这个方法可以直接在浏览器的控制台中调用，也可以在 JavaScript 代码中使用。 以下是一个简单的示例代码，演示了如何使用 JavaScript 调用打印机自动打印： ```javascript // 等待页面加载完成后执行 window.onload = function() { // 调用打印机自动打印 window.print(); } ``` 在这个例子中，我们使用 `window.onload` 事件来确保页面已经完全加载完成后再调用打印机自动打印。然后，我们使用 `window.print()` 方法来触发打印机的自动打印。 需要注意的是，这个方法会触发浏览器的打印功能，而不是直接与打印机通信。因此，您需要在浏览器中设置好打印机选项，以确保打印效果符合您的预期。 希望这个示例能够帮助您实现前端调用打印机自动打印的功能。如果还有其他问题，请随时提出。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值