html前端课堂—打印代码分享

最新推荐文章于 2023-09-25 11:16:48 发布
最新推荐文章于 2023-09-25 11:16:48 发布
阅读量822 收藏
点赞数
文章标签： 前端 html javascript
原文链接：https://blog.51cto.com/u_15111999/4831974
版权

今天分享下”html前端课堂—打印代码分享“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。

ylbtech_html_print

html打印代码，可供翻页

复制代码

代码如下:

<html>

<head>

<meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">

<title>看看</title>

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

<!--media=print 这个属性可以在打印时有效-->

<style media=print>

.Noprint{display:none;}

.PageNext{page-break-after: always;}

</style>

<style>

.tdp

{

border-bottom: 1 solid #000000;

border-left: 1 solid #000000;

border-right: 0 solid #ffffff;

border-top: 0 solid #ffffff;

}

.tabp

{

border-color: #000000 #000000 #000000 #000000;

border-style: solid;

border-top-width: 2px;

border-right-width: 2px;

border-bottom-width: 1px;

border-left-width: 1px;

}

.NOPRINT {

font-family: "宋体";

font-size: 9pt;

}

</style>

</head>

<body >

<center class="Noprint" >

<p>

<OBJECT id=WebBrowser classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 width=0>

</OBJECT>

<input type=button value=打印 οnclick=document.all.WebBrowser.ExecWB(6,1)>

<input type=button value=直接打印 οnclick=document.all.WebBrowser.ExecWB(6,6)>

<input type=button value=页面设置 οnclick=document.all.WebBrowser.ExecWB(8,1)>

</p>

<p> <input type=button value=打印预览 οnclick=document.all.WebBrowser.ExecWB(7,1)>

<br/>

</p>

<hr align="center" width="90%" size="1" noshade>

</center>

<table width="90%" border="0" align="center" cellpadding="2" cellspacing="0" class="tabp">

<tr>

<td colspan="3" class="tdp">第1页</td>

</tr>

<tr>

<td width="29%" class="tdp">&nbsp;</td>

<td width="28%" class="tdp">&nbsp;</td>

<td width="43%" class="tdp">&nbsp;</td>

</tr>

<tr>

<td colspan="3" class="tdp">&nbsp;</td>

</tr>

<tr>

<td colspan="3" class="tdp"><table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td width="50%" class="tdp"><p>这样的报表</p>

<p>对一般的要求就够了。</p></td>

<td>&nbsp;</td>

</tr>

</table></td>

</tr>

</table>

<hr align="center" width="90%" size="1" noshade class="NOPRINT" >

<!--分页-->

<div class="PageNext"></div>

<table width="90%" border="0" align="center" cellpadding="2" cellspacing="0" class="tabp">

<tr>

<td class="tdp">第2页</td>

</tr>

<tr>

<td class="tdp">看到分页了吧</td>

<p>http://www.qlyl1688.com</p>

</tr>

<tr>

<td class="tdp">&nbsp;</td>

</tr>

<tr>

<td class="tdp">&nbsp;</td>

</tr>

<tr>

<td class="tdp"><table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td width="50%" class="tdp"><p>这样的报表</p>

<p>对一般的要求就够了。</p></td>

<td>&nbsp;</td>

</tr>

</table></td>

</tr>

</table>

<hr align="center" width="90%" size="1" noshade class="NOPRINT" >

<div class="PageNext"></div>

<table width="90%" border="0" align="center" cellpadding="2" cellspacing="0" class="tabp">

<tr>

<td class="tdp">第3页</td>

</tr>

<tr>

<td class="tdp">看到分页了吧</td>

</tr>

<tr>

<td class="tdp">&nbsp;</td>

</tr>

<tr>

<td class="tdp">&nbsp;</td>

</tr>

<tr>

<td class="tdp"><table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td width="50%" class="tdp"><p>这样的报表</p>

<p>对一般的要求就够了。</p></td

<td>&nbsp;</td>

</tr>

</table></td>

</tr>

</table>

</body>

</html>

以上是云南仟龙Mark给大家介绍的所有内容,希望对大家有所帮助，如果大家有任何疑问请在脚本之家留言，如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

云南仟龙Mark
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
bootstrap前端HTML代码
01-18
所上传代码，不包含数据库文件，不包含与后台数据交互，仅仅作为了解bootstrap 前端HTML和CSS的了解，包含了各类控件的实例。
HTML页面动态内容打印（文字、图片等）
中国程序猿
01-05 1670
HTML页面动态内容打印（文字、图片等），本文使用jsp做讲解，不同框架如vue等前后端分离项目依然可以参考，最重要的是打印页的样式调试问题，有的样式会失效需要特殊处理
html前端打印
热门推荐
qq_25775675的博客
02-26 1万+
var newstr = document.getElementById("picOutDiv").innerHTML;//得到需要打印的元素HTML var oldstr = document.body.innerHTML;//保存当前页面的HTML document.body.innerHTML = newstr; $(".pic").offset({top:0,left:0}); $(".p...
html实现打印功能
m-dididid的博客
05-07 4911
实现代码 写入js文件中 // 打印 function preview(oper) { if (oper < 10) { bdhtml = window.document.body.innerHTML; //获取当前页的html代码 sprnstr = "<!--startprint" + oper + "-->"; //设置打印开始区域 eprnstr = "<!--endprint" + oper + "-->"; //设置打印结束
js 打印指定内容_如何实现js打印
weixin_39519619的博客
11-30 452
js打印有两种方式：当前页面打印和新窗口打印，根据项目需求选择适合的方式第一种打印方式：当前页面打印js代码：const printHtml = document.querySelector('.print-content').innerHTML; // 需要打印的内容 window.document.body.innerHTML = printHtml; window.print(); wind...
初次接触html，不知道怎么打印数据，可以用vscode输出
pangaoping1111的博客
06-27 277
【代码】vscode怎么输出。
制作首页APP前端HTML布局代码
最新发布
03-08
一个简单的HTMl制作的布局页面，可以根据以此进行编写
前端 HTML 主题 万圣节代码
11-01
万圣节代码html 这段代码创建了一个简单的万圣节主题网页，其中包括一个标题和一个南瓜灯笼图像。你可以将这段代码保存为一个HTML文件，然后在浏览器中打开它，就可以看到万圣节主题的网页了。
前端GoJs使用实例代码分享
01-30
参考引入版本GoJS v2.2.22 （go.js文件没上传过来，引入2.x的就可以）
前端代码分享-星空背景特效
07-14
前端代码分享-星空背景特效
javascript打印大全(打印页面设置/打印预览代码)
12-02
代码如下: <HTML><HEAD><TITLE>javascript打印-打印页面设置-打印预览代码</TITLE> <META http-equiv=Content-Type content=”text/html; charset=gb2312″ /> [removed] 　　function printsetup(){ 　　// 打印页面设置 　　wb.execwb(8,1); 　　} 　　function printpreview(){ 　　// 打印页面预览 　　wb.execwb(7,1); 　　} 　　function printit() 　
在浏览器中使用javascript打印HTML中指定Div带背景图片内容生成PDF电子证书查询的解决方案
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
08-10 2002
当用户点击"打印"按钮时，浏览器将会打印出指定的DIV内的内容。要调用浏览器中的打印功能，并指定需要打印的内容为特定的DIV内的内容，你可以使用JavaScript来实现。水平居中是相对父元素进行的，所以父元素应该具有明确的宽度。如果父元素的宽度是根据内容自适应的，请确保父元素可以容纳居中的子元素。通过将元素的左边距设置为父元素宽度的一半，将其移到了水平中间位置。变换，将元素在水平方向上向左平移了自身宽度的一半，实现了水平居中。的类，并设置了相对定位以及水平居中的样式。在上面的示例中，我们给目标。
HTML 页面打印
u011403672的专栏
01-08 2250
HTML 页面打印     ? //首先要添加代码 ↓↓↓ object id="WebBrowser" classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" height="0" width="0">object>   //实现打印功能代码 input type="button"
文件打印（一）HTML文件打印
Strawberry_ahh的博客
08-31 1887
C#使用WebBrowser控件打印Html文件
JS打印指定区域内容
08-29 530
/*将页面内要打印的内容加入中间XXXXX，再加个打印按纽 onclick=preview(1)*/ function preview(oper) {  if (oper < 10){  bdhtml=window.document.body.innerHTML;//获取当前页的html代码  sprnstr="";//设置打印开始区域  eprnstr="";//设置打印
打印HTML参数代码
Anlinana的博客
07-22 732
<?php print_r($data);die();?>
C# 代码实现打印以及各种设置
Yxiaobing的博客
09-25 1865
内含绘图打印内容，二维码生成，条形码生成。个人记录，大家可参考。
html页面实现打印
weixin_46410916的博客
07-27 3486
html页面实现打印功能方式一 打印整个html页面方式二 通过获取页面html内容打印 方式一 打印整个html页面 <!DOCTYPE html> <html lang="zh" xmlns:th="http://www.thymeleaf.org" > <head> <th:block th:include="include :: header('修改学员基本信息')" /> <style> input[di
怎么用html做成翻页按钮,一个不错的html 打印代码支持翻页
weixin_42527665的博客
05-31 736
ylbtech_html_printhtml打印代码，支持翻页复制代码代码如下:看看.Noprint{display:none;}.PageNext{page-break-after: always;}.tdp{border-bottom: 1 solid #000000;border-left: 1 solid #000000;border-right: 0 solid #ffffff;bord...
若以框架生成前端打印代码
06-03
如果您使用前端框架来生成前端打印代码，通常您可以按照以下步骤操作： 1. 首先，您需要在您的前端代码中定义一个打印函数或方法。这个函数可以接受一个或多个参数，并将它们输出到浏览器的控制台或弹出窗口中。 例如，下面是一个使用JavaScript来定义打印函数的示例： ``` function printMessage(message) { console.log('Message:', message); } ``` 2. 接下来，您可以在您的UI组件或页面中调用这个打印函数，并传递需要打印的内容作为参数。您可以使用按钮、表单或其他用户输入组件来触发打印操作。 例如，下面是一个使用React来调用打印函数的示例： ``` import React from 'react'; function PrintButton() { const handleClick = () => { const message = 'Hello, World!'; printMessage(message); }; return ( <button onClick={handleClick}>Print</button> ); } ``` 3. 最后，您可以使用您的前端框架提供的调试工具来检查打印输出并调试您的代码。您可以在浏览器的开发者工具中查看控制台输出、调试日志和其他调试信息。 总之，使用前端框架生成前端打印代码可以提高代码的可读性和可维护性，并帮助您更轻松地调试和测试您的前端代码。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值