本文目录一览:
使用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