网页文档的复制与下载 _生活知道

声明：文章内容仅用于学习交流，切勿不当使用。
上网的时候经常会遇到网页禁止复制文本或者禁止文档下载的情况。今天结合案例分析下实现这些限制的手法和解除办法。
1、文档复制
首先创建一个demo.html的文档，文档内容如下：
DEMObody {background-color: aqua;}测试文本测试文本测试文本let htmlEle = document.documentElement;let bodyEle = document.querySelector('body');htmlEle.addEventListener('selectstart', (e) => {e.preventDefault();});bodyEle.addEventListener('copy', (e) => {e.preventDefault();});bodyEle.addEventListener('selectstart', (e) => {e.preventDefault();});bodyEle.addEventListener('contextmenu', (e) => {e.preventDefault();});
打开文档可以发现，页面文本是无法选择并复制的。因为如代码所示，页面元素被绑定了几个事件（选择、拷贝、右键菜单），阻止了用户对文本的复制企图。
怎么办呢？
打开浏览器的开发者工具，切换到Elements标签下，选择文本元素，这时可以在下方的“事件监听器”中查看到目标元素及其祖先元素上绑定的事件。展开这些相关的事件，可以看到“移除”按钮，接下来只需点击按钮将这些限制事件移除便可以复制了。
上述办法是在事件绑定后，再将它们移除。此外，也可以通过抓包改包的方式移除绑定事件相关的代码，从源头阻止事件的绑定。这需要抓包工具的辅助，这里用到的是Fiddler 。
假设网页部署在本地服务器上，首先，打开Fiddler，在右侧切换到“自动转发”面板（带闪电图标的），勾选图中两个选项；然后添加规则，填上要更改的请求地址以及要替换的本地文件（假设为demo1文件，内容如下），填好后保存。

文章插图
【网页文档的复制与下载】DEMObody {background-color: #dedede;}测试文本测试文本测试文本
设置好以后再次刷新网页控制网页不能复制，会发现页面的背景色发生了变化，而且文本也可以直接复制了。
2、文档下载
此处以网上的一个文档为例，文档可以在线查看，但是无法直接下载。通过开发者工具选中文档，可以看到它对应了一个img标签（以前是canvas），我们可以将图片保存到本地，但是如果页面比较多，手动操作就很麻烦，所以可以用代码帮我们自动执行，将图片合并成pdf文件并下载到本地。
以下代码可做参考：

function loadScript (url) {let ele = document.createElement('script')ele.src = https://www.30zx.com/urldocument.body.appendChild(ele)}function img2dataUrl (options) {let result = ''let img = options.img || ''let width = options.width || img.naturalWidth || img.clientWidthlet height = options.height || img.naturalHeight || img.clientHeightlet quality = options.quality || 100let mimeType = options.mimeType || 'image/png'let canvas = document.createElement('canvas')canvas.width = widthcanvas.height = heightlet ctx = canvas.getContext('2d')ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, width, height)result = canvas.toDataURL(mimeType, quality / 100)return result}loadScript('https://cdn.bootcdn.net/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js')function img2pdf () {let imgArr = [...document.querySelectorAll('.reader_inner img')]if (imgArr.length === 0) returnlet doc = new jspdf.jsPDF({unit:'px'});imgArr.forEach((v,i) => {v.setAttribute("crossOrigin",'anonymous');let pxPermm = v.width / 210 / 2.2;let imgData = img2dataUrl({img:v}).slice('data:image/png;base64,'.length);(i > 0) && doc.addPage();doc.addImage(imgData, 'png', 0, 0, v.width / pxPermm, v.height / pxPermm);})doc.save('img2pdf.pdf');}

将代码放到控制台或者代码段中执行，执行后控制网页不能复制，再在控制台调用 img2pdf() 方法即可将可浏览的页面合并成PDF下载到本地。
本文到此结束，希望对大家有所帮助！

网页文档的复制与下载

猜你喜欢