window.print网页打印 |
您所在的位置：网站首页 › 360浏览器网页打印设置 › window.print网页打印 |
window.print网页打印
|
文章目录
文章参考问题描述使用chrome保存图片功能——验证问题3测试代码测试结果测试结论
使用浏览器打印功能为pdf打印的API通用JS代码——将网页总具体的某段保存为pdf天坑——为什么我打印的时候只显示当前页禁止页面打印
样式在class中，如何获取DOM的样式？ele.stylegetComputedStyle()
文章参考
原生js获取元素样式的简单方法
问题描述
工作中，想把网页中某段内容保存图片想保存的这部分内容在网页中的某个div中，并且出现了滚动条，（不是窗口出现滚动条，是某个div有滚动条）第一想法是使用chrome的保存图片的命令功能 —— 保存全屏、某个节点、当前可视区域三个功能，但是测试没有成功(这个功能只是针对显示在html节点的内容，因为节点高度固定，所以保存的图片就是我们看到的部分)想到“网页打印功能”，将打印的内容保存为Pdf，还方便查找
使用chrome保存图片功能——验证问题3
测试代码
DOCTYPE html>
Document
dddddddd
dddddddd
此处省略一万行代码
测试结果
保存固定高度节点为图片的内容，如图 这个功能只是针对显示在html节点的内容，因为节点高度固定，所以保存的图片就是我们看到的部分 使用浏览器打印功能为pdf 打印的API window.print()document.execCommand('print')上面两种API 作用是一样的 通用JS代码——将网页总具体的某段保存为pdf (function dayin(queryStr) { // 防止页面设置了禁止打印的功能 var style=document.createElement("style"); style.innerText = "@media print{body{display:block!important;}}" document.getElementsByTagName("html")[0].append(style) var userAgent = navigator.userAgent.toLowerCase() // 取得浏览器的userAgent字符串 if (userAgent.indexOf('trident') > -1) { alert('请使用google或者360浏览器打印') return false } else if (userAgent.indexOf('msie') > -1) { alert('请使用google或者360浏览器打印') return false } else { // 其它浏览器使用lodop // var oldstr = window.document.body.outerHTML var printData = window.document.querySelector(queryStr).outerHTML // 获得 div 里的所有 html 数据，因为只有样式没有事件 // window.document.body.innerHTML = printData const htmlObj = window.document.getElementsByTagName('html')[0] const bodyObj = window.document.getElementsByTagName('body')[0] // 缓存body、html的高度 const beforeBodyHeightStyle = getComputedStyle(bodyObj).height const beforeHtmlHeightStyle = getComputedStyle(htmlObj).height // 缓存body、html是否隐藏起来了 const beforeBodyOverflowStyle = getComputedStyle(bodyObj).overflow const beforeHtmlOverflowStyle = getComputedStyle(htmlObj).overflow console.log(beforeBodyOverflowStyle) // 防止 html 和 Body都设置了高度为100%，因为实际要打印的高度是所有内容，大于浏览器的高度100%的，而我们查看的内容和显示的内容都是浏览器的高度，并且有滚动条，这样就让我们有错觉， // 我们打印的内容是html的高度的内容，不是100%，有可能是小于100%，也可能大于100%的 htmlObj.style.height = 'auto' bodyObj.style.height = 'auto' // 判断body是否隐藏不显示滚动条 if (beforeBodyOverflowStyle === 'hidden') { bodyObj.style.overflow = 'auto' } if (beforeHtmlOverflowStyle === 'hidden') { htmlObj.style.overflow = 'auto' } // var targetDiv = document.createElement('div') const targetId = Math.floor(Math.random() * 10000000000000000) targetDiv.id = targetId targetDiv.innerHTML = printData // 将 HTML 代码作为字符串重新拷贝到 创建的div 中 // document.getElementById('app').style.display = 'none' var docfrag = document.createDocumentFragment() // 创建一个fragment 对象 // 将 body 下面的所有非 link 和 script 标签的全部都移动到 创建的 fragment 对象中 for (let i = 0; i console.log(node.nodeName) // 如果参数节点是 DOM 已经存在的节点，appendChild方法会将其从原来的位置，移动到新位置。 docfrag.appendChild(node) } } bodyObj.append(targetDiv) // window.print() // 等价于 window.document.execCommand('print') htmlObj.style.height = beforeHtmlHeightStyle bodyObj.style.height = beforeBodyHeightStyle if (beforeBodyOverflowStyle === 'hidden') { bodyObj.style.overflow = 'hidden' } if (beforeHtmlOverflowStyle === 'hidden') { htmlObj.style.overflow = 'hidden' } // 打印结束后，放开隐藏内容 targetDiv.remove() var children = docfrag.childNodes // NodeList 接口 console.log(children instanceof NodeList) children.forEach((node, i, list) => { console.log(node, i, list) }) bodyObj.appendChild(docfrag) } })("article.article");打印的思路 将节点的代码缓存起来将body内部的 非 LINK 和 非SCRIPT 节点 缓存起来，放到 新建的 fragment 节点中将需要打印的代码创建为 一个DIV 节点，挂在 body 节点下面检测是否固定了html和body的高度检测是否将html和body设置了overflow:hidden打印完成或者取消打印，将创建的打印节点删除，然后将新建的fragment 下的节点重新返回挂载到 body 节点下面 天坑——为什么我打印的时候只显示当前页上面的代码我做了注释，再重复说明一下，下面的情况是我遇到的一种情况，具体情况具体分析 防止 html 和 Body都设置了高度为100%，因为实际要打印的高度是所有内容，大于浏览器的高度100%的，而我们查看的内容和显示的内容都是浏览器的高度，并且有滚动条，这样就让我们有错觉，结论： 我们打印的内容是html的实际高度的内容，不是100%，有可能是小于100%，也可能大于100%的 禁止页面打印 @media print{ body{display:none!important;} } 样式在class中，如何获取DOM的样式？问题描述： 在学习DOM的时候就看到通过ele.style来获取元素样式值，但是有时候获取的并非是节点的样式值，而是空值。 ele.stylea. 这是因为ele.style只能获取写在元素标签中的style属性里的样式值， b. 无法获取到定义在和通过加载进来的样式属性 var test = document.getElementById("test"); //获取节点的color test.style.color; getComputedStyle()getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。 window.getComputedStyle("元素", "伪类"); |
【本文地址】
今日新闻 |
推荐新闻 |