JS实现Web中指定内容的保存与打印功能
背景
首先，说说文章的背景。最近手中的一个项目，由于需求中要求提供Web界面的打印功能，当然如果没有打印机，还可以提供保存到本地。项目组长把这个“小任务”分给了我。本着努力为组长分忧解难的思想，领了任务之后，就马上开始了工作。
问题
刚开始的时候，组长给了一个工具（jatoolsprinter）让我研究，我用了一个多小时的时间，做出了一个简单的Demo，然后就是各种的测试，由于 web 打印需要浏览器安装 ActiveX 组件，在随后的测试中，我用了几款浏览器，甚至把安全级别都调到了最低的要求， ActiveX 组件的安装总是不成功，之后的几个小时也在一直调这个问题。终于，它打破了我耐心的底线，就这样被我“无情”的给抛弃了。
新大陆
吃过晚饭回来之后，我就开始走上了寻找新大陆的征途中，还好，我的运气不错，web 打印这个功能还是很常用的。很快我就有了一个新的解决方案。在简单的了解了一下官方的说明之后，找了一个文档看了看，这次我吸取了上次的教训，我先把官方提供的插件制作成了 CAB，而且马上就展开了测试，通过测试，我发现这一款工具在各版本浏览器的兼容性表现还是不错的，至于功能方面，我需要的他都提供了，而且额外的功能也是很多的，足够我们开发使用了。对了，不得不提的是，他对浏览器安装 ActiveX 组件还提供了另外一种方法，首先检测有没有安装插件，未检测到插件时，自动提示，并给出下载插件的地址，这里的插件使用的是 exe 格式的，这样就避免了浏览器安全设置的问题。
组件
组件名称：Lodop（提供下载）
需要引入的文件：lodop.cab（自己制作的）、LodopFuncs.js（必须的）、install_lodop32.exe（可选的，官方提供的exe格式插件）
需要在页面中加入对象引用
点击安装之后，浏览器就会自动的安装，然后就可以看到下面的提示了。
实现
首先是打印功能
html 代码
<span style="font-family:Microsoft YaHei;font-size:12px;"><html>
<head>
<title>测试Web页面打印功能</title>
</head>
<style>
.title
{
font-family: Arial, Vernada, Tahoma, sans-serif;
font-size: 30px;
color: #00008B;
background-color: White;
text-decoration: underline
}
.normal
{
font-family: Arial, Vernada, Tahoma, Helvetica, sans-serif;
font-size: 14px;
color: #444444;
text-decoration: none;
line-height: 180%;
}
#page1 div
{
font-size: 12px;font-family:Arial;
}
.tab1{border:solid 1px #bbd4e8;}
.tab1 td,th {border:solid 1px #bbd4e8;font-size: 12px;font-family:Arial;line-height:21px;text-align:center}
.tab1 td.tdnumber{text-align:right}
.tab1 #lastPageFooter td,.tab1 #everyPageFooter td{text-align:left}
.tab1 .green {color:#090}
.tab1 .red{color:red}
#myEveryFooter,#myLastFooter{display:none;color:#0066cc;font-weight:700;background-color:#e8f2fe}
span.src{font-size:9pt;margin-left:100px;}
</style>
<object classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" codebase="lodop.cab#version=5,0,5,7" width=200 height=50 >
</object><br/>
<body>
<input type="button" value="打印预览" onClick="prn1_preview();">
<input type="button" value="直接打印" onClick="prn1_print();">
<input type="button" value="选择打印机" onClick="prn1_printA();">
<div id="form1" style="position:relative;width:227mm;height:80mm" autoBreakTable='dt_1'>
<table id="dt1" class="tab1" cellSpacing="0" cellPadding="0" style='border-collapse:collapse;width:683px;'
headerRows='2' everyFooter='myEveryFooter' lastFooter='myLastFooter'>
<caption style='font-size:36px;height:60px;font-family:Microsoft YaHei;color:#a7c0dc' class='first-only'>股票投资营收明细
</caption>
<thead class="h101">
<tr>
<th style="padding: 0px; width: 32px; white-space: nowrap;" rowSpan="2">序号</th>
<th style="padding: 0px; width: 62px; white-space: nowrap;" rowSpan="2"><a hideFocus="true" style="padding: 0px;"
href="#" target="_self">股票代码</a></th>
<th style="padding: 0px; width: 65px; white-space: nowrap;" rowSpan="2">股票简称</th>
<th style="padding: 0px; width: 70px; white-space: nowrap;" rowSpan="2">相关资料</th>
<th style="padding: 0px; width: 58px;" rowSpan="2"><a hideFocus="true" style="padding: 0px;" href="#"
target="_self">每股收<br>益(元)</a></th>
<th style="padding: 0px; width: 196px;" colSpan="3">营业收入</th>
<th style="padding: 0px; width: 193px;" colSpan="3">净利润</th>
</tr>
<tr>
<th style="padding: 0px; width: 70px;"><a hideFocus="true" style="padding: 0px;" href="#" target="_self">营业收入<br>(万元)</a>
</th>
<th style="padding: 0px; width: 62px;"><a hideFocus="true" style="padding: 0px;" href="#" target="_self">同比增长<br>(%)</a>
</th>
<th style="padding: 0px; width: 62px;"><a hideFocus="true" style="padding: 0px;" href="#" target="_self">季度环比<br>增长(%)</a>
</th>
<th style="padding: 0px; width: 66px;"><a hideFocus="true" style="padding: 0px;" href="#" target="_self">净利润<br>(万元)</a>
</th>
<th style="padding: 0px; width: 62px;"><a hideFocus="true" style="padding: 0px;" href="#" target="_self">同比增长<br>(%)</a>
</th>
<th style="padding: 0px; width: 62px;"><a hideFocus="true" style="padding: 0px;" href="#" target="_self">季度环比<br>增长(%)</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><a href="#">300184</a></td>
<td><a href="#">力源信息</a></td>
<td>
<nobr> <a style="color: rgb(255, 0, 0);" href="#">详细</a> <a href="#">股吧</a>
</nobr>
<td class="tdnumber"><span>0.0600</span></td>
<td class="tdnumber"><span>7225.38</span></td>
<td class="tdnumber"><span class="red">15.69</span></td>
<td class="tdnumber"><span class="green">-10.65</span></td>
<td class="tdnumber"><span>563.83</span></td>
<td class="tdnumber"><span class="red">79.25</span></td>
<td class="tdnumber"><span class="red">90.00</span></td>
</tr>
<tr class="odd">
<td>2</td>
<td><a href="#">300094</a></td>
<td><a href="#">国联水产</a></td>
<td>
<nobr> <a style="color: rgb(255, 0, 0);" href="#">详细</a> <a href="#">股吧</a>
</nobr>
<td class="tdnumber"><span>-0.0200</span></td>
<td class="tdnumber"><span>38563.77</span></td>
<td class="tdnumber"><span class="red">57.53</span></td>
<td class="tdnumber"><span class="green">-12.89</span></td>
<td class="tdnumber"><span>-871.34</span></td>
<td class="tdnumber"><span class="red">70.47</span></td>
<td class="tdnumber"><span class="red">93.48</span></td>
</tr>
</tbody>
</table>
</div>
</body>
</html></span>
js 代码
<span style="font-family:Microsoft YaHei;font-size:12px;"><script type="text/javascript" src="LodopFuncs.js"></script>
<script type="text/javascript">
var LODOP; //声明为全局变量
// 打印预览
function prn1_preview() {
CreateOneFormPage();
LODOP.PREVIEW();
};
// 直接打印
function prn1_print() {
CreateOneFormPage();
LODOP.PRINT();
};
// 选择打印机
function prn1_printA() {
CreateOneFormPage();
LODOP.PRINTA();
};
// 创建打印页面
function CreateOneFormPage(){
LODOP=getLodop();
LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_表单一");
LODOP.SET_PRINT_STYLE("FontSize",18);
LODOP.SET_PRINT_STYLE("Bold",1);
LODOP.ADD_PRINT_HTM(10,20,500,5000,document.getElementById("form1").innerHTML);
};
</script></span>
效果图
点击，打印预览之后，就会出现下面的效果：
当然，你还可以选择打印机，在打印预览里边也可以进入这个页面，只需要点击设置即可。
然后是保存功能
html 代码相同，这里就不再重复贴了
结束语
怎么样，很简单吧！web 页面打印指定内容其实就这么简单。只要找对好的工具，什么都不是事！