js页面打印window.print

最新推荐文章于 2023-05-18 11:18:40 发布
最新推荐文章于 2023-05-18 11:18:40 发布
阅读量285 收藏
点赞数
分类专栏： JS/JQuery脚本
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/marzlam/article/details/101446896
版权

html元素

  <!--startprint-->

要打印的内容

  <!--endprint-->

打印按钮 <a class="btn btn--inline" href="javascript:;" οnclick="printView()">

js:

function printView() {
   

    bdhtml = window.document.body.innerHTML;//获取当前页的html代码   原模样 

//如果要打印的效果 需要去对字体 边距 什么的一些样式进行 处理的话，处理过后 即为打印模样        
        $(".widget ").removeClass();     
        $(".itinerary__list ").css("padding", "0");
        $(".itinerary ").removeClass(); 
        $(".itinerary__tag ").css({ "width": "10rem" });

        $('h2,h1').css("margin-bottom", "0");


        bdhtml2 = window.document.body.innerHTML;
        window.document.body.innerHTML = bdhtml2;//打印模样  完事开始打印

        sprnstr = "<!--startprint-->";//设置打印开始区域
        eprnstr = "<!--endprint-->";//设置打印结束区域
        prnhtml = bdhtml2.substring(bdhtml2.indexOf(sprnstr) + 17); //从开始代码向后取html
        prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));//从结束代码向前取html
        window.document.body.innerHTML = "<body>" + prnhtml + "</body>";
        // document.getElementsByTagName('body')[0].style.fontSize = 5+'px'; //设置比列
        document.getElementsByTagName('body')[0].style.zoom = 0.7;//设置比例
        window.print(); //打印
        document.getElementsByTagName('body')[0].style.zoom = 1;//打印完在调整回来比例
        window.document.body.innerHTML = bdhtml;//打印完  恢复原来模样


    }

Marzlam
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生JS打印插件之jQuery.EasyPrint.js使用文档
07-21
原生JS打印插件之jQuery.EasyPrint.js使用文档 调用浏览器自带打印功能，使用JavaScript的 window.print(); 方法。 使用JS实现打印功能；JavaScript 实现打印操作；javascript打印大全；通用；js实现打印的方式；JS怎么实现页面打印呢？JavaScript 实现打印,打印预览,打印设置；JS打印和报表输出；原生js打印插件Print.js；js控制分页打印、打印分页示例；js 打印插件；js使用window.print()实现打印功能；代码仅5kb； 自主研发的一个轻量级超简单的js打印插件。
windowPrint:窗口打印
05-02
windowPrint 调用打印服务之前电脑需要连接打印机 web打印，feature:去掉页面title和页脚的url，如果 打印预览样式失效，很可能是css预编译如less层级造成的，复制到新窗口后少了父层级，解决办法是在原来页面中将父层级样式去掉
js 调用window.print()方法打印
一剑轻语
06-21 3万+
目的：打印功能实现，添加水印 步骤： 1.写好jsp页面 2.写打印方法 即window.print()打印当前页面，如果只想打印部分页面的话，可以截取该部分赋值给body即可 3.调用打印方法即可 遇到的问题：水印无法打印 刚开始将水印图片赋值给背景图片，即background-image。但是一直无法打印，网上搜了一些人的方案，都无...
js 实现用window.print(）打印页面中的部分内容，局部打印
愿我如星君如月 ... 夜夜流光相皎洁 ...
11-23 4616
如下方法： function printProof(){ var printData = document.getElementById("forPrint").innerHTML; // 只打印 forPrint 这个div中的内容。 window.document.body.innerHTML = printData; //把 html 里的数据 复制给 body 的 html 数
JS 使用 window对象的print方法实现分页打印
热门推荐
baohuan_love的专栏
11-09 3万+
JS 使用 window对象的print方法实现分页打印，代码纯个人编写，可直接复制使用！
一文弄懂window.print（）打印
学习 记录 总结 分享
04-04 8999
一般信息填写类的需求页面，都会增设「预览」和「打印」功能。我们会通过编写 DOM 及样式来绘制出预览视图，而打印则是基于预览来生成 PDF 文件。浏览器原生 API window.print() 可以用于打印当前窗口（window.document）视图内容。调用此方法会产生一个打印预览弹框，用户可以根据具体设置来得到打印结果。
js使用window.print()实现打印功能
weixin_45615375的博客
05-23 8907
js使用window.print()来实现打印功能 1.首先在需要打印的内容标签上面绑定ref <div ref="tableRef"> 需要打印的内容 </div> <!--点击按钮打印--> <el-button @click="billPrintClick" >打印</el-button> 2.按钮打印事件 billPrintClick() { let newstr = this.$refs.tableRef.innerHTML /
使用js进行页面打印window.print(),并实现页面的调整
兮赫的博客
02-22 2602
精选30+云产品，助力企业轻松上云！>>> 打印wi...
网页中通过JS调用window.print()打印问题？
cfxxt的专栏
12-30 3718
在软件项目开发中，通常我们要实现打印功能，打印当前页面等打印需求，我们一般会使用window.print来打印。 1.在页面的代码头部处加入JavaScript： &lt;script language=javascript&gt; function doPrint() { bdhtml=window.document.body.innerHTML; sprnstr="&lt;...
JS使用原生的Window.print实现打印，打印指定的内容
经验之谈，不做搬运工
07-07 1058
Js使用原和的window.print实现打印，打印指定的内容
JS 使用 window对象的print方法实现分页打印功能
10-18
主要介绍了JS 使用 window对象的print方法实现分页打印功能，这种方法兼容性比较好，在ie和火狐浏览器下都可以正常使用，感兴趣的朋友跟随脚本之家小编一起看看吧
js调用打印机打印网页字体总是缩小一号的解决方法
12-03
今天要做一个打印网页的小功能，直接调用window.print()，但是打印出来后，字体总是缩小一号，找不到原因。。。 后来尝试用一个IE的打印控件，但仅支持ie有点恶心，只能返回去继续找原因 原来，我要打印的页面因为是...
javascript 打印页面代码
10-30
不用window.print实现的打印效果代码。
利用javascript实现web页面中指定区域打印
10-26
将需要打印的课程表的table放入div标签中，然后指定出需要打印的区域，最后调用window.print打印指定内容
javascript:window.print() 打印
thomas0988
04-17 365
1.JavaScript打印&lt;input id="btnPrint" type="button" value="button" onclick="javascript:window.print();" style="color:#00f; font-weight:bold; text-decoration:none;cursor:pointer!important; cursor:hand...
js的window.print()功能 有些背景色设置和背景图片无法显示的问题
Mr_pets的博客
04-06 2450
js的window.print()功能 有些背景色设置和背景图片无法显示的问题 写在前面：需求需要调用浏览器原生的print功能；下载保存为pdf，出现了 部分样式消失的情况 方法一：(此方法实测，针对我出现的情况，可用) //打印机媒体查询 @media print { body{ -webkit-print-color-adjust:exact; -moz-print-color-adjust:exact; -ms-print-color-a
关于window.print打印分页功能
最新发布
qq_39966730的博客
05-18 1849
里面有个边距默认是默认值，修改为无后，就是一页了，可我不能一开始就让用户打印去改这个边距，这种体验是极其不人性化的，已是在打印样式设置里面增加 margin:0;经过不断尝试，发现，在最后一页的高度设置比平常页数低17px就可以解决，于是就针对最后一页进行样式设置减少17px，至此解决window.print打印分页问题。于是想着增加第二页打印看下效果，我滴乖乖，好了，结果两页的页面又多出了一页。但现在我想动态打印分页，至内容一页时打印一页，内容两页时打印两页。
JS分页打印使用window对象的print方法实现
luolinyin的专栏
08-15 432
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>分页打印 - JS分页打印使用window对象print的方法实现</title> <meta charset="UTF-8"> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compa.
window.print() 前端实现网页打印详解
大雾起了清晨
03-07 1万+
print作为浏览已经比较成熟的技术可以经常被用来打印页面的部分内容，我们可以在MDN上查看到相关的简单介绍。
window.print页面怎么打印某个div内容
03-29
您可以使用JavaScript的print()函数来打印特定的div内容。 以下是一个示例代码： ``` function printDiv(divName) { var printContents = document.getElementById(divName).innerHTML; var originalContents = ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值