zoukankan      html  css  js  c++  java
  • 使用浏览器的打印功能(快捷键Ctrl+p) 打印canvas

    这里我是新开窗口打印,会存在一个问题:就是不关闭打印窗口回到父页面,父页面不响应的情况

    所以,我另外写了一个监听离开新开窗口,弹窗提示的函数,提示用户关闭打印窗口,方可进行后续操作

    额,发现问题更大了,只要离开父页面就会弹窗。。。(因为监听的始终是父页面是否为浏览器当前页啊)

       var canvas = document.getElementsByClassName('ol-unselectable')[0]; //待打印区域dom对象
            var win = window.open();
            win.document.write("<br><img src='" + canvas.toDataURL() + "'/>");
            //保证加载完成
            setTimeout(() => {
              win.print();
            }, 300);
            currentPage('请确认打印窗口已经关闭,否则无法进行后续操作')
    

    监听浏览器是否处于当前页面的函数

    function currentPage(msg) {
      var hiddenProperty = 'hidden' in document ? 'hidden' :
        'webkitHidden' in document ? 'webkitHidden' :
          'mozHidden' in document ? 'mozHidden' :
            null;
      var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
      var onVisibilityChange = function () {
        if (!document[hiddenProperty]) {
          console.log('页面激活');
          return true
        } else {
          console.log('页面非激活')
          alert(msg)
          return false
        }
      }
      document.addEventListener(visibilityChangeEvent, onVisibilityChange);
    }
    

    原本 打算这里打印用lodop控件,但是要装驱动,觉得用户体验不好

  • 相关阅读:
    [Swift]学习笔记----变量不会被默认初始化
    Swift学习笔记1---变量和元组
    mac下安装node.js步骤
    注意clear的属性
    覆盖css类样式,必须注意css类名前缀的一致
    span 文字垂直居中
    css3 实现元素水平和垂直居中
    IOS 长按默认事件阻止 【坑】
    提高javascript编码质量-68-1
    js 柯里化
  • 原文地址:https://www.cnblogs.com/wwj007/p/11771018.html
Copyright © 2011-2022 走看看