JS實現Web中指定內容的保存與打印功能
背景
首先，說說文章的背景。最近手中的一個項目，因爲需求中要求提供Web界面的打印功能，固然若是沒有打印機，還能夠提供保存到本地。項目組長把這個「小任務」分給了我。本着努力爲組長分憂解難的思想，領了任務以後，就立刻開始了工做。javascript
問題
剛開始的時候，組長給了一個工具（jatoolsprinter）讓我研究，我用了一個多小時的時間，作出了一個簡單的Demo，而後就是各類的測試，因爲 web 打印須要瀏覽器安裝 ActiveX 組件，在隨後的測試中，我用了幾款瀏覽器，甚至把安全級別都調到了最低的要求， ActiveX 組件的安裝老是不成功，以後的幾個小時也在一直調這個問題。終於，它打破了我耐心的底線，就這樣被我「無情」的給拋棄了。html
新大陸
吃過晚飯回來以後，我就開始走上了尋找新大陸的征途中，還好，個人運氣不錯，web 打印這個功能仍是很經常使用的。很快我就有了一個新的解決方案。在簡單的瞭解了一下官方的說明以後，找了一個文檔看了看，此次我吸收了上次的教訓，我先把官方提供的插件製做成了 CAB，並且立刻就展開了測試，經過測試，我發現這一款工具在各版本瀏覽器的兼容性表現仍是不錯的，至於功能方面，我須要的他都提供了，並且額外的功能也是不少的，足夠咱們開發使用了。對了，不得不提的是，他對瀏覽器安裝 ActiveX 組件還提供了另一種方法，首先檢測有沒有安裝插件，未檢測到插件時，自動提示，並給出下載插件的地址，這裏的插件使用的是 exe 格式的，這樣就避免了瀏覽器安全設置的問題。java
組件
組件名稱：Lodop（提供下載）web
須要引入的文件：lodop.cab（本身製做的）、LodopFuncs.js（必須的）、install_lodop32.exe（可選的，官方提供的exe格式插件）瀏覽器
須要在頁面中加入對象引用安全
點擊安裝以後，瀏覽器就會自動的安裝，而後就能夠看到下面的提示了。app
實現
首先是打印功能ide
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 頁面打印指定內容其實就這麼簡單。只要找對好的工具，什麼都不是事！
相關文章
- 1. JS實現網頁選取截屏 保存+打印 功能(轉)
- 2. web頁面實現指定區域打印功能
- 3. window.print()打印網頁中指定內容
- 4. Web頁面實現打印功能
- 5. web 實現分頁打印功能
- 6. HttpPrinter實現web打印功能
- 7. js中print()打印網頁指定區域內容
- 8. js打印功能
- 9. UE4中實現截圖功能並保存到指定路徑
- 10. React實現瀏覽器打印指定內容
- 更多相關文章...
- • 現實生活中的 XML - XML 教程
- • 使用Redis和Lua的原子性實現搶紅包功能 - 紅包項目實戰
- • Docker容器實戰(六) - 容器的隔離與限制
- • ☆基於Java Instrument的Agent實現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章