关于React中使用window.print()出现页面无响应问题解决记录

目录
  • 一、问题背景：
  • 二、问题原因：
  • 三、问题解决：
  • 总结：

一、问题背景：

window.print()页面打印出现页面无响应

看了网上很多办法都是让用window.location.reload(),对于这个解决方案不置可否，刷新页面当然可以解决这个问题，但是不高级

二、问题原因：

可能操作了document但是并未进行销毁（可能是）

三、问题解决：

消除操作的document

封装一个printFun()方法

//该方法参数 content：需要打印的元素
printFun = (content) =>{
        var Window = window.open("", "页面打印", "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, copyhistory=no");
        var style = "<style type='text/css'></style>";
        Window.document.write(content + style);
        Window.focus();
        Window.document.close();     //关闭document的输出流, 显示选定的数据
        Window.print();               //打印当前窗口
        return Window;
    }

方法调用：billDetails是你当前想要打印的元素的 id，当然只要是能找到该元素，其他方法都可以

var windows = this.print(document.getElementById('billDetails').innerHTML);
    windows.close();

总结：

出现样式问题的需要自己将css加入进代码，就是printFun方法中的style变量，需要自己进行需求更改

到此这篇关于React中使用window.print()出现页面无响应问题解决记录的文章就介绍到这了,更多相关React使用window.print()现页面无响应内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 关于React中使用window.print()出现页面无响应问题解决记录

    目录 一.问题背景: 二.问题原因: 三.问题解决: 总结: 一.问题背景: window.print()页面打印出现页面无响应 看了网上很多办法都是让用window.location.reload(),对于这个解决方案不置可否,刷新页面当然可以解决这个问题,但是不高级 二.问题原因: 可能操作了document但是并未进行销毁(可能是) 三.问题解决: 消除操作的document 封装一个printFun()方法 //该方法参数 content:需要打印的元素 printFun = (cont

  • 在react中使用highlight.js将页面上的代码高亮的方法

    通过 highlight.js 库实现对文章正文 HTML 中的代码元素自动添加语法高亮,highlight.js官方文档 下载highlight.js npm i highlight.js 导入highlight.js import hljs from 'highlight.js' import 'highlight.js/styles/vs2015.css'   用highlight.js   useEffect(() => {     // 配置 highlight.js     hljs

  • javascript 中设置window.location.href跳转无效问题解决办法

    javascript 中设置window.location.href跳转无效问题解决办法 问题情况 JS中设置window.location.href跳转无效 代码如下: <script type="text/javascript"> function checkUser() { if(2!=1){ window.location.href="login.jsp" rel="external nofollow" rel="e

  • vue3中addRoute路由变化但页面未更新问题解决

    目录 按着vue2的写法写vue3 发现路由变化了但页面没有更新 搜索了半天没有解决办法. 想了半天觉得是重复用同一个对象,vue为了节约性能就没有新建, 被vue3给优化了 解决办法,每次addRoute时 深复制组件对象 import time from "../views/time" function copyObj(obj) { if (typeof obj == "object") { if (Array.isArray(obj)) { let arr =

  • vue2之响应式双向绑定,在对象或数组新增属性页面无响应的情况

    目录 vue2响应式双向绑定,在对象或数组新增属性页面无响应 问题描述 解决方法 vue2实现响应式数据 JS中的对象属性 利用Object.defineProperty()进行数据劫持 与标签联动 v-model的实现 总结 vue2响应式双向绑定,在对象或数组新增属性页面无响应 问题描述 vue2 中可以将数据与视图进行绑定,修改 data 对象的属性值将引起对应视图的改变. Vue2的数据视图绑定是通过JS特性这一语法实现,其使用中存在数据属性丢失的这 一 bug,主要针对 对象或数组 属

  • React中路由参数如何改变页面不刷新数据的情况

    目录 React路由参数改变页面不刷新数据的情况 React页面路由 前端路由和后端路由 前端路由介绍 匹配模式 路由的执行过程 hash模式 history模式 react-router-dom API React路由参数改变页面不刷新数据的情况 路由的参数由于是在componentDidMount中获取的,如果在详情页面再次打开详情页面,由于组件并没有重新渲染,导致didMount不会获取路由参数. 因此在参数改变的时候,可以利用componentWillReceiveProps来更新变量.

  • window.print打印指定div指定网页指定区域的方法

    第一种方法:指定不打印区域 使用CSS,定义一个.noprint的class,将不打印的内容放入这个class内. 细如下: <style media=print type="text/css"> .noprint{visibility:hidden} </style> 要打印的内容.哈哈! <p class="noprint">将不打印的代码放在这里.</p> <a href="javascript:

  • 简单谈谈React中的路由系统

    简单谈谈React中的路由系统

    React中的路由系统 提起路由,首先想到的就是 ASPNET MVC 里面的路由系统--通过事先定义一组路由规则,程序运行时就能自动根据我们输入的URL来返回相对应的页面.前端中的路由与之类似,前端中的路由是根据你定义的路由规则来渲染不同的页面/组件,同时也会更新地址栏的URL.本篇文章要介绍的是React中经常使用到的路由,react-router主要使用HTML5的history API来同步你的UI和URL. react-router的最新版本是v4.1.1,由于4.0版本和之间的版本A

  • React中常见的动画实现的几种方式

    React中常见的动画实现的几种方式

    现在,用户对于前端页面的要求已经不能满足于实现功能,更要有颜值,有趣味.除了整体 UI 的美观,在合适的地方添加合适的动画效果往往比静态页面更具有表现力,达到更自然的效果.比如,一个简单的 loading 动画或者页面切换效果不仅能缓解用户的等待情绪,甚至通过使用品牌 logo 等形式,默默达到品牌宣传的效果. React 作为最近几年比较流行的前端开发框架,提出了虚拟 DOM 概念,所有 DOM 的变化都先发生在虚拟 DOM 上,通过 DOM diff 来分析网页的实际变化,然后反映在真实 D

  • react中使用swiper的具体方法

    正文 最近的react项目需要使用轮播图,自然而然的就想到了swiper,一直想通过npm安装的方式来使用,但是网上找了很多,资料很少,于是就暂时通过在index.html里直接引用swiper的js和css文件的方式来加载,下面来说一下具体的步骤和使用方法. 首先说一下我这里使用的是swiper3x系列.接下来说具体的步骤: 在index.html中引入js和css文件 <!DOCTYPE html> <html lang="en"> <head>

随机推荐