JS达到Web指定保存的和打印功能的内容

JS达到Web指定保存的和打印功能的内容

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

背景


首先,说说文章的背景。近期手中的一个项目,因为需求中要求提供Web界面的打印功能。当然假设没有打印机,还能够提供保存到本地。项目组长把这个“小任务”分给了我。本着努力为组长分忧解难的思想,领了任务之后,就立即開始了工作。


问题


刚開始的时候。组长给了一个工具(jatoolsprinter)让我研究。我用了一个多小时的时间,做出了一个简单的Demo,然后就是各种的測试,因为 web 打印须要浏览器安装 ActiveX 组件。在随后的測试中,我用了几款浏览器。甚至把安全级别都调到了最低的要求, ActiveX 组件的安装总是不成功。之后的几个小时也在一直调这个问题。

最终,它打破了我耐心的底线,就这样被我“无情”的给抛弃了。



新大陆


吃过晚饭回来之后,我就開始走上了寻找新大陆的征途中。还好。我的运气不错,web 打印这个功能还是非经常常使用的。

非常快我就有了一个新的解决方式。在简单的了解了一下官方的说明之后,找了一个文档看了看。这次我吸取了上次的教训,我先把官方提供的插件制作成了 CAB。并且立即就展开了測试,通过測试。我发现这一款工具在各版本号浏览器的兼容性表现还是不错的,至于功能方面,我须要的他都提供了,并且额外的功能也是非常多的。足够我们开发使用了。对了。不得不提的是。他对浏览器安装 ActiveX 组件还提供了第二种方法,首先检測有没有安装插件。未检測到插件时,自己主动提示,并给出下载插件的地址,这里的插件使用的是 exe 格式的。这样就避免了浏览器安全设置的问题。



组件

  • 组件名称:Lodop(提供下载)
  • 须要引入的文件:lodop.cab(自己制作的)、LodopFuncs.js(必须的)、install_lodop32.exe(可选的,官方提供的exe格式插件)
  • 须要在页面中增加对象引用
JS达到Web指定保存的和打印功能的内容


点击安装之后,浏览器就会自己主动的安装,然后就能够看到以下的提示了。

JS达到Web指定保存的和打印功能的内容



实现

  • 首先是打印功能

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>



效果图


JS达到Web指定保存的和打印功能的内容


点击。打印预览之后。就会出现以下的效果:

JS达到Web指定保存的和打印功能的内容


当然。你还能够选择打印机,在打印预览里边也能够进入这个页面。仅仅须要点击设置就可以。

JS达到Web指定保存的和打印功能的内容


  • 然后是保存功能
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>



效果图


JS达到Web指定保存的和打印功能的内容


点击“导出为Word”之后,会出现一个与ActiveX控件交互的提示,点击“是”之后。就能够保存到word中了。

JS达到Web指定保存的和打印功能的内容


结束语


怎么样,非常easy吧!web 页面打印指定内容事实上就这么简单。

仅仅要找对好的工具,什么都不它是一个事!

版权声明:本文博主原创文章,博客,未经同意不得转载。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/117010.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Windows 下Maven安装配置(本地仓库配置)[通俗易懂]

    Windows 下Maven安装配置(本地仓库配置)[通俗易懂]一、下载mavenmaven官网:http://maven.apache.org/下载下来也就是一个压缩文件,解压。我下载的是3.5.2版本,解压之后如下:路径为:D:\ProgramFiles\apache-maven-3.5.2二、配置环境变量添加自定义变量:MAVEN_HOME值为刚才的解压路径:D:\ProgramFiles\apache-maven-3.5.2。MAVEN_

  • zencart模板修改的地方

    zencart模板修改的地方zencart模闆修改的地方,在修改前一定要備份數據庫和程序文件.1:新聞頁上的zencartnews,如何修改zencart,如圖:修改文件news.php,位置:includes\languages\english2,修改産品頁上面滾動圖片的高度和寬度:修改文件stylesheet_scrollpic.css,位置:includes\templates\模闆名\css在修改不讓自動…

  • C语言文件打开方式简介

    C语言文件打开方式简介1、“r”以只读方式打开一个文件;2、“w”以只写方式打开一个文件;3、“a”打开一个文件追加;4、“rb”以只读方式打开一个二进制文件;5、“rw”以只写方式打开一个二进制文件;6、“ra”打开一个二进制文件追加;7、”r+”以读写方式打开一个文件;8、“w+”以读写方式建立一个文件;9、“a+”以读写方式打开一个文件追加;10、“rb+”以读写方式打开一个二

  • python进阶(15)多线程与多进程效率测试

    python进阶(15)多线程与多进程效率测试前言在Python中,计算密集型任务适用于多进程,IO密集型任务适用于多线程正常来讲,多线程要比多进程效率更高,因为进程间的切换需要的资源和开销更大,而线程相对更小,但是我们使用的Python大多

  • 适配器简单介绍

    适配器简单介绍适配器的作用如下图:1、这种通信适配器上面装有处理器和存储器(RAM和ROM),硬件地址固化在适配器的ROM中,软件地址(IP地址)在计算机的存储器中。2、适配器在接收和发送各种帧时,不使用计算机的CPU,此时计算机的CPU可以处理其他任务。3、当适配器收到有差错的帧时,就把帧直接丢弃不通知计算机。4、当计算机手收到正确的帧时,就使用中断通知计算机,并交付协议栈中的网络层。5、当计算机发送IP数据…

  • ubuntu18.04安装pycharm记录「建议收藏」

    ubuntu18.04安装pycharm记录「建议收藏」1.进官网下载pycharm安装包https://www.jetbrains.com/pycharm/download/#section=linux建议选择社区免费版Community,这样就省去激活的过程2.点击下载,然后等待。下载好后右键安装包,解压提取,如下图,解压出了pycharm-community-2019.3.4文件夹3.进入这个pycharm-communi…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号