正文 

当前位置： 首页 > 代码 > java教程

使用iframe打印预览pdf，兼容谷歌火狐浏览器(代码片段)

qq_40567849 qq_40567849     2023-03-31     505

关键词：

功能场景：

  • 点击页面的打印按钮，可以调用浏览器的打印功能，并预览打印pdf文件。
  • 解决火狐浏览器出现about:blank问题。

功能实现：

实现思路：

  1. 使用接口获取pdf文件的二进制流，响应类型为blob
  2. 将拿到的二进制流使用new Blob得到一个blob对象
  3. 将blob对象使用URL.createObjectURL得到一个URL，iframe的src可以使用这个URL
  4. 将iframe隐藏并调用浏览器的打印功能print()

实现代码：

export const preview = (params) => 
  return axios.post("/url", params,  responseType: "blob" );
;

async print() 
  let res = await preview(params);
  let blob = new Blob([res],  type: "application/pdf" );
  let href = window.URL.createObjectURL(blob);
  let iframe = document.createElement("IFRAME");
  iframe.style.visibility = "hidden";
  iframe.src = href;
  document.body.appendChild(iframe);
  // 解决火狐浏览器无法打印预览
  setTimeout(() => 
    iframe.contentWindow.blur();
    iframe.contentWindow.focus();
    iframe.contentWindow.print();
    URL.revokeObjectURL(href);
  , 500);
,

在操作完毕后需要移除创建的iframe，否则页面高度将会被撑开

 // 解决使用打印时高度被iframe撑开问题
 let iframe = document.getElementsByTagName("iframe");
 if (iframe && iframe.length) 
   iframe[0].parentNode.removeChild(iframe[0]);

补充：

1. 火狐浏览器出现about:blank原因

Firefox：打印页面包括about:blank只有about:blank
您将在firefox（ jsfiddle ）中获得一个空白页面，因为它将在加载任何内容之前打印iframe。 像$(document).onload()提到的方法不会帮助，因为他们只等待DOM加载和setTimeout()仍然可能导致错误，因为你不知道要花费多长时间加载iFrame。
参考文章：在Firefox中打印PDF

原因就是火狐会在加载内容之前打印iframe，所以这里使用setTimeOut等待iframe加载完毕。如果500ms不能解决问题的话，可以尝试延迟更多。

2. Blob对象

参考文章：jsBlob对象

blob表示二进制类型的大对象

var blob = new Blob([一个由 ArrayBuffer，ArrayBufferView，Blob，DOMString 等对象构成的数组], 
	
		type:它代表了将会被放入到 blob 中的数组内容的 MIME 类型
		endings:
			"native"，代表行结束符会被更改为适合宿主操作系统文件系统的换行符
			"transparent"，代表会保持 blob 中保存的结束符不变。
	
);

URL.createObjectURL 方法接收一个 Blob 对象，并在浏览器内存中创建一个 URL → Blob 映射，所以当不使用该URL后，应该使用URL.revokeObjectURL手动释放

 blob:https://example.org/40a5fb5a-d56d-4a33-b4e2-0acf6a8e5f641

3. contentWindow

参考文章：iframe.contentWindow 属性：关于contentWindow和contentDocument区分

contentWindow和contentDocument都是以 HTML 对象来返回 iframe 中的文档，可以通过所有标准的 DOM 方法来处理被返回的对象。

区别如下：

  • contentWindow 这是个只读属性，返回指定的iframe的窗口对象。它虽然不是标准的一部分，但各个主流浏览器都支持。
  • contentDocument Firefox 支持，IE6，IE7都不支持，IE8开始支持

兼容获取document对象：

var getIFrameDoc = function()
    var iobj = document.createElement("iframe");
    document.getElementsByTagName("body")[0].appendChild(iobj);
    return iobj.contentDocument || iobj.contentWindow.document;

pdf预览完整解决方案及各种兼容（vue版）(代码片段)

...次利用iframe打开另一个pdf时会显示第一份pdf，原因是浏览器对url的缓存处理。**解决办法：**给url加时间戳或随机数，这样就没有缓存问题了。constfresh=newDate().getTime();//时间戳this.url=this.url+'?'+fresh;//... 查看详情

ie火狐谷歌浏览器下兼容统一select样式

项目开发时，对于不同浏览器下的select样式不统一问题，各种查，这里记录一下，项目已使用IE浏览器下样式：火狐浏览器下样式：谷歌浏览器下样式：上代码：1、html2、css至此，大功告成！ 查看详情

关于document.body.scrolltop的谷歌，火狐浏览器兼容问题

最近开发页面，出现一个问题，弹框在谷歌浏览器正常，在火狐浏览器中，当滚动条滚动之后，弹框就显示在上面，也就是说document.body.scrollTop它只适用于google浏览器，火狐浏览器就要改为document.documentElement.scrollTop,但是如果做... 查看详情

谷歌浏览器比火狐浏览器容易崩溃

1、市场占有率如果从市场占有率来看，谷歌毫无疑问是浏览器一哥，而且大多数浏览器都采用谷歌内核，看中的就是速度快，简单，兼容性强。火狐浏览器仅有3.82%的用户，谷歌浏览器就接近6成。下载GoogleChromeV94.0.4606.54官方正... 查看详情

兼容火狐浏览器的select下拉框样式(代码片段)

...问题，在使用bootstrap框架的时候select选择框的样式在火狐浏览器上继承的是浏览器本身的样式，跟谷歌等其他的浏览器样式对比很难看，并且很难调整，但是！好东西来了，现在能调成跟谷歌一样的样式，只需要设置兼容火狐的... 查看详情

在div+css为啥写滚动条效果在谷歌浏览器有用，而在火狐没用呢

...http://www.jb51.net/article/20943.htm，以滚动条为例，介绍了各浏览器的兼容方法。　　您可以在火狐社区了解更多内容。希望我的回答对您有所帮助，如有疑问，欢迎继续在本平台咨询。 参考技术B这个要看浏览器支持不支持的。 参... 查看详情

iframe调用子页是能够自适应高度，兼容ie8,ie9,火狐等浏览器

关于这个问题，在网上找了好长时间，还是没能解决这个问题，实在是头疼的很。哪位高手能路过并指点下，小妹感激不尽，拜托拜托，附上我所有的财富，虽不多但这代表我急切之心啊！！！！参考技术A　　您好！很高兴为... 查看详情

谷歌浏览器打印预览加载不出来？

下载到电子税务局的申报表时只是空表格，数据加载不出来。参考技术A打开ie浏览器里的internet选项，打开安全，在internet里，自定义级别，找到activex控件和插件，选择启用，关闭对话框。刷新你的打印界面，应该可以了。 查看详情

从 javascript 触发 base64 编码 PDF 的打印预览

...ame中加载PDF，并在加载后立即触发它的打印预览。我可以使用这两种方 查看详情

iframe在谷歌浏览器中与在ie、火狐中显示不一致问题！

...”，右边显示“未选择文件”（不是文本框）。为了保证浏览器之间显示的一致性，想把ie的显示当标准来改。（功能上没问题，可以选择文件，上传文件）；谢谢大侠了！！！　　尊敬的用户，您好！很高兴为您答疑　　您说... 查看详情

jquery实现图片预览

...11月26日*介绍:基于JQUERY扩展,图片上传预览插件目前兼容浏览器(IE谷歌火狐)不支持safari*插件网站:http://keleyi.com/keleyi/phtml/image/16.htm*参数说明:Im 查看详情

在 Android 浏览器上嵌入谷歌文档查看器 iframe

】在Android浏览器上嵌入谷歌文档查看器iframe【英文标题】：embeddedgoogledocsvieweriframeonandroidbrowser【发布时间】：2014-08-1412:38:26【问题描述】：我有一个网站，我在其中嵌入了一个显示pdf的Googledocsiframe。与台式计算机连接时，iframe... 查看详情

pdf文档预览

　　最近在写一个功能，网站在浏览器上实现文件预览功能，我前端的处理方式，可以使用H5的新标签<embed>或者<iframe>src属性给个文件的地址，就可以预览了，当然如果是图片或者pdf格式的文件，是可以的，但是doc,ppt等... 查看详情

浏览器兼容性问题，火狐可以，谷歌不可以

...一个切换样式的（用下拉框选择样式切换）。但是在火狐浏览器可以实现切换，在谷歌和360浏览器就没有反应。求教大神指导。下面是有关代码，有些没有关系的我就删了。<linkhref="css/红.css"rel="stylesheet"type="... 查看详情

web端可拖拉可插入图片可生成并调整二维码大小可插入文字的无插件print打印demo，附谷歌浏览器直接打印方法

...自行兼容****没有兼容IE低版本，需要的自行兼容----谷歌浏览器加载本地图片文件会被拦截----谷歌浏览器加载本地图片文件会被拦截---- 查看详情

jsjquery代码如何调firefox兼容

jquery本身就是兼容各种浏览器的，所有可以用jquery代替dom事件追问页面里写的js跟jquery多了，不是就有冲突吗？参考技术A　　您好，感谢您对火狐的支持　　JS会有兼容问题，但jquery本身就是兼容各种浏览器的，所有可以用jquery... 查看详情

dw设计网页如何使div能自适应窗口大小居中显示，并且兼容ie、火狐、谷歌、opera等浏览器？

参考技术A想要页面内容居中显示，给最外层的div定义css样式，取个class名或是id名，.class名margin:0auto;width:1000px 查看详情

lodop打印控件,打印的是图片,然后ie上可以打印,预览,但是谷歌.火狐都显示的是图裂的那种坏图

如题.只有IE可以,其中我定义的打印是div中的东西,根据id进行打印,jsp代码如下:========打印方法beginfunctionPrint()LODOP=getLodop(document.getElementById('LODOP_OB'),document.getElementById('LODOP_EM'));vargrid=$("#printDiv").html();LODOP.PRINT_IN... 查看详情