本文目录一览：
使用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/n/200596.html
微信扫一扫 
支付宝扫一扫 