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中的内容,下面是从网上摘到 ...
随机推荐
- Git学习笔记-相关命令记录
内容来自:https://www.liaoxuefeng.com/wiki/896043488029600/896067074338496 1.Linux安装Git 首先,你可以试着输入git,看看系 ...
- codeblocks无法调试的相关解决思路
代码无法调试!? 难受... 现在给你提供两种常见的导致codeblocks无法调试的原因以及相应的解决方案. 原因一: 在创建工程目录时,保存路径中有中文. 重要的事情说三遍: 切记,工程目录的保存 ...
- codeforces 793 D. Presents in Bankopolis（记忆化搜索）
题目链接:http://codeforces.com/contest/793/problem/D 题意:给出n个点m条边选择k个点,要求k个点是联通的而且不成环,而且选的边不能包含选过的边不能包含以前 ...
- 10 UA池和代理池
在Scrapy中,引擎和下载器之间有一个组件,叫下载中间件(Downloader Middlewares).因它是介于Scrapy的request/response处理的钩子,所以有2方面作用: (1 ...
- 使用Spring Boot和RxJava的构建响应式REST API
我不打算解释什么是响应式编程,也不解释为什么要使用它.我希望你已经在其他地方了解过,如果没有,你可以使用Google去搜索它.在本文中,我将告诉您如何使用专门针对Spring Boot和RxJava的 ...
- 【Nginx】实现动静分离
一.概述 1.1 动态页面与静态页面区别 1.2 什么是动静分离 1.3 为什么要用动静分离 二.Nginx实现动静分离 2.1 架构分析 2.2 配置 三.动静分离与前后分离区别: 四.一些问题 一 ...
- 【Redis】SpringBoot+Redis+Ehcache实现二级缓存
一.概述 1.1 一些疑惑? 1.2 场景 1.3 一级缓存.两级缓存的产生 1.4 流程分析 二.项目搭建 一.概述 1.1 一些疑惑? Ehcache本地内存 Redis 分布式缓存可以共享 一级 ...
- 【Offer】[37] 【序列化二叉树】
题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 请实现两个函数,分别用来序列化和反序列化二叉树. 二叉树的序列化是指:把一棵二叉树按照某种遍历方式的结果以某种格式保存为字符串,从而使得 ...
- 实现 Java 本地缓存，该从这几点开始
缓存,我相信大家对它一定不陌生,在项目中,缓存肯定是必不可少的.市面上有非常多的缓存工具,比如 Redis.Guava Cache 或者 EHcache.对于这些工具,我想大家肯定都非常熟悉,所以今天 ...
- IDEA导入Maven工程
1. 2.选择要导入的工程 3. 4. 5. 6.OK之后点击4图页面的next 7.点击Finish之后 完成!