前端window.print()怎么实现打印功能

Ccorong

已于 2024-07-09 10:25:15 修改

阅读量176

点赞数 3

文章标签：前端

于 2024-07-09 10:20:17 首次发布

本文链接：https://blog.csdn.net/m0_73298638/article/details/140287910

版权

html部分

 <div id="printBox">
   <!-- 打印的内容 -->

 </div>

js部分

  Print() {
      let printStr = "<html><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8'></head>";
      const tabStyle = `<style> （这里面可写打印盒子printBox里的样式）</style>

    <style media="print">
      @media print {
        html {
          zoom: 70%;
        }
      }
      </style><body style='text-align:center;'>`;

      let content = "";
      let str = document.getElementById("printBox").innerHTML;
      content = content + str;
      printStr = printStr + tabStyle + content + "</body></html>";
      let pwin = window.open("_blank");
      pwin.document.write(printStr);
      pwin.document.close();
      pwin.focus(); //获取焦点，不加focus，在某些情况下，打印页面会有问题
      pwin.print(); // 打印功能。 例如 window.print() 直接打印当前整个页面
      pwin.close(); // 关闭 打印创建的当前页面
    },

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Ccorong

关注关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

前端网页打印window.print()

emailboxbox的博客

04-14

3658

前端打印

前端 window.print() 打印方案、优化策略总结

m0_64435826的博客

04-16

3100

网页打印的功能在一些 ims 系统中已经很常见，上面这几个优化方案都是最近遇到后临时研究后的成果，已经满足我们的项目需求，可能还有不足之处，仅可供参考。

参与评论您还未登录，请先登录后发表或查看评论

详解window.print()，实现长列表打印分页

chenlim87的博客

09-22

5352

其实我们只要控制打印的行数就可以了。我们需要知道打印元素的高度和表格行的高度，算出一页纸可以打印多少行，超出的部分放到下一页打印。4、-webkit-print-color-adjust：是一个在浏览器中强制打印背景颜色和字体颜色的css属性，当打印出来的某些元素的背景颜色没有被显示时，可以使用。我们页面的样式和打印页面时的样式是两个不同的样式，打印时会默认携带页面的样式，同时呢我们也可以修改页面打印时的样式。1、先获取指定容器中的内容，将body的内容替换掉，调用了打印方法后，再把原来的body恢复。

window.print()实现打印功能

hunantai的博客

08-07

297

想要去掉滚动条，尝试缩放页面比例，使用vue-print-nb都不行，直到最后将vxe-table换成了原生table，奇迹般的好了！使用window,print实现打印功能，页面中使用了vxe-table表格，所以打印出来的表格中带有横向滚动条。

window.print分页打印

04-19

NULL 博文链接：https://ctrain.iteye.com/blog/1864992

window.print

ZOEylchen的博客

06-01

836

vue 打印

window.print()

weixin_33895475的博客

05-21

126

调用window.print()时，可以利用css来控制页面中的东西是否显示 <style> @media print{ 　　.noprint{ 　　display:none 　　} } </style> HTML如下： <table width="757" height="174" border="0" align="center"c...

打印功能window.print()

GTbond的博客

01-05

5491

打印功能window.print() 1. window.print()打印其实打印的是整个当前网页 2. 3. 样式问题如果使用less,scss 是不会生效的只能使用css语言格式, 就是不能像less、scss嵌套写 //在style中，使用@media print{} //不要嵌套写 @media print { div{ font-size:12px; ··· } ··· } 背景颜色可能不会生效，字体颜色生效了 ...

JS 使用 window对象的print方法实现分页打印功能

10-18

在Web打印功能实现中，通常会遇到分页的问题，即如何在打印的时候确保内容能够按照预期分布在不同的页面上。在实际项目中，可以通过CSS的`page-break-after`属性来实现分页效果。`page-break-after`属性用于设置一个...

聊一聊浏览器打印 - window.print

热门推荐

郊眠寺

11-09

1万+

一般信息填写类的需求页面，都会增设「预览」和「打印」功能。我们会通过编写 DOM 及样式来绘制出预览视图，而打印则是基于预览来生成 PDF 文件。浏览器原生 API可以用于打印当前窗口（window.document）视图内容。调用此方法会产生一个打印预览弹框，用户可以根据具体设置来得到打印结果。接下来将从 code 层面带领大家熟悉「打印」的使用。为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。

js逻辑_浏览器打印window.print

qq_43260366的博客

03-27

2376

也就是说，若是我们想打印某部分数据，需要先准备一个盒子，等待打印时，将这个盒子的内容赋值给document进行打印。以下是打开百度页面在控制台调用 window.print 方法后弹出的弹框，在右侧可以选择。，若是单元格内容是文本则会自动换行，但是若是数字则会覆盖另一单元格的文本，因此需要设置强制换行。如上示例中，在设置一列时给每一列设置了宽度，但是若是宽度超过总宽度则会对每列宽度进行。需要注意的是：页眉和页脚是在打印时自带的，当需要打印的数据是表格是，建议使用。因为组件样式在打印时可能不显示！

window.print()方法调起浏览器打印

ScumStudy的博客

09-14

489

【代码】window.print()方法调起浏览器打印。

window.print()页面打印

nss33678的博客

07-03

171

1.打印整个页面,直接调用window.print()方法。3.或者给需要打印的区域最外层添加div,加id。2.打印页面的一部分内容。

window.print() 浏览器打印

weixin_44321325的博客

04-05

1415

记录最近新接触的知识点，实现浏览器分页打印~~~

window.print()简单使用

qq_40557812的博客

04-23

3146

window.print()的使用整体打印隐藏掉不需要的结构 document.getElementsByClassName('xmbz')[0].style.display='none'; document.getElementsByClassName('reason')[0].style.display='none'; document.getElementBy...

window.print() 前端页面打印与预览PDF

小先生编程

08-31

1万+

window.print()打印是浏览器自带的打印，实现原理是将html转换为pdf可以在线预览打印或者导出pdf，在任何网页上可通过Ctil+p快捷键调出浏览器打印程序，它可将整个网页打印出来，在我们开发中，其实并不需要将所有页面打印出来，或者只需要局部的页面做打印，那我我们就自己实现window.print（）打印功能。浏览器自带的打印窗口（页眉页脚属于自带的，我们无法去掉，但是可以通过css将边距调小，将其覆盖掉）打印常见的功能与问题处理打印的功能以及布局全由css控制，在加上一些程序处理的业

浏览器局部打印:Window.print()--无需插件，兼容IE

qq_36147916的博客

11-07

8419

Window.print()很强大好不好，插件啥的咱们不稀罕局部打印通过样式和调用方法隐藏，详情见注释 &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta http-equiv='Content-Type' content='text/html; chars

前端打印调用window.print打印预览不全宽度被截断