【JS】学习记录【页面打印】

【JS】记录一下今天遇到的问题和解决方法

需求：所有的已发布的工单和标准要能打印，打印时隐藏页面所有按钮，效果如下。

问题一：隐藏按钮。
解决办法：
获取按钮，设置样式display=none；

    function onPrint() {cui("#grid").setWidth(696);var toHide = document.getElementsByClassName("printHidden");for (var i = 0; i < toHide.length; i++) {toHide[i].style.display = "none";}window.document.body.innerHTML = document.documentElement.innerHTML;window.print();};

问题二：打印完成后页面的按钮消失。
解决办法：
打印完成或者关闭打印预览页后刷新页面。

window.onafterprint = function () {window.location.reload();
}

问题三：打印预览的表格显示不全。
解决办法：
表格每列设置宽度百分比，不用固定列宽，打印时设置表格整体宽度。

cui("#grid").setWidth(696); //这里用的康拓普前端框架CUI

问题三：太宽的表格默认设置横向打印。
解决办法：
加一个style。

<style type="text/css" media="print">@page { size: landscape; }
</style>

【补充】2019年11月25日19:36:23
问题三：IE浏览器宽度需要重新调整
解决办法：识别浏览器类型，window.onbeforeprint 打印之前设置表格宽度

    window.onafterprint = function () {window.location.reload();}window.onbeforeprint = function () {var flag = isIE();if (!flag) {flag = isIE11();}if (flag) {cui("#xxx_grid").setWidth(626);} else {cui("#xxx_grid").setWidth(696);}}function isIE() {if (window.navigator.userAgent.indexOf("MSIE") >= 1) {return true;} else {return false;}}// ie11function isIE11() {if (!!window.ActiveXObject || "ActiveXObject" in window) {return true;} else {return false;}}

【JS】学习记录【页面打印】相关推荐

php 跳转历史页面,js不记录页面跳转历史的解决方法
js不记录页面跳转历史的解决方法在实际工作中,我们会遇到一个页面中有几个tab切换标签,tab切换是修改了浏览器地址",tab切换是默认记录到历史的.因此我们点击返回按钮的时候,不停的在几 ...
JS怎么实现页面打印 JS实现页面打印的方法
JS实现页面打印 1.js实现(可实现局部打印) [html] <input id="btnPrint" type="button" value=&quo ...
require.js学习记录
1.简介官方对requirejs的描述: RequireJS is a JavaScript file and module loader. It is optimized for in-brows ...
Cytoscape.js学习记录
记录学习Cytoscape.js的过程官方教程 https://js.cytoscape.org/ 另有一篇别人的博文分享:cytoscape.js基础篇https://blog.csdn.net/ ...
我的three.js学习记录（一）
在之前因为项目需要使用WebGL技术做网页应用,但是苦于自己没有接触,只是使用过OpenGL.然后接触到了thre.js这个第三方库之后我突然心情很愉快,这将节省我很多时间. 过了这个项目之后,就再也 ...
mock.js学习记录
mock介绍为什么要使用mock.js呢?在系统的开发中,做前端的同学经在工作中常常面临一个问题:因为后端的接口迟迟不能做好而无法进行页面的调试,尤其在根据后端的数据做数据的动态展示的时候,这种情况 ...
JS学习记录（BOM部分）
BOOM部分 Screen <html lang="en"> <head><meta charset="UTF-8">< ...
C#学习记录——Windows打印控件
『多少事,从来急,天地转,光阴迫,一万年太久,只争朝夕.』-- 毛泽东语录 Windows打印控件 PageSetupDialog控件 PageSetupDialog控件用于设置页面详细信息以便打印. ...
Auto.js学习记录
软件选择:通过在CSDN的查找发现了几款手机自动化脚本软件,例如:按键精灵.Auto.js等等.最后我选择了Auto.js .Auto.js共有三个版本:4.1.1版本.7.0.0版本和8.0.0版本 ...
Node.JS 学习记录(02)
Node.js EventEmitter Node.js 所有的异步 I/O 操作在完成时都会发送一个事件到事件队列. Node.js 里面的许多对象都会分发事件:一个 net.Server 对象会在 ...

【JS】学习记录【页面打印】

【JS】记录一下今天遇到的问题和解决方法

【JS】学习记录【页面打印】相关推荐

最新文章

热门文章