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中的内容,下面是从网上摘到 ...
随机推荐
- codeforce375div2-D. Lakes in Berland 搜索
Lakes in Berland 题意与解释:这道题就是求图中被围起来的点群,问最少去掉几个点,可以使得孤立的点群数目为K; 因为自己写的代码又长又had bugs. 我自己写的bfs,想着是先染色, ...
- 天梯杯 L2-008. 最长对称子串
L2-008. 最长对称子串 时间限制 100 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 对给定的字符串,本题要求你输出最长对称子串的长度. ...
- codeforces 811 E. Vladik and Entertaining Flags（线段树+并查集）
题目链接:http://codeforces.com/contest/811/problem/E 题意:给定一个行数为10 列数10w的矩阵,每个方块是一个整数, 给定l和r 求范围内的联通块数量 所 ...
- Fractions Again?! UVA - 10976
It is easy to see that for every fraction in the form 1k(k > 0), we can always find two positive ...
- 技术漫谈 | 远程访问和控制云端K8S服务器的方法
对于部署在云端的K8S容器编排系统,可以先通过SSH远程登录到K8S所在主机,然后运行kubectl命令工具来控制K8S服务系统.然而,先SSH登录才能远程访问的二阶段方式,对于使用Linux桌面或者 ...
- WEB-UI自动化测试实践
一.设计背景 随着IT行业的发展,产品愈渐复杂,web端业务及流程更加繁琐,目前UI测试仅是针对单一页面,操作量大.为了满足多页面功能及流程的需求及节省工时,设计了这款UI 自动化测试程序.旨在提供接 ...
- 林大妈的JavaScript进阶知识（三）：HTML5 History API
HTML5中新增了History API,它用于管理浏览器路由跳转的一个url栈.History是window对象的一部分,它也是一个对象,因此称它是BOM(类似DOM,Browser Object ...
- stm32f10x基于freeRTOS的低功耗实现
0. 写在前面 没有太多时间更新,可能偶尔有时间就更新一些. 因为突然有项目用到了stm32f10x系列并且是电池驱动的,所以需要对功耗进行优化,其他CM3核心系列应该也同样适用. 1. 背景 Stm ...
- Django-下载安装-配置-创建django项目-三板斧简单使用
目录 Django 简介 使用 django 的注意事项 计算机名不能有中文 Django版本问题 django下载安装 在命令行下载安装 在pycharm图形界面下载安装 检验是否安装成功 创建Dj ...
- C# 表达式树遍历（二）
一.前言 上一篇我们对表达式树有了初步的认识,这里我们将对表达式树进行遍历,只有弄清楚了他的运行原理,我们才可以对他进行定制化修改. 表达式系列目录 C# 表达式树讲解(一) C# 表达式树遍历(二) ...