html实现打印预览效果
前面说到利用lodop插件进行打印设置，那个应用于打印快递面单，或者跟快递面单相似场景的情况。
今天的利用html快速打印出A4纸大小的场景，例如：合同、静态文本等。
效果如下：
方式一
1、设置div，打印区域，最好是单放在一页，因为需要打印的是该页所有内容
<div id="contractContent" style="width: fit-content"></div>
2、拼接div中需要的文本，可以设置动态数据填充
var contractContent = '';
contractContent += '<h1 style="text-align: right;">';
contractContent +=
'html打印合同 <span style="font-size: 14px;">编号: DxWL-0017722 </span>';
contractContent += '</h1>';
contractContent += '<h1 style="text-align: center;">';
contractContent += '<span style="font-size: 16px; font-style: italic; font-weight: bold; line-height: 18px;"></span>';
contractContent += '</h1>';
contractContent += '<table align="center" width="650" border="1">';
contractContent += '<tbody>';
contractContent += '<tr class="firstRow">';
contractContent += '<td width="61" valign="top" style="word-break: break-all;" rowspan="2" colspan="1" align="center">';
contractContent += '托运方（以下简称甲方）';
contractContent += '</td>';
contractContent += '<td width="114" valign="top" style="word-break: break-all;" align="center">';
contractContent += '单位名称';
contractContent += '</td>';
contractContent += '<td width="130" valign="top" style="word-break: break-all;" align="center"></td>';
contractContent += '<td width="114" valign="top" style="word-break: break-all;" align="center">';
contractContent += '单位地址';
contractContent += '</td>';
contractContent += '<td width="130" valign="top" style="word-break: break-all;" align="center"></td>';
contractContent += '<td width="114" valign="top" style="word-break: break-all;" align="center">';
contractContent += '公司电话';
contractContent += '</td>';
contractContent += '<td width="130" valign="top" style="word-break: break-all;" align="center"></td>';
contractContent += '</tr>';
contractContent += '<tr>';
contractContent += '<td width="114" valign="top" style="word-break: break-all;" align="center">';
contractContent += '起运地点';
contractContent += '</td>';
contractContent += '<td width="110" valign="top" align="center" style="word-break: break-all;"></td>';
contractContent += '<td width="114" valign="top" style="word-break: break-all;" align="center">';
contractContent += '目的地';
contractContent += '</td>';
contractContent += '<td width="130" valign="top" style="word-break: break-all;" align="center"></td>';
contractContent += '<td width="114" valign="top" style="word-break: break-all;" align="center">';
contractContent += '联系电话';
contractContent += '</td>';
contractContent += '<td width="130" valign="top" style="word-break: break-all;" align="center"></td>';
contractContent += '</tr>';
contractContent += '<tr>';
contractContent += '<td colspan="1" valign="top" align="center" style="word-break: break-all;" rowspan="2" width="61">';
contractContent += '承运方（以下简称乙方）';
contractContent += '</td>';
contractContent += '<td width="114" valign="top" style="word-break: break-all;" align="center">';
contractContent += '车牌号';
contractContent += '</td>';
contractContent += '<td width="130" valign="top" style="word-break: break-all;" align="center"></td>';
contractContent += '<td width="114" valign="top" style="word-break: break-all;" align="center">';
contractContent += '行驶证所有人';
contractContent += '</td>';
contractContent += '<td width="130" valign="top" style="word-break: break-all;" align="center"></td>';
contractContent += '<td width="114" valign="top" style="word-break: break-all;" align="center">';
contractContent += '车型';
contractContent += '</td>';
contractContent += '<td width="130" valign="top" style="word-break: break-all;" align="center"></td>';
contractContent += '</tr>';
contractContent += '<tr>';
contractContent += '<td width="114" valign="top" style="word-break: break-all;" align="center">';
contractContent += '驾驶员姓名';
contractContent += '</td>';
contractContent += '<td width="130" valign="top" style="word-break: break-all;" align="center"></td>';
contractContent += '<td width="114" valign="top" style="word-break: break-all;" align="center">';
contractContent += '身份证号';
contractContent += '</td>';
contractContent += '<td width="130" valign="top" style="word-break: break-all;" align="center"></td>';
contractContent += '<td width="114" valign="top" style="word-break: break-all;" align="center">';
contractContent += '联系电话';
contractContent += '</td>';
contractContent += '<td width="130" valign="top" style="word-break: break-all;" align="center"></td>';
contractContent += '</tr>';
contractContent += '</tbody>';
contractContent += '</table>';
contractContent += '<p style="text-indent: 2em; line-height: normal;">';
contractContent += '<span style="text-align: center;">经甲乙双方友好协商，达成以下运输条款:</span>';
contractContent += '</p>';
contractContent += '<p style="line-height: normal;"> 一、甲方同意将本批货物共____________吨(不含包装物重量)交由乙方运输至目的地，运价为____________元吨，运费总额为大写人民币______万______仟______佰______拾元整￥____________，送达时间为______年______月______日______时前。延迟送达一天扣除乙方违约金500元，同时乙方承担由此造成的所有损失。运费计算吨位按照货物发运单据客户签收的重量或注明的产品净重量执行，货物名称、性质、规格、重量、数量、价值、收货人及其联系方式、收货地点等以该批货物相对应的发运单据注明的为准。<br/></p>';
contractContent += '<p style="line-height: normal;"> 二、严禁乙方将有毒、有味产品、化学品、危险品等产品与甲方货物混装。若乙方在货物中央带易燃、易爆危险物品，以及国家规定的禁运、有害、有毒、腐蚀等物品，一经查实，混装产品全部召回无条件销毁，由此造成的各种损失及法律风险均由乙方承担，且甲方有权扣除乙方未结运费。涉及法律责任的由乙方承担。</p>';
contractContent += '<p style="line-height: normal;"> 三、本合同一式二份，甲乙方各执一t双方代表签字后生效，本次运输业务及结算终止时合同自动终止。</p>';
contractContent += '<p><br/></p>';
contractContent += '<p style="line-height: normal;"> 托运方代表(甲方) : 承运方代表(乙方):</p>';
contractContent += '<p><br/></p>';
contractContent += '<p style="line-height: normal;"> 签订日期: 年 月 日 签订日期: 年 月 日</p>';
contractContent += '<p><br/></p>';
contractContent += '<p style="text-align: center;"> 第(一)联托运方存档第 (二)联承运方存档</p>';
contractContent += '<p><br/></p>';
$("#contractContent").html(contractContent);
3、设置打印操作事件
function printContract(){
if (!!window.ActiveXObject || "ActiveXObject" in window) { //是否ie
remove_ie_header_and_footer();
}
window.print()
}
去除不必要的页眉页脚，针对ie适用
function remove_ie_header_and_footer() {
var hkey_path;
hkey_path = "HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";
try {
var RegWsh = new ActiveXObject("WScript.Shell");
RegWsh.RegWrite(hkey_path + "header", "");
RegWsh.RegWrite(hkey_path + "footer", "");
} catch (e) {
}
}
function Print(obj)
{
var str = document.getElementById(obj).innerHTML;; //获取需要打印的页面元素
str ="<html><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8'></head><body>"+str+"</body></html>";
var pwin=window.open("Print.htm","print");
//PageSetup_Default();//设置页眉和页脚为默认值
pwin.document.write(str);
pwin.document.close(); //这句很重要，没有就无法实现
pwin.print();
}
参考：
html实现打印预览效果的更多相关文章
- 用WPF实现打印及打印预览
原文:用WPF实现打印及打印预览 应该说,WPF极大地简化了我们的打印输出工作,想过去使用VC++做开发的时候,打印及预览可是一件极麻烦的事情,而现在我不会再使用C++来做Windows的桌面应用了- ...
- javascript和HTML5上传图片之前实现预览效果
一:FileList对象与file对象 FileList对象表示用户选择的文件列表,在HTML4中,file控件内只允许放置一个文件,但是到了HTML5中,通过添加multiple属性,file控件内 ...
- winForm 打印预览
自己很少写技术博客,虽然已经干程序员两年多了,winform开发,web开发都干过,不论项目大小对于.net的相关技术也是了解的,如mvc,wcf,wpf,silverlight,socekt通讯,n ...
- C#实现打印与打印预览功能
C#实现打印与打印预览功能的思路及代码. 在windows应用程序中文档的打印是一项非常重要的功能,在以前一直是一个非常复杂的工作,Microsoft .Net Framework的打印功能都以组件的 ...
- C#实现打印与打印预览功能（转）
在windows应用程序中文档的打印是一项非常重要的功能,在以前一直是一个非常复杂的工作,Microsoft .Net Framework的打印功能都以组件的方式提供,为程序员提供了很大的方便,但是这 ...
- jqprint的网页打印，打印预览可以包含图片
自己负责的模块需要有个试卷打印的功能,需要将网页特定范围内的内容打印出来,所以选择了jquery.jqprint脚本 用起来也非常简单. //打印 $("#printPage" ...
- WPF实现可视化控件打印及打印预览
打印预览XAML代码: <controls:WindowEx x:Class="SunCreate.Vipf.Client.UI.MapPrintPreview" xmlns ...
- 使用jquery.jqprint.js 实现的打印功能，IE9不能进行打印预览、火狐打印空白界面
提示的内容:SCRIPT438: 对象不支持“ExecWB”属性或方法 首先解决IE9不能打印预览的问题: 查找了一大推资料 ,有两种说法:一种是IE的安全性级别太高:一种是需要安装什么 微软we ...
- JS实现浏览器打印、打印预览
1.JS实现打印的方式方式一:window.print()window.print();会弹出打印对话框,打印的是window.document.body.innerHTML中的内容,下面是从网上摘到 ...
随机推荐
- 最近学习了限流与RateLimiter
前言 分布式环境下应对高并发保证服务稳定几招,按照个人理解,优先级从高到低分别为缓存.限流.降级.熔断,每招都有它的作用,本文重点就讲讲限流这部分. 坦白讲,其实上面的说法也不准确,因为服务降级.熔断 ...
- 关于简单递归在python3中的实现
话不多说,奉上代码: #倒计时 def count_down(i): if i <= 0: return else: print(str(i)) count_down(i - 1) #求阶乘 d ...
- Docker资源管理
一台宿主机可以放多个容器,默认的情况下,Docker 没有对容器进行硬件资源的限制,当容器负载过高时会尽可能的占用宿主机资源,所以有时候我们需要对容器的资源使用设置一个上限,今天我们就来看看如何管理 ...
- HashMap并发下死循环问题解析
首先小伙伴要明确:死循环问题在JDK 1.8 之前是存在的,JDK 1.8 通过增加loHead和loTail进行了修复. 在JDK 1.7及之前 HashMap在并发情况下导致循环问题,致使服务器c ...
- java设计模式9.备忘录模式、访问者模式、调停者模式
备忘录模式 备忘录模式又叫快照模式,备忘录对象是一个用来存储另外一个对象内部状态快照的对象.备忘录的用意是在不破坏封装的条件下,将一个对象的状态捕捉,并外部化存储起来,从而可以在将来合适的时候把这个对 ...
- Linux搭建nginx负载均衡（两台服务器之间）
负载均衡种类 第一种:通过硬件负载解决,常见的有NetScaler.F5.Radware和Array等商用的负载均衡器,价格比较昂贵 第二种:通过软件负载解决,常见的软件有LVS.Nginx.apac ...
- yzoj P2349 取数 题解
题意 1到n个自然数中选k个自然数要求两两不相邻,问有多少种方法,模m eg(1 3 5 ) 又是一道打表规律题,正常解法dp可以通过前缀和优化到O(N* K).另外我们可以重新定义F[I,J]表示从 ...
- 使用kubeadm方式安装K8S
Kubeadm安装 kubeadm是Kubernetes官方提供的用于快速安装Kubernetes集群的工具,伴随Kubernetes每个版本的发布都会同步更新,kubeadm会对集群配置方面的一些实 ...
- Docker下使用disconf：极速体验
Docker下的disconf实战全文链接 <Docker搭建disconf环境,三部曲之一:极速搭建disconf>: <Docker搭建disconf环境,三部曲之二:本地快速构 ...
- Go操作NSQ
NSQ是目前比较流行的一个分布式的消息队列,本文主要介绍了NSQ及Go语言如何操作NSQ. NSQ NSQ介绍 NSQ是Go语言编写的一个开源的实时分布式内存消息队列,其性能十分优异. NSQ的优势有 ...