在iframe中调用print打印页面的问题

最新推荐文章于 2025-07-17 17:03:58 发布

原创最新推荐文章于 2025-07-17 17:03:58 发布 · 4.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#iframe #框架 #button #浏览器 #ie

技术积累专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种在不同浏览器中实现仅打印iframe内内容的方法。针对Firefox和Internet Explorer等浏览器的特点，提供了JavaScript代码来实现这一功能，确保在IE中也能只打印子框架的内容。

使用print()可以直接调用浏览器的打印功能。

对于只想打印iframe中的内容，FF下面可以使用frams[0].print();但是ie下打印的还是包含父框架。IE需要将焦点指定到子框架，再调用print()才行。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

bookmoth

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

js调用iframe实现打印页面内容的方法

12-12

1、程序说明1) 此程序可以实现选择页面中的区域进行打印，以iframe方式进行打印；2) 与原生态的print() 区别在于，取消打印页面后可以完整保留当前访问页面的内容。2、代码部分 1) JS 函数：代码如下:function do_print(id_str)//id-str 打印区域的id{var el = document.getElementById(id_str);var iframe = document.createElement(‘IFRAME’);var doc = null;iframe.setAttribute(‘style’, ‘position:absolut

jQuery 网页打印组件升级版（支持打印 iframe 内的内容）

10-29

通过设置`isFrame: true`，组件会识别并处理页面中的所有iframe，确保它们的内容在打印预览和实际打印过程中都能正确呈现。这对于那些依赖iframe展示关键信息或复杂交互的网站来说，是一项非常重要的增强。 ### 3. ...

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

使用iframe实现浏览器打印

最新发布

jiangzhihao0515的博客

07-17

362

文章介绍了如何利用iframe解决局部打印的问题，避免使用window.print全局打印带来的页面重绘影响用户体验。通过创建iframe，将需要打印的HTML内容注入，并设置相应的CSS样式，然后调用iframe的打印方法。

iframe 打印

Trifling_的博客

03-08

1000

2、iframe 设置innerHTML 和打印print 一定要有间隔。1、iframe打印一定要注意样式，有些大图片打印会空白。

vue 打印html ＜iframe＞标签（内容打印）超详细

weixin_45137175的博客

07-12

3285

今天领导给了个需求，需要配合其他项目组给一个公共组件的npm进行,公共组件打印，打印操作由这个npm包来操作。（经过开会商讨，最后决定配置一个path路径，来展示页面，然后我负责在公共这里打印相应页面内容。）在这之初都是好着的，首先进行配置，这里只需要一个input框来给后端传值就可以了，这一步没什么好讲的，

iframe的打印功能

weixin_59428750的博客

05-14

798

使用 this.$refs.myIframe.contentWindow.print();iframe自带打印功能。

iframe打印信息

xingxing12323的博客

03-17

1828

html页面利用iframe打印信息html内容js 内容 html内容 <div id="xxx" style="display: none;"><iframe id='printID'><html><head></head><body></body></html></iframe></div> <button onclick="dianwo2('张三','371581199302

js调用iframe实现打印页面指定内容的方法

NsdnResponsibility的博客

03-23

7631

1、程序说明 1) 此程序可以实现选择页面中的区域进行打印，以iframe方式进行打印； 2) 与原生态的print() 区别在于，取消打印页面后可以完整保留当前访问页面的内容。 2、代码部分 1) JS 函数： function do_print(id_str)//id-str 打印区域的id { var el = document.getElementById(id_str); ...

js iframe 打印打印预览页眉页脚的设置

04-10

在打印预览和打印过程中，我们可以利用iframe来加载需要打印的页面，并对其进行控制。 1. 创建iframe：在JavaScript中，可以通过`document.createElement('iframe')`创建一个iframe元素。然后，为其设置`src`属性...

精选资源

react-to-print:在浏览器中打印React组件。支持Chrome，Safari，Firefox和EDGE

04-11

ReactToPrint-在浏览器中打印React组件因此，您已经创建了一个React组件，并希望使最终用户能够打印出该组件的内容。该软件包旨在通过弹出带有复制CSS样式的打印窗口来解决此问题。演示版安装 npm install --...

iframe 内嵌页面全屏、下载、打印功能配置

ringlot的博客

07-03

1216

项目中遇到一种场景，有一个内嵌的iframe 页面，页面里有全屏功能，还有用a.click的下载、window.print() 打印功能。但是在iframe里没有反应不生效，后面翻阅资料终于解决了。3、打印功能，iframe 里sandbox 加 allow-modals 即可调取print 打印。2、下载功能，iframe 里 sandbox 加 allow-downloads 允许下载。在iframe里需要加 allowfullscreen="true"，即可生效。

利用iframe实现局部打印(区域打印)

m0_52724742的博客

08-16

3011

区域打印

jquery + iframe 实现打印功能

前端开发工程师

06-16

2413

使用 window.print() 和 iframe.print() 实现html自定义页面打印功能,可自定义申请单、签呈单等，但是页面表格排版和样式需要自己写

vue中实现打印通过iframe标签实现

qq_43631129的博客

07-02

5030

vue 打印，iframe实现打印，打印可横向打印，纵向打印

js页面实现打印 iframe + window.print()

stpzhf的博客

11-16

3221

使用iframe + window.print() 实现打印功能和避坑

js 利用iframe 局部打印

懒得安分的博客

01-21

8902

var el = &quot;&amp;lt;img src='//xxx.jpg'&amp;gt;&quot;; var iframe = document.createElement('IFRAME'); iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;'); document.body.app...

gitblog_00025的博客

04-23

1563

前端iframe标签实现打印功能，自定义内容和样式

qq_55777517的博客

06-20

922

原生js实现打印

【JS】使用iframe打印浏览器页面

zlting_的博客

04-18

2759

当某些甲方爸爸有浏览器打印需求时，项目中可以使用iframe标签来实现此功能。

js 打印内容更新到 iframe 中,然后调用 iframe 的 print api

09-03

通过使用JavaScript，我们可以将内容更新到iframe中，并调用iframe的打印打印API。首先，我们需要获取到iframe的引用。可以通过以下方法之一来获取到iframe的引用： 1. 通过iframe的id属性获取引用，例如： ```javascript var iframe = document.getElementById("myIframe"); ``` 2. 通过iframe的name属性获取引用，例如： ```javascript var iframe = window.frames["myIframe"]; ``` 接下来，我们可以通过修改iframe的内容来更新它，例如： ```javascript iframe.document.open(); iframe.document.write("更新后的内容"); iframe.document.close(); ``` 在内容更新完成后，我们可以调用iframe的print()方法来触发打印功能，例如： ```javascript iframe.print(); ``` 完整的示例代码如下： ```javascript var iframe = document.getElementById("myIframe"); iframe.document.open(); iframe.document.write("更新后的内容"); iframe.document.close(); iframe.print(); ``` 以上就是通过JavaScript将内容更新到iframe中，并调用iframe的打印API的方法。