【js+python】在线电子书页面图片抓取整合为pdf
本帖最后由 gdhy9064 于 2020-3-1 12:59 编辑# 声明
本贴所涉及内容仅用于学习交流，请勿作他用。
# 前言
你是否有过这样一段经历，有一本很喜欢的电子书就显示在你浏览器上，可你就是无法将之保存下来随心所欲地浏览，只能咬牙切齿乖乖地使用浏览器来阅读。本帖将以某网站的电子书为例，讲解如何利用浏览器将电子书保存为图片，并整合为pdf版电子书。
# 所用工具
- 火狐浏览器
- python环境（用于整合图片为pdf）
# Step1 侦查
首先，我们先来看看本次实战的网页：https://pdfxz.pmph.com/mediapreview/pdf/dist/index.html?url=https://pdfxz.pmph.com/pdffile/9aa409e0102e4341b04b94d7e8a30d40&pagesize=10&total=164 ，这是一本在线电子书，我们利用f12调出查看器，利用”选取页面中元素”的功能，可看到如下图
查看该页面对应的节点，发现它只是一张水印图
删除它
重复选择元素的操作，如若不是我们所需的页面图片元素则删除，直到找到为止
这里我们看到电子书的页面是用一个canvas标签显示。继续一番侦查后我们可以发现，电子书的页面并不会一次全部加载，只有当浏览器翻到那个页面附近后才开始加载，并且较外一层节点的class名为page的div标签会置属性data_loaded为true，没加载的页面则没有canvas标签，也就不能保存下相应页面图片了。这提醒我们：要保存整本电子书，需要模拟电子书的翻页操作，使得页面能够加载，而模拟翻页操作只需调用该网页自带的“下一页”按钮的click函数，即可实现翻页操作。
继续探索，我们能够看到更外层有着3个iframe标签，每个iframe里面包含了10个电子书页面，通过手动翻页，我们还能够发现每10页会切换到下一个iframe，通过这种方式循环切换这3个iframe。
为了能够得知当前页数及总页数，我们从相关的元素中查找，可以在自定义页数的监听器里找到获取所有页数的方法为window.getTotalPage()，注意这里的window对象是iframe的window。我们切换到控制台，第一次使用控制台执行js语句需先输入一句指令（具体指令控制台中会有相应提示），之后输入frames.get，我们能看到其相关的方法，里面就有获取当前页面的方法getCurrentPage。
# Step2 行动
根据上面侦查到的信息，我们可使用以下js脚本进行电子书的页面抓取
```
function download(canvas, file_name) {
var MIME_TYPE = "image/png"; //保存图片的格式
var img_url = canvas.toDataURL(MIME_TYPE); //canvas保存的图片链接
var dl_link = document.createElement('a');
dl_link.download = file_name;
dl_link.href = img_url;
dl_link.dataset.downloadurl = .join(':');
dl_link.click(); //开始下载
}
function next(i, page_cnt){
var frame_document = null;
while(frame_document == null){ // 找出当前页所在iframe的document对象
for(var idx = 0; idx < 3; idx += 1){
if(frames.getCurrentPage != null && frames.getCurrentPage() == page_cnt){
frame_document = frames.frameElement.contentDocument;
break;
}
}
}
var page = frame_document.getElementsByClassName('page'); // 获取所有class名为page的节点
var canvas = null;
while(canvas == null){
canvas = page.getElementsByTagName('canvas'); // 获取当前页的canvas
}
download(canvas, `${page_cnt}.png`); // 保存为图片
frame_document.getElementById('next').click(); // 找到下一页按钮并模拟点击
i = (i + 1) % 10; // 下一次所在iframe的页数
page_cnt += 1; // 下一次的页数
var timeout = 2000 // 设置延迟2秒
if(page_cnt <= frames.getTotalPage()){ //超过总页数则停止
setTimeout(function(){next(i, page_cnt);}, timeout); // 延迟2秒获取下一页
}
}
var i = 0; // 当前iframe的页数
var page_cnt = 1; // 当前页数
setTimeout(function(){next(i, page_cnt);}); // 开始获取第一页
```
这里之所以不使用while循环来下载所有页面，是因为在控制台中一次性执行多条语句时，即使已经执行过某些使页面更新的代码，网页也不会立即更新，只有执行完所有代码之后，网页才会更新，此时电子书的页面才能够加载。这里使用了setTimeout方法来新开一个线程执行下载页面的方法，执行该方法时不会阻塞，因此当调用了该方法后会直接跳到其下面的代码，不会像循环一样停在代码段的某处，导致电子书页面不能加载。
在开始执行之前，我们先设置下载的路径及对应文件格式的下载配置，避免恼人的下载询问弹框
先将电子书跳转到第一页，之后将js代码复制到控制台后回车，便可以开始提取并下载电子书图片了
下载完图片之后，可通过运行以下python代码整合图片为pdf文件，不过需要先使用命令pip install pillow安装一下所需第三方库。
```
from PIL import Image
import os
path = r'E:\Download\page' # 图片路径
img_file = sorted(os.listdir(path), key=lambda x: int(x.split('.')))
first_img = Image.open(rf'{path}\{img_file}').convert('RGB')
imgs = ]
first_img.save(rf'{path}\book.pdf', 'PDF', resolution=100.0, save_all=True, append_images=imgs)
```
执行完代码后，可以发现在图片所在目录下多了一个book.pdf文件
# 结语
以上过程可作为一些无法获取源文件网站的在线电子书抓取参考，针对这个网站，论坛里已经有人提出可以直接从url提取出源文件地址了，如我上面的网址https://pdfxz.pmph.com/mediapreview/pdf/dist/index.html?url=https://pdfxz.pmph.com/pdffile/9aa409e0102e4341b04b94d7e8a30d40&pagesize=10&total=164 ，提取之后的源文件地址为https://pdfxz.pmph.com/pdffile/9aa409e0102e4341b04b94d7e8a30d40.pdf ，可以不必大费周章地去整图片了。
图挂了，打开连接，idm弹下载很尴尬。。 控制台出现多次错误
GET https://pdfxz.pmph.com/pdffile/9aa409e0102e4341b04b94d7e8a30d40/13_9aa409e0102e4341b04b94d7e8a30d40.pdf net::ERR_CACHE_OPERATION_NOT_SUPPORTED
network.js:71 The provided value 'moz-chunked-arraybuffer' is not a valid enum value of type XMLHttpRequestResponseType.
下载的图片多次出现14字节无效图片？咋办 看不到图啊大哥 图片不显示了 谢谢分解，今天我都还在琢磨。{:1_899:} 感谢楼主分享 bp946 发表于 2020-2-20 22:31
图挂了，打开连接，idm弹下载很尴尬。。
一样一样，而且下载完有输入密码提示 没有图片啊 vb好强大 图片看不了了哦。麻烦更新一下哦。
页:
[1]
2