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>
<tr>
<td>3</td>
<td><a href="#">300268</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.0360</span></td>
<td class="tdnumber"><span>7328.07</span></td>
<td class="tdnumber"><span class="red">54.57</span></td>
<td class="tdnumber"><span class="green">-36.38</span></td>
<td class="tdnumber"><span>-477.11</span></td>
<td class="tdnumber"><span class="green">-50.05</span></td>
<td class="tdnumber"><span class="green">-92.22</span></td>
</tr>
<tr class="odd">
<td>4</td>
<td><a href="#">300277</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.0074</span></td>
<td class="tdnumber"><span>6362.02</span></td>
<td class="tdnumber"><span class="red">46.90</span></td>
<td class="tdnumber"><span class="green">-14.14</span></td>
<td class="tdnumber"><span>98.74</span></td>
<td class="tdnumber"><span class="red">120.41</span></td>
<td class="tdnumber"><span class="green">-86.32</span></td>
</tr>
<tr>
<td>5</td>
<td><a href="#">300340</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>8960.76</span></td>
<td class="tdnumber"><span class="green">-43.65</span></td>
<td class="tdnumber"><span class="green">-25.43</span></td>
<td class="tdnumber"><span>320.76</span></td>
<td class="tdnumber"><span class="green">-84.28</span></td>
<td class="tdnumber"><span class="red">147.56</span></td>
</tr>
<tr class="odd">
<td>6</td>
<td><a href="#">300002</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.2500</span></td>
<td class="tdnumber"><span>34845.30</span></td>
<td class="tdnumber"><span class="red">43.44</span></td>
<td class="tdnumber"><span class="green">-18.22</span></td>
<td class="tdnumber"><span>9744.63</span></td>
<td class="tdnumber"><span class="red">73.25</span></td>
<td class="tdnumber"><span class="green">-26.15</span></td>
</tr>
<tr>
<td>7</td>
<td><a href="#">300063</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.0362</span></td>
<td class="tdnumber"><span>9355.08</span></td>
<td class="tdnumber"><span class="red">26.80</span></td>
<td class="tdnumber"><span class="green">-6.40</span></td>
<td class="tdnumber"><span>363.48</span></td>
<td class="tdnumber"><span class="green">-1.56</span></td>
<td class="tdnumber"><span class="red">94.76</span></td>
</tr>
<tr class="odd">
<td>8</td>
<td><a href="#">300140</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.0300</span></td>
<td class="tdnumber"><span>3320.54</span></td>
<td class="tdnumber"><span class="green">-31.59</span></td>
<td class="tdnumber"><span class="green">-28.35</span></td>
<td class="tdnumber"><span>379.53</span></td>
<td class="tdnumber"><span class="green">-167.03</span></td>
<td class="tdnumber"><span class="green">-41.75</span></td>
</tr>
<tr>
<td>9</td>
<td><a href="#">300142</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.1400</span></td>
<td class="tdnumber"><span>9400.33</span></td>
<td class="tdnumber"><span class="red">69.34</span></td>
<td class="tdnumber"><span class="green">-49.37</span></td>
<td class="tdnumber"><span>2585.85</span></td>
<td class="tdnumber"><span class="red">10.69</span></td>
<td class="tdnumber"><span class="green">-66.60</span></td>
</tr>
<tr class="odd">
<td>10</td>
<td><a href="#">300161</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>6920.17</span></td>
<td class="tdnumber"><span class="green">-34.03</span></td>
<td class="tdnumber"><span class="green">-60.79</span></td>
<td class="tdnumber"><span>-259.10</span></td>
<td class="tdnumber"><span class="green">-157.82</span></td>
<td class="tdnumber"><span class="red">19.92</span></td>
</tr>
<tr>
<td>11</td>
<td><a href="#">300218</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.0408</span></td>
<td class="tdnumber"><span>24035.55</span></td>
<td class="tdnumber"><span class="green">-4.15</span></td>
<td class="tdnumber"><span class="green">-19.03</span></td>
<td class="tdnumber"><span>861.89</span></td>
<td class="tdnumber"><span class="red">4.25</span></td>
<td class="tdnumber"><span class="green">-5.31</span></td>
</tr>
<tr class="odd">
<td>12</td>
<td><a href="#">300232</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.0400</span></td>
<td class="tdnumber"><span>14773.69</span></td>
<td class="tdnumber"><span class="red">75.61</span></td>
<td class="tdnumber"><span class="green">-25.47</span></td>
<td class="tdnumber"><span>423.65</span></td>
<td class="tdnumber"><span class="red">148.16</span></td>
<td class="tdnumber"><span class="green">-3.03</span></td>
</tr>
<tr>
<td>13</td>
<td><a href="#">300007</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.0500</span></td>
<td class="tdnumber"><span>5670.97</span></td>
<td class="tdnumber"><span class="green">-8.62</span></td>
<td class="tdnumber"><span class="green">-23.81</span></td>
<td class="tdnumber"><span>624.92</span></td>
<td class="tdnumber"><span class="green">-17.08</span></td>
<td class="tdnumber"><span class="green">-49.80</span></td>
</tr>
<tr class="odd">
<td>14</td>
<td><a href="#">300010</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.0210</span></td>
<td class="tdnumber"><span>7268.28</span></td>
<td class="tdnumber"><span class="green">-29.57</span></td>
<td class="tdnumber"><span class="green">-65.22</span></td>
<td class="tdnumber"><span>548.31</span></td>
<td class="tdnumber"><span class="green">-35.56</span></td>
<td class="tdnumber"><span class="green">-67.36</span></td>
</tr>
<tr>
<td>15</td>
<td><a href="#">300013</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>8695.67</span></td>
<td class="tdnumber"><span class="red">22.76</span></td>
<td class="tdnumber"><span class="green">-2.85</span></td>
<td class="tdnumber"><span>536.05</span></td>
<td class="tdnumber"><span class="red">237.79</span></td>
<td class="tdnumber"><span class="red">1681.49</span></td>
</tr>
<tr class="odd">
<td>16</td>
<td><a href="#">300015</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.1100</span></td>
<td class="tdnumber"><span>41337.67</span></td>
<td class="tdnumber"><span class="red">16.59</span></td>
<td class="tdnumber"><span class="green">-1.72</span></td>
<td class="tdnumber"><span>4872.39</span></td>
<td class="tdnumber"><span class="red">2.38</span></td>
<td class="tdnumber"><span class="red">40.29</span></td>
</tr>
<tr>
<td>17</td>
<td><a href="#">300018</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.0500</span></td>
<td class="tdnumber"><span>3872.17</span></td>
<td class="tdnumber"><span class="red">17.86</span></td>
<td class="tdnumber"><span class="green">-53.55</span></td>
<td class="tdnumber"><span>646.25</span></td>
<td class="tdnumber"><span class="green">-23.40</span></td>
<td class="tdnumber"><span class="green">-44.71</span></td>
</tr>
<tr class="odd">
<td>18</td>
<td><a href="#">300021</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>8724.67</span></td>
<td class="tdnumber"><span class="red">18.81</span></td>
<td class="tdnumber"><span class="green">-60.07</span></td>
<td class="tdnumber"><span>458.52</span></td>
<td class="tdnumber"><span class="green">-13.50</span></td>
<td class="tdnumber"><span class="green">-56.93</span></td>
</tr>
<tr>
<td>19</td>
<td><a href="#">300022</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.0115</span></td>
<td class="tdnumber"><span>61165.58</span></td>
<td class="tdnumber"><span class="green">-13.36</span></td>
<td class="tdnumber"><span class="green">-64.11</span></td>
<td class="tdnumber"><span>410.85</span></td>
<td class="tdnumber"><span class="green">-39.14</span></td>
<td class="tdnumber"><span class="red">114.09</span></td>
</tr>
<tr class="odd">
<td>20</td>
<td><a href="#">300024</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.1169</span></td>
<td class="tdnumber"><span>24051.82</span></td>
<td class="tdnumber"><span class="red">4.38</span></td>
<td class="tdnumber"><span class="green">-16.85</span></td>
<td class="tdnumber"><span>3479.12</span></td>
<td class="tdnumber"><span class="red">31.52</span></td>
<td class="tdnumber"><span class="green">-61.57</span></td>
</tr>
<tr>
<td>21</td>
<td><a href="#">300026</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.2500</span></td>
<td class="tdnumber"><span>40097.11</span></td>
<td class="tdnumber"><span class="red">141.46</span></td>
<td class="tdnumber"><span class="green">-6.86</span></td>
<td class="tdnumber"><span>6109.82</span></td>
<td class="tdnumber"><span class="red">67.14</span></td>
<td class="tdnumber"><span class="red">10.78</span></td>
</tr>
<tr class="odd">
<td>22</td>
<td><a href="#">300028</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.0377</span></td>
<td class="tdnumber"><span>13848.97</span></td>
<td class="tdnumber"><span class="red">97.63</span></td>
<td class="tdnumber"><span class="green">-29.50</span></td>
<td class="tdnumber"><span>999.36</span></td>
<td class="tdnumber"><span class="red">10.79</span></td>
<td class="tdnumber"><span class="red">1144.05</span></td>
</tr>
<tr>
<td>23</td>
<td><a href="#">300029</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.0500</span></td>
<td class="tdnumber"><span>11365.73</span></td>
<td class="tdnumber"><span class="red">169.45</span></td>
<td class="tdnumber"><span class="red">2152.89</span></td>
<td class="tdnumber"><span>-1063.03</span></td>
<td class="tdnumber"><span class="red">25.02</span></td>
<td class="tdnumber"><span class="red">97.50</span></td>
</tr>
<tr class="odd">
<td>24</td>
<td><a href="#">300040</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.0300</span></td>
<td class="tdnumber"><span>4224.85</span></td>
<td class="tdnumber"><span class="green">-53.34</span></td>
<td class="tdnumber"><span class="green">-71.61</span></td>
<td class="tdnumber"><span>363.31</span></td>
<td class="tdnumber"><span class="red">35.57</span></td>
<td class="tdnumber"><span class="green">-99.16</span></td>
</tr>
<tr>
<td>25</td>
<td><a href="#">300050</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.0100</span></td>
<td class="tdnumber"><span>7375.58</span></td>
<td class="tdnumber"><span class="green">-14.22</span></td>
<td class="tdnumber"><span class="green">-30.18</span></td>
<td class="tdnumber"><span>137.55</span></td>
<td class="tdnumber"><span class="green">-81.35</span></td>
<td class="tdnumber"><span class="red">114.25</span></td>
</tr>
<tr class="odd">
<td>26</td>
<td><a href="#">300052</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.0300</span></td>
<td class="tdnumber"><span>4342.76</span></td>
<td class="tdnumber"><span class="red">41.35</span></td>
<td class="tdnumber"><span class="green">-24.89</span></td>
<td class="tdnumber"><span>384.77</span></td>
<td class="tdnumber"><span class="red">111.27</span></td>
<td class="tdnumber"><span class="red">9.19</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>
效果图
点击。打印预览之后。就会出现以下的效果：
当然。你还能够选择打印机，在打印预览里边也能够进入这个页面。仅仅须要点击设置就可以。
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaGFwcHlsZWU2Njg4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
- 然后是保存功能
html 代码同样，这里就不再反复贴了
js 代码
<span style="font-family:Microsoft YaHei;font-size:12px;"><script type="text/javascript">
// 导出为Word
function makeWord() {
var word = new ActiveXObject("Word.Application");
// 打开已有模板
// var doc = word.documents.open("");
// 不打开模板直接增加内容
var doc = word.Documents.Add("", 0, 1);
var Range=doc.Range(); var sel = document.body.createTextRange();
sel.moveToElementText(form1); //此处form1是页面上DIV的id
sel.select();
sel.execCommand("Copy");
Range.Paste();
word.Application.Visible = true;
//存放到指定的位置注意路径一定要是“//”不然会报错
doc.saveAs("D://股票投资营收明细.doc");
}
</script></span>
效果图
点击“导出为Word”之后，会出现一个与ActiveX控件交互的提示，点击“是”之后。就能够保存到word中了。
结束语
怎么样，非常easy吧！web 页面打印指定内容事实上就这么简单。
仅仅要找对好的工具，什么都不它是一个事！
版权声明：本文博主原创文章，博客，未经同意不得转载。
JS达到Web指定保存的和打印功能的内容的更多相关文章
- clipboard.js 实现web端---> 复制到剪切板功能
package.json 中: 添加clipboard 依赖 "dependencies": { "vue": "^2.2.2", &quo ...
- web页面实现指定区域打印功能
web页面实现指定区域打印功能 使用CSS,定义一个.noprint的class,将不打印的内容放入这个class内. 详细如下: <style media=print type="t ...
- JS实现网页选取截屏 保存+打印 功能(转)
源码地址: 1.1 确定截图选取范围 用户在开始截图后,需要在页面上选取一个截图范围,并且可以直观的看到,类似如下效果: image 我们的选取范围就是鼠标开始按下的那个点到鼠标拖动然后松开的那个点之 ...
- JS实现Web网页打印功能（IE）
问题描述: JS实现Web网页打印功能 问题解决: 这里主要使用WebBrowser控件的ExeWB在IE中打印功能的实现 WebBrowser介绍: WebBrows ...
- Node.js学习笔记——Node.js开发Web后台服务
一.简介 Node.js 是一个基于Google Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.Node.j ...
- 快速使用node.js进行web开发
首先关于node.js的学习,这里推荐一本比较好的教程,nodejs web开发指南,该书通俗易懂地将node.js语言特性讲解完之后,又从一个项目角度带领读者使用node.js学习web开发.相信这 ...
- Beaglebone Black– 智能家居控制系统 LAS - 网页服务器 Node.js 、Web Service、页面 和 TCP 请求转 UDP 发送
上一篇,纯粹玩 ESP8266,写入了 init.lua 能收发 UDP.这次拿 BBB 开刀,用 BBB host 一个 web server ,用于与用户交互,数据来自 ESP8266 的 UDP ...
- Node.js开发Web后台服务
一.简介 Node.js 是一个基于Google Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.Node.j ...
- 【JS】通过JS实现超市小票打印功能——ActiveX控件
应客户的需求= = ,要在网页端实现打印小票的功能 先来一张打印出的小票效果图(合计明显不对,因为有修改订单功能,请各位忽略) 用什么方法实现呢: 我想应该是有三种吧 1.用第三方的浏览器控件(这个好 ...
随机推荐
- hdu2412（树形dp）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2412 题意:给定一棵关系树 , 从中选择一些点 , 使这些点均不存在亲子关系 , 最多能取多少个点 , ...
- HDU 1016 Prime Ring Problem 题解
Problem Description A ring is compose of n circles as shown in diagram. Put natural number 1, 2, ... ...
- cocos2d-x快乐的做让人快乐的游戏3：cocos-2d 3.x中的物理世界
Cocos2d-x 3.0+ 中全新的封装的物理引擎给了开发人员最大的便捷,你不用再繁琐与各种物理引擎的细节,全然的封装让开发人员能够更快更好的将物理引擎的机制加入�到自己的游戏中,简化的设计是从2. ...
- cocos2d-x ndk adt mac 路径配置
export PATH=/bin:/sbin:/usr/local/mysql/bin export PATH=$PATH:/Applications/MacVim-snapshot-68 expor ...
- myeclipse中，项目上有个叉报错，文件没有错误
同事将他的java项目交接给了我.和平时的交接一样.他把他最新的源码.打成压缩包,发给我. 我解压后.使用myeclipse开发工具.通过导入,将项目导入到我的开发工具中.这个时候有一个问题出现了.在 ...
- 大规模集群管理工具Borg
Google的大规模集群管理工具Borg 概述 Google的Borg系统是一个集群管理工具,在它上面运行着成千上万的job,这些job来自许许多多不同的应用,并且跨越多个集群,而每个集群又由大量的机 ...
- java去全半角空格,trim(), replaceAll(" +",""),replaceAll("\\s*", ""), replaceAll(" | ", "")
JAVA中去掉空格 . String.trim() trim()是去掉首尾空格 .str.replace(" ", ""); 去掉所有空格,包括首尾.中间 St ...
- POJ 2182 Lost Cows（牛排序，线段树）
Language: Default Lost Cows Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 9207 Acce ...
- C++ 中的比較函数
在敲代码的时候,排序是一种和经常使用的算法.在排序中.比較又是当中最经常使用的操作.这里,我们来分析一下C++中的比較问题. 当中,基本数据类型int. float.string等已经提供了默认的比較 ...
- Visual Studio Tips: How to change project namespace
/* Author: Jiangong SUN */ If you want to modify a project's namespace and its physical container na ...