1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 使用Iframe打印预览pdf 兼容谷歌火狐浏览器

使用Iframe打印预览pdf 兼容谷歌火狐浏览器

时间:2019-03-01 08:12:55

相关推荐

使用Iframe打印预览pdf 兼容谷歌火狐浏览器

功能场景:

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

功能实现:

实现思路:

使用接口获取pdf文件的二进制流,响应类型为blob将拿到的二进制流使用new Blob得到一个blob对象将blob对象使用URL.createObjectURL得到一个URL,iframe的src可以使用这个URL将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:/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;}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。