网页文档的复制与下载
声明:文章内容仅用于学习交流,切勿不当使用。
上网的时候经常会遇到网页禁止复制文本或者禁止文档下载的情况。今天结合案例分析下实现这些限制的手法和解除办法。1、文档复制
首先创建一个demo。html的文档,文档内容如下:!DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metahttpequivXUACompatiblecontentIEedgemetanameviewportcontentwidthdevicewidth,initialscale1。0titleDEMOtitlestylebody{backgroundcolor:aqua;}styleheadbody测试文本测试文本测试文本bodyhtml
打开文档可以发现,页面文本是无法选择并复制的。因为如代码所示,页面元素被绑定了几个事件(选择、拷贝、右键菜单),阻止了用户对文本的复制企图。
怎么办呢?
打开浏览器的开发者工具,切换到Elements标签下,选择文本元素,这时可以在下方的事件监听器中查看到目标元素及其祖先元素上绑定的事件。展开这些相关的事件,可以看到移除按钮,接下来只需点击按钮将这些限制事件移除便可以复制了。
上述办法是在事件绑定后,再将它们移除。此外,也可以通过抓包改包的方式移除绑定事件相关的代码,从源头阻止事件的绑定。这需要抓包工具的辅助,这里用到的是Fiddler。
假设网页部署在本地服务器上,首先,打开Fiddler,在右侧切换到自动转发面板(带闪电图标的),勾选图中两个选项;然后添加规则,填上要更改的请求地址以及要替换的本地文件(假设为demo1文件,内容如下),填好后保存。!DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metahttpequivXUACompatiblecontentIEedgemetanameviewportcontentwidthdevicewidth,initialscale1。0titleDEMOtitlestylebody{backgroundcolor:dedede;}styleheadbody测试文本测试文本测试文本bodyhtml
设置好以后再次刷新网页,会发现页面的背景色发生了变化,而且文本也可以直接复制了。
2、文档下载
此处以网上的一个文档为例,文档可以在线查看,但是无法直接下载。通过开发者工具选中文档,可以看到它对应了一个img标签(以前是canvas),我们可以将图片保存到本地,但是如果页面比较多,手动操作就很麻烦,所以可以用代码帮我们自动执行,将图片合并成pdf文件并下载到本地。
以下代码可做参考:functionloadScript(url){leteledocument。createElement(script)ele。srcurldocument。body。appendChild(ele)}functionimg2dataUrl(options){letresultletimgoptions。imgletwidthoptions。widthimg。naturalWidthimg。clientWidthletheightoptions。heightimg。naturalHeightimg。clientHeightletqualityoptions。quality100letmimeTypeoptions。mimeTypeimagepngletcanvasdocument。createElement(canvas)canvas。widthwidthcanvas。heightheightletctxcanvas。getContext(2d)ctx。drawImage(img,0,0,img。naturalWidth,img。naturalHeight,0,0,width,height)resultcanvas。toDataURL(mimeType,quality100)returnresult}loadScript(https:cdn。bootcdn。netajaxlibsjspdf2。5。1jspdf。umd。min。js)functionimg2pdf(){letimgArr〔。。。document。querySelectorAll(。readerinnerimg)〕if(imgArr。length0)returnletdocnewjspdf。jsPDF({unit:px});imgArr。forEach((v,i){v。setAttribute(crossOrigin,anonymous);letpxPermmv。width2102。2;letimgDataimg2dataUrl({img:v})。slice(data:imagepng;base64,。length);(i0)doc。addPage();doc。addImage(imgData,png,0,0,v。widthpxPermm,v。heightpxPermm);})doc。save(img2pdf。pdf);}
将代码放到控制台或者代码段中执行,执行后,再在控制台调用img2pdf()方法即可将可浏览的页面合并成PDF下载到本地。