用javascript源碼打印頁面

在用javascript源碼打印頁面很簡單只需要使用window.print();一句代碼就好了,但是在預覽時你就會發現這有多坑。
頁面上居然有網址,有<title></title>標籤裏的東西。
我今天終於發現了一個好辦法:
1.打印時既然一定要顯示這些東西,我們隱藏不了,那不如換一種思路,想像一下如果title標籤裏面是空白的,再大膽的想象一下,網址也是空白的,那麼打印出來的頁面不就漂亮了。
空白?blank?一提到這個詞我大腦的第一反應就是a鏈接時打開的新頁面,不妨我們也試一下這種方法:
我們可以把需要打印的東東放在id=div1的標籤裏,然後我們寫一個打印函數:

function doPrint() {
  window.print();
  var win = window.open('');
  win.document.write(oCon.outerHTML);
  win.print();
  win.close();
}
通過實踐,發現這個問題就被我們如此華麗麗的解決了!!
2.當然爲了更加美觀,我們也可以在樣式裏添加如下代碼:

@media print {
  selector{  //此處寫你需要打印時實現的樣式。
  ......
  }
}
3.當然了也有的人是隻想打印頁面中的一部分,那也可通過如下代碼實現:
<!--startprint-->
.......
需要打印的代碼
....
<!--endprint-->

js部分

function doPrint() {
bdhtml=window.document.body.innerHTML; //獲得body標籤內的全部html代碼
sprnstr="<!--startprint-->"; //聲明一個字符串,用於表示打印的起始位置
eprnstr="<!--endprint-->"; //標示打印的結束位置
prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); //查找打印的起始字符串並加上17,因爲<!--startprint-->的長度爲17,所以要加17,這樣打印時不會把標示打印出來
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); //和上邊的意思差不多
window.document.body.innerHTML=prnhtml; //通過window對象得到body對象並將當前窗體的內容設置爲要打印起始標示符和結束標示符之間的內容,這樣打印出來就只有需要的部分,而其他沒用的信息都不會有的
window.print();
}
ps:比如我要打印的是<div>hello</div>,則它與標記標籤的寫法是<!--startprint--><div>hello</div><!--endprint-->,中間不能有空格,因爲上面運行代碼時用字符串的剪切過程,可能會出錯。

在用javascript源碼打印頁面很簡單只需要使用window.print();一句代碼就好了,但是在預覽時你就會發現這有多坑。
頁面上居然有網址,有<title></title>標籤裏的東西。
我今天終於發現了一個好辦法:
1.打印時既然一定要顯示這些東西,我們隱藏不了,那不如換一種思路,想像一下如果title標籤裏面是空白的,再大膽的想象一下,網址也是空白的,那麼打印出來的頁面不就漂亮了。
空白?blank?一提到這個詞我大腦的第一反應就是a鏈接時打開的新頁面,不妨我們也試一下這種方法:
我們可以把需要打印的東東放在id=div1的標籤裏,然後我們寫一個打印函數:

function doPrint() {
  window.print();
  var win = window.open('');
  win.document.write(oCon.outerHTML);
  win.print();
  win.close();
}
通過實踐,發現這個問題就被我們如此華麗麗的解決了!!
2.當然爲了更加美觀,我們也可以在樣式裏添加如下代碼:

@media print {
  selector{  //此處寫你需要打印時實現的樣式。
  ......
  }
}
3.當然了也有的人是隻想打印頁面中的一部分,那也可通過如下代碼實現:
<!--startprint-->
.......
需要打印的代碼
....
<!--endprint-->

js部分

function doPrint() {
bdhtml=window.document.body.innerHTML; //獲得body標籤內的全部html代碼
sprnstr="<!--startprint-->"; //聲明一個字符串,用於表示打印的起始位置
eprnstr="<!--endprint-->"; //標示打印的結束位置
prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); //查找打印的起始字符串並加上17,因爲<!--startprint-->的長度爲17,所以要加17,這樣打印時不會把標示打印出來
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); //和上邊的意思差不多
window.document.body.innerHTML=prnhtml; //通過window對象得到body對象並將當前窗體的內容設置爲要打印起始標示符和結束標示符之間的內容,這樣打印出來就只有需要的部分,而其他沒用的信息都不會有的
window.print();
}
ps:比如我要打印的是<div>hello</div>,則它與標記標籤的寫法是<!--startprint--><div>hello</div><!--endprint-->,中間不能有空格,因爲上面運行代碼時用字符串的剪切過程,可能會出錯。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章