JS 列印方法小結
JS 實現列印網頁中的部分內容:
<script language=javascript> function doPrint() { bdhtml=window.document.body.innerHTML; //獲取當前頁的HTML程式碼 sprnstr="<!--startprint-->"; //設定列印開始區域 eprnstr="<!--endprint-->"; //設定列印結束區域 prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); //從開始程式碼向後取html prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); //從結束程式碼向前取html window.document.body.innerHTML=prnhtml; window.print(); } </script>
<!--startprint--> <!--endprint--> 分別為需要列印內容的起始和終止位置;
在列印的button下直接呼叫doPrint()方法即可實現列印。
不過此方法的列印為在本頁面開啟列印預覽進行列印的,可能不適用於某些網站的需求。不過此方法可以作為基礎,在其上改進。
ie自帶的有Active控制元件,但火狐不支援。使用的是js操作dom方法對窗體指定標記內文字進行列印,所以使用時需要定義相關的標籤及其樣式(文字大小、字型之類)。
<script type="text/javascript"> ///*********************** ///列印指定區域頁面 ///說明:obj–通過getElementById或其它方式獲取標籤標識,列印此obj內的文字 function startPrint(obj) { var oWin=window.open("","_blank"); var strPrint="<h4 style='font-size:18px; text-align:center;'>列印預覽區</h4>\n"; strPrint=strPrint + "<script type=\"text/javascript\">\n"; strPrint=strPrint + "function printWin()\n"; strPrint=strPrint + "{"; strPrint=strPrint + "var oWin=window.open(\"\",\"_blank\");\n"; strPrint=strPrint + "oWin.document.write(document.getElementById(\"content\").innerHTML);\n"; strPrint=strPrint + "oWin.focus();\n"; strPrint=strPrint + "oWin.document.close();\n"; strPrint=strPrint + "oWin.print()\n"; strPrint=strPrint + "oWin.close()\n"; strPrint=strPrint + "}\n"; strPrint=strPrint + "<\/script>\n"; strPrint=strPrint + "<hr size='1′ />\n"; strPrint=strPrint + "<div id=\"content\">\n"; strPrint=strPrint + obj.innerHTML + "\n"; strPrint=strPrint + "</div>\n"; strPrint=strPrint + "<hr size='1′ />\n"; strPrint=strPrint + "<div style='text-align:center'><button onclick='printWin()' style='padding-left:4px;padding-right:4px;'>打 印</button><button onclick='window.opener=null;window.close();' style='padding-left:4px;padding-right:4px;'>關 閉</button></div>\n"; oWin.document.write(strPrint); oWin.focus(); oWin.document.close(); } </script>
<button id="btnPrint" onclick="startPrint(document.getElementById('content'))">列印內容</button> <div id="content"> <div style="font-size:12px;color:#333;"> 這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容這裡是列印內容 </div> </div>
這種方法可以新開啟列印預覽頁面再進行列印。至少比較適合我
我將以上兩種方法糅合到一起,實現在新視窗展示部分網頁內容的列印預覽頁面。
function doPrint() { var oWin=window.open("","_blank"); bdhtml=window.document.body.innerHTML; sprnstr="<!--startprint-->"; eprnstr="<!--endprint-->"; prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); oWin.document.write(prnhtml); oWin.focus(); oWin.document.close(); oWin.print(); oWin.close(); }
還有其他的方法,本人沒有嘗試過,不過先放於此,備用。
頁尾和頁首 橫向和縱向之分怎麼辦? 就是用到列印預覽,因為它裡面有設定
這時必須引用IE的一個控制元件"WebBrowser"
在頁面裡引用:
<object id="WebBrowser" width=0 height=0 classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2">
</object>
其控制元件方法:
WebBrowser.ExecWB(1,1) 開啟 WebBrowser.ExecWB(2,1) 關閉現在所有的IE視窗,並開啟一個新視窗 WebBrowser.ExecWB(4,1) 儲存網頁 WebBrowser.ExecWB(6,1) 列印 WebBrowser.ExecWB(7,1) 列印預覽 WebBrowser.ExecWB(8,1) 列印頁面設定 WebBrowser.ExecWB(10,1) 檢視頁面屬性 WebBrowser.ExecWB(15,1) 好像是撤銷,有待確認 WebBrowser.ExecWB(17,1) 全選 WebBrowser.ExecWB(22,1) 重新整理 WebBrowser.ExecWB(45,1) 關閉窗體無提示
示例:
<object id="WebBrowser" width="0" height="0" classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2">
列印測試
<input type="button" onclick="WebBrowser.ExecWB(7,1)" value="列印預覽">
隨便用個文字檔案複製貼上~改字尾名~
ie執行~點預覽~設定列印~列印~OK
然後再把其考到專案裡~比如aspx裡
同樣執行,點預覽~
咦~怎麼出現ie安全警告"internet explorer"已阻止此站點用不安全方式使用ActiveX控制元件"
這時就要改ie的安全設定了(如果沒裝補丁就沒事~那是你"rp"好,不一定客戶和其他的人的"rp"和你一樣好)
操作:
主選單"工具"——Internet選項——安全——自定義級別, 將"安全設定"中"對沒有標記為安全的ActiveX"控制元件進行初始化和指令碼執行由"禁用"改為"啟用"
另一種方法,"工具" "Internet選項" "受信任的站點(可信站點)""站點",然後填入網址即可,如果這個網站不是以https:連線的把下面"對該區域中的所有站點要求伺服器驗證(https:)"前面的勾去掉即可。
(如果是區域網:那就是 "工具" "Internet選項" "本地Internet" "高階")
(無線網貌似不是區域網的)
推薦第二種~
萬事俱備~ok了~
列印方法集(沒有一一測試):
-------------------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""><script> var hkey_root,hkey_path,hkey_key hkey_root="HKEY_CURRENT_USER" hkey_path="file://software//Microsoft//Internet Explorer\\PageSetup\\" //設定網頁列印的頁首頁尾為空 function pagesetup_null(){ try{ var RegWsh = new ActiveXObject("WScript.Shell") hkey_key="header" RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"") hkey_key="footer" RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"") }catch(e){} } //設定網頁列印的頁首頁尾為預設值 function pagesetup_default(){ try{ var RegWsh = new ActiveXObject("WScript.Shell") hkey_key="header" RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"&w&b頁碼,&p/&P") hkey_key="footer" RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"&u&b&d") }catch(e){} } function setdivhidden(id){//把指定id以外的層統統隱藏 var divs=document.getElementsByTagName("DIV"); for(var i=0;i<divs.length;i++) { if(divs.item(i).id!=id) divs.item(i).style.display="none"; } } function setdivvisible(id){//把指定id以外的層統統顯示 var divs=document.getElementsByTagName("DIV"); for(var i=0;i<divs.length;i++) { if(divs.item(i).id!=id) divs.item(i).style.display="block"; } } function printpr() //預覽函式 { pagesetup_null();//預覽之前去掉頁首,頁尾 setdivhidden("div1");//列印之前先隱藏不想列印輸出的元素 var WebBrowser = '<OBJECT ID="WebBrowser1" WIDTH=0 HEIGHT=0 CLASSID="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>'; document.body.insertAdjacentHTML('beforeEnd', WebBrowser);//在body標籤內加入html(WebBrowser activeX控制元件) WebBrowser1.ExecWB(7, 1);//列印預覽 WebBrowser1.outerHTML = "";//從程式碼中清除插入的html程式碼 pagesetup_default();//預覽結束後頁首頁尾恢復預設值 setdivvisible("div1");//預覽結束後顯示按鈕 } function print() //列印函式 { pagesetup_null();//列印之前去掉頁首,頁尾 setdivhidden("div1"); //列印之前先隱藏不想列印輸出的元素 var WebBrowser = '<OBJECT ID="WebBrowser1" WIDTH=0 HEIGHT=0 CLASSID="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>'; document.body.insertAdjacentHTML('beforeEnd', WebBrowser);//在body標籤內加入html(WebBrowser activeX控制元件) WebBrowser1.ExecWB(6, 1);//列印 WebBrowser1.outerHTML = "";//從程式碼中清除插入的html程式碼 pagesetup_default();//列印結束後頁首頁尾恢復預設值 setdivvisible("div1");//列印結束後顯示按鈕 } </script> <body> <div id=div0> <input type=button value=列印預覽 onclick="printpr()"> <input type=button onClick="print()" value="列印"> 表格一: </div> <div id=div1> <table> <tr><td>1111</td><td>1111</td><td>1111</td></tr> <tr><td>1111</td><td>1111</td><td>1111</td></tr> <tr><td>1111</td><td>1111</td><td>1111</td></tr> </table> </div> </body> </HTML>
相關推薦
JS 列印方法小結
JS 實現列印網頁中的部分內容: <script language=javascript> function doPrint() { bdhtml=window.document.body.innerHTML; //獲取當前頁的HTML程式碼
JS Window方法小結
返回使用者輸入的字串,當單擊“取消”按鈕時,返回null值。6. setTimeout方法 語法格式: window.setTimeout(程式碼字元表示式,毫秒數) 功能:定時設定,當到了指定的毫秒數後,自動執行程式碼字元表示式。7. clearTimeout方法 語法格式: window.clear
js中設置元素class的三種方法小結
utf-8 nbsp brush firefox body charset utf 代碼 title 一、el.setAttribute(‘class‘,‘abc‘); 復制代碼 代碼如下: <!DOCTYPE HTML> <HTML>
js判斷是否為陣列的方法小結
一.判斷是否為陣列的方法1. typeof首先我們會想到的是使用typeof來檢測資料型別,但是對於Function, String, Number, Undefined等這幾種基本型別來說,使用typeof來檢測都可以檢測到,比如程式碼如下:function test(){
js String物件中常用方法小結(字串操作)
1、charCodeAt方法返回一個整數,代表指定位置字元的Unicode編碼。 strObj.charCodeAt(index) 說明: index將被處理字元的從零開始計數的編號。有效值為0到字串長度減1的數字。 如果指定位置沒有字元,將返回NaN。 例如: var s
使用js獲取QueryString的方法小結
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://ww
javascript 列印內容方法小結
一般列印就用window.print();就OK了 但是一般都是選擇性列印所以會呼叫方法: function preview() { bdhtml=window.document.body.innerHTML; sprnstr="<!--startprin
js方法小結
11.一個瀏覽器視窗中的DOM順序是:window->(navigator,screen,history,location,document) 12 .一個小寫轉大寫的JS: document.getElementById("output").value = document.getElement
fullpage.js使用方法
asc 分享 () att 後來 log itl ttr png 了解: 【1】之所以叫做fullpage,是因為它可以全屏滾動,擁有強大的功能。 【2】它依賴於jQuery庫,所以在使用fullpage之前先引入jQuery庫。 使用: 【1】<link rel="
【轉】安裝Vue.js的方法
環境搭建 node.js 初始化 其它 cnpm lan commonjs pos 重量級框架 安裝vue.js的方法 一、簡介 Vue.js 是什麽 Vue.js(讀音 /vju?/, 類似於 view) 是一套構建用戶界面的 漸進式框架。與其他重量級框架不同的是
安裝vue.js的方法
targe ejs 國內 sta 顯示 代碼 文件 我們 描述 一、簡介 Vue.js 是什麽 Vue.js(讀音 /vju?/, 類似於 view) 是一套構建用戶界面的 漸進式框架。與其他重量級框架不同的是,Vue 采用自底向上增量開發的設計。Vue 的核心庫只關
Js基本方法
平方根 match 如果 pow ring mon 小寫 string 整數 Math.random() 日期時間函數(需要用變量調用):var b = new Date(); //獲取當前時間b.getTime() //獲取時間戳b.getFullYear() //獲取年
Android ViewPager使用方法小結
nco col tile 情況 谷歌 obj wpa sla 釋放 android-support-v4.jar 是谷歌提供給我們的一個兼容低版本安卓設備的軟件包,裏面包囊了只有在 Android 3.0 以上可用的API。而 ViewPager 就是其中之一。利用它,我們
java中獲取各種上下文路徑的方法小結
取出 resin pri nbsp ont row span user ade 一、獲得都是當前運行文件在服務器上的絕對路徑在servlet裏用:this.getServletContext().getRealPath(); 在struts用:this.getServlet
js tool 方法之刪除數組指定項
array數組 它的 rem 進行 efi 對象 判斷 define alt 最近又開始寫博文了,還是在自己的本地項目上做一些小的方法案例. 之前擼代碼的時候總是遇到刪除數組裏某個元素的問題,JS沒提供便捷的方法,只能自己寫個循環處理,所幸自己寫個方法,以後博客項目裏要用到
Android PopupWindow使用方法小結
ring hub tps enter offset [] 註意 外部 現在 前幾天要用到PopupWindow,一時竟想不起來怎麽用,趕緊上網查了查,自己寫了個demo,並在此記錄一下PopupWindow的用法。 使用場景 PopupWindow,顧名思義,就是彈窗,在很
html 手機端click 事件延遲問題(fastclick.js使用方法)
cat 設計 fun 等待時間 get click tla 調用 span 下載地址: fastclick.js 為什麽存在延遲? 從點擊屏幕上的元素到觸發元素的 click 事件,移動瀏覽器會有大約 300 毫秒的等待時間。為什麽這麽設計呢? 因為它想看看
js,vue.js一些方法的總結
nbsp 進行 for submit 多個 targe tag spl 修飾 push() 可向數組的末尾添加一個或多個元素 pop() 刪除並返回數組的最後一個元素 shift()刪除並返回數組的第一個元素 unshift() 添加並返回數組的第一個元素 sort()對數
一種簡單的生產環境部署Node.js程序方法
set process 一次 ann 來安 環境配置 load 修改 evel 最近在部署Node.js程序時,寫了段簡單的腳本,發覺還挺簡單的,忍不住想與大家分享。 配置文件 首先,本地測試環境和生產環境的數據庫連接這些配置信息是不一樣的,需要將其分開為兩個文件存儲
緩沖加載圖片的 jQuery 插件 lazyload.js 使用方法詳解
java ajax jpg ide javascrip ava ade src doc 在寫代碼的時候,經常會用到懶加載的模式,以前是通過window.onload的模式去加載,但是圖片很多或者用ajax請求的時候,就會很麻煩,現在用lazyload的模式加載方便很多