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

news2024/11/21 0:34:02

功能场景:

  • 点击页面的打印按钮,可以调用浏览器的打印功能,并预览打印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;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/408754.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vite 本地运行首次进入页面加载慢问题

思考 vite的适用场景是什么? 由于我使用了tailwindcss插件 使用webpack 每次启动所有的项目的css样式都预先使用tailwindcss 转换成css 性能普通的电脑启动项目需要1分钟到2分钟。不过首次加载不会有什么多大的延迟,按需导入的页面加载也不会有多大的延…

博客项目- SSM 实现

文章目录1. 创建项目2. 数据库设计3. 前置任务3.1 拦截器3.2 统一数据格式3.3 创建一个 Constant3.4 统一异常处理3.5 密码加密4. 功能实现4.1 登录功能4.2 注册功能4.3 博客列表页 (功能实现)4.3.1 左侧框4.3.2 右侧框 (分页功能 页面显示)4.4 博客详情…

【CSS】盒子模型外边距 ③ ( 插入图片 | 插入图片位置移动 - 修改外边距 | 背景图片 | 背景图片移动位置 - 修改背景位置 background-position )

文章目录一、插入图片1、简介2、代码示例二、背景图片1、简介2、代码示例一、插入图片 1、简介 插入图片 : 插入图片方式 : 在 HTML 中 , 使用 <img> 标签可以插入一张图片 ;插入图片适用场景 : 显示 内容 , 按钮 , 一般都使用 插入图片 的方式 展示图片 ,设置插入图片大…

IDEA从零到精通(26)之MybatisX插件的安装与使用

文章目录作者简介引言导航概述安装插件插件的使用小结导航热门专栏推荐作者简介 作者名&#xff1a;编程界明世隐 简介&#xff1a;CSDN博客专家&#xff0c;从事软件开发多年&#xff0c;精通Java、JavaScript&#xff0c;博主也是从零开始一步步把学习成长、深知学习和积累的…

前端发起请求,后端响应请求的整个过程

文章目录前端注册页面axios 请求方法URL 路径配置自定义 axios方法封装后端创建服务器模块接口方法模块连接数据库本文分为&#xff1a;前端、后端两部分讲诉。以下是前端发送请求到服务器&#xff0c;服务器响应前端&#xff0c;的整个过程的图解&#xff1a;前端 前端主要是…

在vue项目当中绑定键盘事件

在vue项目当中&#xff0c;有时会遇到为文本输入框或者button按钮绑定键盘事件&#xff0c;最常见的就是enter回车事件。 按照vue官网给出的方法是&#xff1a; v-on:keyup.enter 简写&#xff1a;keyup.enter &#xff08;注意&#xff1a;如果是绑定在组件上的话&#xff…

让她/他心动的告白,页面制作(9个页面+链接+代码,原生HTML+CSS+JS实现)

文章目录一、pikachu告白信件1.效果图2.代码1.envelope.html2.envelope.css3.pikachu.html4.pikachu.css二、告白小宇宙1.效果图2.代码1.index.html2.index.css三、流光爱心1.效果图2.代码1.index.html2.index.css3.index.js四、520贺卡&#xff08;1&#xff09;1.效果图2.代码…

Node.js16.15.1的一个报错及解决方案

Node.js16.15.1的一个报错及解决方案前言准备工作核心解决方案测试前言 最近在进行Node.js的下载安装和环境的配置&#xff0c;在官网上下载了LTS版本16.15.1&#xff0c;没想到在后续的使用中出现一种报错。 例如&#xff0c;在命令提示符窗口中输入npm -v 想要查看npm的版本…

微信小程序下拉刷新

一、如何设置微信小程序所有页面都可以下拉刷新呢&#xff1f; 1、在app.json的"window"中进行配置 &#xff08;1&#xff09;把"backgroundTextStyle":“light"改为"backgroundTextStyle”:“dark” &#xff08;2&#xff09;添加"enab…

【青山css】css3阴影效果属性详解及创意玩法

前言 css阴影效果是我们经常使用的一个css属性&#xff0c;但你有仔细了解过它吗&#xff1f;是不是用的时候直接从蓝湖上复制过来就行了&#xff0c;那你了解它的每个参数吗&#xff1f;用阴影又能实现哪些好看的效果呢&#xff1f;来看一看我收集总结的css阴影知识吧&#x…

js执行顺序

1.首先js是单线程的 所有的同步任务都是按顺序依次执行的&#xff0c;前面的执行完了之后才会执行后面的任务。遇到计算量大的代码就会阻塞在这里。下面的代码就是打印输出10000次&#xff0c;当循环走完了之后 才会走后面的代码&#xff0c;输出的时间是981ms 输出981ms 2.因…

Plugin [id: ‘com.android.application‘, version: ‘7.*.*‘, apply: false] was not found 的解决办法

呜呜~ 在新建项目File->New->New Project->Empty Activity 后遇到以下情况&#xff1a;Plugin [id: com.android.application, version: 7.2.2, apply: false] was not found in any of the following sources: 问题1&#xff1a;配置了 proxy 把File | Settings | A…

vue3中使用vue-i18n(ts中使用$t, vue3不用this)

vue项目里多语言工具一直用的vue-i18n。 以前用的 vue2&#xff0c;也没啥大问题&#xff0c;就是配置好之后用t(“你的属性名”)就行&#xff0c;现在用vue3其实本来也没太大变化。 但是配置完之后&#xff0c;在html中用$t()没有问题&#xff0c;显示文案什么的一切正常。而在…

关于前端提示err_ssl_protocol_error错误的一次记录

当前端提示错误的时候按照 1.同步系统的时间&#xff0c;日期和区域 Chrome上出现“ err_SSL_protocol_error”的最常见原因之一是错误的时间和日期配置。错误的时区选择也会导致此错误。如果您在设备上遇到此错误&#xff0c;请快速修改时间&#xff0c;数据和区域设置。如果该…

2023高频前端面试题(持续更新 含答案)

1&#xff0c;es6有哪些新特性&#xff1f;ES6是2015年推出的一个新的版本、这个版本相对于ES5的语法做了很多的优化let和const具有块级作用域&#xff0c;不存在变量提升的问题。新增了箭头函数&#xff0c;简化了定义函数的写法&#xff0c;同时可以巧用箭头函数的this、&…

用代码写出浪漫__合集(python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心)

活动地址&#xff1a;CSDN21天学习挑战赛 用代码写出浪漫合集&#xff08;爱心、玫瑰花&#xff09; 本文目录&#xff1a; ​一、前言 二、用python、matplotlib、Matlab、java绘制爱心 &#xff08;1&#xff09;爱心图形1&#xff08;弧线型&#xff09;&#xff08;显示…

【微信小程序】-- 案例 - 自定义 tabBar(四十六)

&#x1f48c; 所属专栏&#xff1a;【微信小程序开发教程】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &…

uniapp 使用第三方UI库 uview-plus

前言&#xff1a;开发uniapp时&#xff0c;有些功能&#xff0c;使用UI库提供的更加方便和简单。所以我就搜索uniapp 的UI库&#xff0c;根据网上和uniapp的插件市场&#xff0c;确定使用uviewUI库。 uniapp项目使用的vue2 -----> 对应 uView uniapp项目使用vue3 -…

css3渐变色

作用&#xff1a;让元素在两个或多个指定的颜色之间显示平稳的过渡。 种类&#xff1a;分为线性渐变与径向渐变 一、线性渐变 1、向下/向上/向左/向右/对角方向 语法&#xff1a;background-image: linear-gradient(direction, color-stop1, color-stop2, ...); direction…

Vue的事件处理,点击事件

目录 1、 v-on:click 绑定属性示例&#xff1a; 2、 v-on:click 绑定方法示例&#xff1a; 3、 v-on:click 绑定特殊变量示例&#xff1a; 4、事件处理的修饰符 按键修饰符&#xff1a; v-model表单修饰符&#xff1a; v-bind指令修饰符&#xff1a; 监听DOM事件使用的是v…