首页 > 其他分享 >前端浏览器打印

前端浏览器打印

时间:2022-10-08 00:22:42浏览次数:53  
标签:body 浏览器 doc 前端 打印 innerHTML iframe print document

window.print()

    const bodyHtml = document.body.innerHTML
    document.body.innerHTML= $0.innerHTML
    window.print();
    document.body.innerHTML = bodyHtml
    location.reload(); // 刷新页面

$0 为打印的节点;location.reload() 为了解决dom事件没有绑定的问题。

但是重新刷新页面,对翻页,搜索后的数据要重新进行操作,用户体验不好。所以能不能实现,不用刷新页面也能重新将事件绑定回去。

利用iframe 进行打印

function do_print(id_str){
      var el = document.getElementById(id_str);
      var iframe = document.createElement('IFRAME');
      var doc = null;
      iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
      document.body.appendChild(iframe);
      doc = iframe.contentWindow.document;
      // 引入打印的专有CSS样式,根据实际修改
      doc.write("<LINK rel=\"stylesheet\" type=\"text/css\" href=\"css/print.css\">");
      doc.write('<div>' + el.innerHTML + '</div>');
      doc.close();
      iframe.contentWindow.focus();
      iframe.contentWindow.print();
      if (navigator.userAgent.indexOf("MSIE") > 0)
      {
           document.body.removeChild(iframe);
      }
}

标签:body,浏览器,doc,前端,打印,innerHTML,iframe,print,document
From: https://www.cnblogs.com/honkerzh/p/16416570.html

相关文章

  • 前端String那些事儿
    js中的String其实不仅仅是"foo"这样的字面量字符串。Blob构造函数的入参array,数组元素可以是USVString,到底什么是USVString让我很困惑。除了​​String​​外,其实还包括以......
  • 前端内存泄露浅析
    手上负责的vue项目最近出现一个这样的问题,用户用着用着就出现:”喔唷,崩溃啦!“的提示。做了以下性能优化尝试:主动销毁对象及其子对象主动取消监听listener本地搜索减少组件DOM......
  • 浅析前端上传
    图片,音频,视频等等这几种常见的资源类型,如果需要从前端上传到服务端,有几种方式呢?不妨回顾一下经历过的项目想一想。项目上也用到很多上传文件的地方,七牛云,阿里云OSS,讯飞weba......
  • 如何引入阿里云ARMS前端监控?
    老大对我目前手上的项目引入了阿里云ARMS前端监控,但是我自己对ARMSSDK的API以及如何注入到Vue中不是很懂,因此这篇博客诞生了。/***阿里前端监控*配置文档https://www.......
  • 前端语音转文字实践总结
    最近准备一个技术分享,看到以前做的一个语音转文字的功能,放在slides上落灰了,索性整理到这里和大家分享下。从技术选型,到方案设计,到实际落地,可以说把全链路都覆盖到了。语音转......
  • 前端三剑客快速入门(三)
    前言前端三剑客快速入门(一)前端三剑客快速入门(二)书接上文,重新排版了。CSSCSS定位基本属性:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8">......
  • 浅谈浏览器架构、单线程js、事件循环、消息队列、宏任务和微任务
    关键词:​​多进程、单线程、事件循环、消息队列、宏任务、微任务​​看到这些词仿佛比较让人摸不着头脑,其实在我们的日常开发中,早就和他们打过交道了。我来举几个常见的例子......
  • 前端周刊第三十八期
    前端周刊发表每周前端技术相关的大事件、文章教程、一些框架的版本更新、以及代码和工具。每周定期发表,欢迎大家关注、转载。如果外链不能访问,关注公众号「前端每周看」,里......
  • Logback打印日志
    概括Logback是由log4j创始人设计的另一个开源日志组件,官方网站:http://logback.qos.ch。它分为三个模块:logback-core:其它两个模块的基础模块logback-classic:它是log4j......
  • 前端妹子问我 position fixed 失效问题该如何解决?
    背景这两天公司一位妹子问我,“我这边调试的时候本地显示没问题,到手机端就有问题,该怎么办呢?”测试环境没问题到线上就有问题了?对此我也很纳闷。下图是复现的效果图,这个是一......