声明：文章内容仅用于学习交流，切勿不当使用。
上网的时候经常会遇到网页禁止复制文本或者禁止文档下载的情况。今天结合案例分析下实现这些限制的手法和解除办法。
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>
设置好以后再次刷新网页，会发现页面的背景色发生了变化，而且文本也可以直接复制了。
此处以网上的一个文档为例，文档可以在线查看，但是无法直接下载。通过开发者工具选中文档，可以看到它对应了一个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下载到本地。
