本文目錄一覽：
使用print-js列印當前頁面內容
1.安裝使用
npm install print-js –save
2.在需要列印的頁面導入
import print from ‘print-js’
3.方法
官方地址：
使用Javascript怎樣自動列印頁面
1、js實現（可實現局部列印）
[html] view plain copy
input id=”btnPrint” type=”button” value=”列印” onclick=”javascript:window.print();” /
input id=”btnPrint” type=”button” value=”列印預覽” onclick=preview(1) /
style type=”text/css” media=print
.noprint{display : none }
/style
p class=”noprint”不需要列印的地方/p
script
function preview(oper)
{
if (oper 10)
{
bdhtml=window.document.body.innerHTML;//獲取當前頁的html代碼
sprnstr=”!–startprint”+oper+”–“;//設置列印開始區域
eprnstr=”!–endprint”+oper+”–“;//設置列印結束區域
prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //從開始代碼向後取html
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//從結束代碼向前取html
window.document.body.innerHTML=prnhtml;
window.print();
window.document.body.innerHTML=bdhtml;
} else {
window.print();
}
}
/script
pXXXXX/p
!–startprint1–要列印的內容!–endprint1–
再加個列印按紐 onclick=preview(1)
2、調用windows底層列印，報安全警告，不建議使用（不支持局部列印）
[html] view plain copy
HTML
HEAD
TITLEjavascript列印-列印頁面設置-列印預覽代碼/TITLE
META http-equiv=Content-Type content=”text/html; charset=gb2312″ /
SCRIPT language=javascript
function printsetup(){
// 列印頁面設置
wb.execwb(8,1);
}
function printpreview(){
// 列印頁面預覽
wb.execwb(7,1);
}
function printit()
{
if (confirm(‘確定列印嗎？’)) {
wb.execwb(6,6);
}
}
/SCRIPT
/HEAD
BODY
DIV align=center
OBJECT id=wb height=0 width=0
classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 name=wb/OBJECT
INPUT onclick=javascript:printit() type=button value=列印 name=button_print /
INPUT onclick=javascript:printsetup(); type=button value=列印頁面設置 name=button_setup /
INPUT onclick=javascript:printpreview(); type=button value=列印預覽 name=button_show /
一按開始的減肥了卡時間段
/DIV
/BODY
/HTML
3、jQuery實現（支持局部列印）
[html] view plain copy
script type=”text/javascript” src=”jquery-1.4.2.min.js”/script
script type=”text/javascript” src=”jquery.PrintArea.js”/script
script
$(document).ready(function(){
$(“input#biuuu_button”).click(function(){
$(“div#myPrintArea”).printArea();
});
});
/script
input id=”biuuu_button” type=”button” value=”列印”/input
div id=”myPrintArea”…..文本列印部分…../div
JS調用瀏覽器的列印功能
最近做一個後台管理系統，其中有個用戶需求要求調用 瀏覽器列印 的功能去列印訂單，本來以為需要用戶手動（ Ctrl+P ）、或者打開 右鍵菜單 ，再選擇列印功能。後來經過查詢文檔，JS提供了調用瀏覽器列印功能的API。
頁面（全屏彈窗）內容設計如上圖所示：
其中頁面右下方有兩個按鈕：
這樣可以調用瀏覽器列印功能，但是列印預覽頁面上會出現右下方的兩個按鈕，這肯定是用戶不想看到的。
因此還需要根據 CSS媒體查詢 來區分：
歡迎訪問： 個人博客地址
js調用瀏覽器的列印功能
最近做了個運用瀏覽器列印合同的功能，之前沒做過，記錄一下其中遇到的問題，列印頁面建議使用新開窗口
原型圖如下：
頁面內容不多說，表格直接用table繪製，在頁面頂部加一個懸浮的列印按鈕。點擊列印按鈕調用印表機(ctrl+p)
實現的列印預覽效果如下圖：
谷歌瀏覽器可在列印預覽-更多設置-選項中去除頁眉和頁腳的勾選
列印的頁面不可出現橫向滾動條，否則會出現列印出來的內容顯示不全的問題。
js網頁列印
JS是吧？你在瀏覽頁面的時候是微軟雅黑，沒有logo，你在調用列印函數的前一句把樣式改一下，改一下字體為宋體，加上logo，列印函數調用完之後再把字體還原logo去掉不就行了？
印表機是不能實現的，就算要實現也很煩啊。。。
js如何實現頁面列印
HTMLHEADTITLEjavascript列印-列印頁面設置-列印預覽代碼/TITLE
META http-equiv=Content-Type content=”text/html; charset=gb2312″ /
SCRIPT language=javascript
function printsetup(){
// 列印頁面設置
wb.execwb(8,1);
}
function printpreview(){
// 列印頁面預覽
wb.execwb(7,1);
}
function printit()
{
if (confirm(‘確定列印嗎？’)) {
wb.execwb(6,6)
}
}
/SCRIPT
/HEAD
BODY
DIV align=center
OBJECT id=wb height=0 width=0
classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 name=wb/OBJECT
INPUT onclick=javascript:printit() type=button value=列印 name=button_print /
INPUT onclick=javascript:printsetup(); type=button value=列印頁面設置 name=button_setup /
INPUT onclick=javascript:printpreview(); type=button value=列印預覽 name=button_show /
/DIV
/BODY
/HTML
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/200596.html
微信掃一掃 
支付寶掃一掃 