百度360必应搜狗淘宝本站头条
头像打包下载acmecadconverter_8.52绿色版mysql 昨天的日期个人网站源码word文档批量处理大师破解版
当前位置：网站首页 > 技术教程 > 正文

网页文档的复制与下载

csdh11 2024-12-02 16:39 19 浏览

声明：文章内容仅用于学习交流，切勿不当使用。

上网的时候经常会遇到网页禁止复制文本或者禁止文档下载的情况。今天结合案例分析下实现这些限制的手法和解除办法。

1、文档复制

首先创建一个demo.html的文档，文档内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DEMO</title>
    <style>
        body {background-color: aqua;}
    </style>
</head>
<body>
    <div class="content">测试文本测试文本测试文本</div>
    <script>
        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();
        });
    </script>
</body>
</html>

打开文档可以发现，页面文本是无法选择并复制的。因为如代码所示，页面元素被绑定了几个事件（选择、拷贝、右键菜单），阻止了用户对文本的复制企图。

怎么办呢？

打开浏览器的开发者工具，切换到Elements标签下，选择文本元素，这时可以在下方的“事件监听器”中查看到目标元素及其祖先元素上绑定的事件。展开这些相关的事件，可以看到“移除”按钮，接下来只需点击按钮将这些限制事件移除便可以复制了。

上述办法是在事件绑定后，再将它们移除。此外，也可以通过抓包改包的方式移除绑定事件相关的代码，从源头阻止事件的绑定。这需要抓包工具的辅助，这里用到的是Fiddler。

假设网页部署在本地服务器上，首先，打开Fiddler，在右侧切换到“自动转发”面板（带闪电图标的），勾选图中两个选项；然后添加规则，填上要更改的请求地址以及要替换的本地文件（假设为demo1文件，内容如下），填好后保存。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DEMO</title>
    <style>
        body {background-color: #dedede;}
    </style>
</head>
<body>
    <div class="content">测试文本测试文本测试文本</div>
</body>
</html>

设置好以后再次刷新网页，会发现页面的背景色发生了变化，而且文本也可以直接复制了。

2、文档下载

此处以网上的一个文档为例，文档可以在线查看，但是无法直接下载。通过开发者工具选中文档，可以看到它对应了一个img标签（以前是canvas），我们可以将图片保存到本地，但是如果页面比较多，手动操作就很麻烦，所以可以用代码帮我们自动执行，将图片合并成pdf文件并下载到本地。

以下代码可做参考：

function loadScript (url) {
  let ele = document.createElement('script')
  ele.src = url
  document.body.appendChild(ele)
}
function img2dataUrl (options) {
  let result = ''
  let img = options.img || ''
  let width = options.width || img.naturalWidth || img.clientWidth
  let height = options.height || img.naturalHeight || img.clientHeight
  let quality = options.quality || 100
  let mimeType = options.mimeType || 'image/png'
  let canvas = document.createElement('canvas')
  canvas.width = width
  canvas.height = height
  let 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) return
  let 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下载到本地。

相关推荐

探索Java项目中日志系统最佳实践:从入门到精通

探索Java项目中日志系统最佳实践：从入门到精通在现代软件开发中，日志系统如同一位默默无闻却至关重要的管家，它记录了程序运行中的各种事件，为我们排查问题、监控性能和优化系统提供了宝贵的依据。在Java...

用了这么多年的java日志框架，你真的弄懂了吗?

在项目开发过程中，有一个必不可少的环节就是记录日志，相信只要是个程序员都用过，可是咱们自问下，用了这么多年的日志框架，你确定自己真弄懂了日志框架的来龙去脉嘛？下面笔者就详细聊聊java中常用日志框架的...

物理老师教你学Java语言(中篇)（物理专业学编程）

第四章物质的基本结构——类与对象...

一文搞定!Spring Boot3 定时任务操作全攻略

各位互联网大厂的后端开发小伙伴们，在使用SpringBoot3开发项目时，你是否遇到过定时任务实现的难题呢？比如任务调度时间不准确，代码报错却找不到方向，是不是特别头疼？如今，随着互联网业务规模...

你还不懂java的日志系统吗 ?（java的日志类）

一、背景在java的开发中，使用最多也绕不过去的一个话题就是日志，在程序中除了业务代码外，使用最多的就是打印日志。经常听到的这样一句话就是“打个日志调试下”，没错在日常的开发、调试过程中打印日志是常干...

谈谈枚举的新用法--java（java枚举的作用与好处）

问题的由来前段时间改游戏buff功能，干了一件愚蠢的事情，那就是把枚举和运算集合在一起，然后运行一段时间后buff就出现各种问题，我当时懵逼了！事情是这样的，做过游戏的都知道，buff，需要分类型，且...

你还不懂java的日志系统吗（javaw 日志）

一、背景在java的开发中，使用最多也绕不过去的一个话题就是日志，在程序中除了业务代码外，使用最多的就是打印日志。经常听到的这样一句话就是“打个日志调试下”，没错在日常的开发、调试过程中打印日志是常干...

Java 8之后的那些新特性(三):Java System Logger

去年12月份log4j日志框架的一个漏洞，给Java整个行业造成了非常大的影响。这个事情也顺带把log4j这个日志框架推到了争议的最前线。在Java领域，log4j可能相对比较流行。而在log4j之外...

Java开发中的日志管理:让程序“开口说话”

Java开发中的日志管理：让程序“开口说话”日志是程序员的朋友，也是程序的“嘴巴”。它能让程序在运行过程中“开口说话”，告诉我们它的状态、行为以及遇到的问题。在Java开发中，良好的日志管理不仅能帮助...

吊打面试官(十二)--Java语言中ArrayList类一文全掌握

导读...

OS X 效率启动器 Alfred 详解与使用技巧

问：为什么要在Mac上使用效率启动器类应用？答：在非特殊专业用户的环境下，（每天）用户一般可以在系统中进行上百次操作，可以是点击，也可以是拖拽，但这些只是过程，而我们的真正目的是想获得结果，也就是...

Java中 高级的异常处理（java中异常处理的两种方式）

介绍异常处理是软件开发的一个关键方面，尤其是在Java中，这种语言以其稳健性和平台独立性而闻名。正确的异常处理不仅可以防止应用程序崩溃，还有助于调试并向用户提供有意义的反馈。...

【性能调优】全方位教你定位慢SQL，方法介绍下!

1.使用数据库自带工具...

全面了解mysql锁机制(InnoDB)与问题排查

MySQL/InnoDB的加锁，一直是一个常见的话题。例如，数据库如果有高并发请求，如何保证数据完整性？产生死锁问题如何排查并解决？下面是不同锁等级的区别表级锁：开销小，加锁快；不会出现死锁；锁定粒度...

看懂这篇文章，你就懂了数据库死锁产生的场景和解决方法

一、什么是死锁加锁（Locking）是数据库在并发访问时保证数据一致性和完整性的主要机制。任何事务都需要获得相应对象上的锁才能访问数据，读取数据的事务通常只需要获得读锁（共享锁），修改数据的事务需要获...

一周热门
最近发表
标签列表