python课本图片_【js+python】在线电子书页面图片抓取整合为pdf

声明

本贴所涉及内容仅用于学习交流，请勿作他用。

前言

你是否有过这样一段经历，有一本很喜欢的电子书就显示在你浏览器上，可你就是无法将之保存下来随心所欲地浏览，只能咬牙切齿乖乖地使用浏览器来阅读。本帖将以某网站的电子书为例，讲解如何利用浏览器将电子书保存为图片，并整合为pdf版电子书。

所用工具

火狐浏览器

python环境（用于整合图片为pdf）

Step1 侦查

查看该页面对应的节点，发现它只是一张水印图

182921ge9qw1qq8wqztlmq.png (259.69 KB, 下载次数: 0)

2020-3-1 12:48 上传

删除它

182924qmehh6hnvcmznet2.png (285.27 KB, 下载次数: 0)

2020-3-1 12:48 上传

重复选择元素的操作，如若不是我们所需的页面图片元素则删除，直到找到为止

182927r505eurnfnvvnvfn.png (279.14 KB, 下载次数: 1)

2020-3-1 12:48 上传

这里我们看到电子书的页面是用一个canvas标签显示。继续一番侦查后我们可以发现，电子书的页面并不会一次全部加载，只有当浏览器翻到那个页面附近后才开始加载，并且较外一层节点的class名为page的div标签会置属性data_loaded为true，没加载的页面则没有canvas标签，也就不能保存下相应页面图片了。这提醒我们：要保存整本电子书，需要模拟电子书的翻页操作，使得页面能够加载，而模拟翻页操作只需调用该网页自带的“下一页”按钮的click函数，即可实现翻页操作。

182933cjbdmzn642t2m6av.png (293.17 KB, 下载次数: 0)

2020-3-1 12:48 上传

继续探索，我们能够看到更外层有着3个iframe标签，每个iframe里面包含了10个电子书页面，通过手动翻页，我们还能够发现每10页会切换到下一个iframe，通过这种方式循环切换这3个iframe。

182930k3gw68sm550cakzs.png (282.13 KB, 下载次数: 0)

2020-3-1 12:48 上传

182938p24vsppv3y0006sh.png (852.91 KB, 下载次数: 0)

2020-3-1 12:48 上传

为了能够得知当前页数及总页数，我们从相关的元素中查找，可以在自定义页数的监听器里找到获取所有页数的方法为window.getTotalPage()，注意这里的window对象是iframe的window。我们切换到控制台，第一次使用控制台执行js语句需先输入一句指令（具体指令控制台中会有相应提示），之后输入frames[0].get，我们能看到其相关的方法，里面就有获取当前页面的方法getCurrentPage。

184451empbn18zb1trpjvt.png (1018.13 KB, 下载次数: 0)

2020-3-1 12:49 上传

182941re0e2zt022xuetez.png (985.91 KB, 下载次数: 0)

2020-3-1 12:49 上传

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 = [MIME_TYPE, dl_link.download, dl_link.href].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[idx].getCurrentPage != null && frames[idx].getCurrentPage() == page_cnt){

frame_document = frames[idx].frameElement.contentDocument;

break;

}

}

}

var page = frame_document.getElementsByClassName('page'); // 获取所有class名为page的节点

var canvas = null;

while(canvas == null){

canvas = page[i].getElementsByTagName('canvas')[0]; // 获取当前页的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[0].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方法来新开一个线程执行下载页面的方法，执行该方法时不会阻塞，因此当调用了该方法后会直接跳到其下面的代码，不会像循环一样停在代码段的某处，导致电子书页面不能加载。

在开始执行之前，我们先设置下载的路径及对应文件格式的下载配置，避免恼人的下载询问弹框

182944xvl610ffsc1lj1f0.png (120.92 KB, 下载次数: 0)

2020-3-1 12:46 上传

先将电子书跳转到第一页，之后将js代码复制到控制台后回车，便可以开始提取并下载电子书图片了

182947oajwpppw7jwu2i15.png (490.91 KB, 下载次数: 1)

2020-3-1 12:49 上传

205027j5j5f9go507oocej.png (538.66 KB, 下载次数: 0)

2020-3-1 12:49 上传

下载完图片之后，可通过运行以下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('.')[0]))

first_img = Image.open(rf'{path}\{img_file[0]}').convert('RGB')

imgs = [Image.open(rf'{path}\{i}').convert('RGB') for i in img_file[1:]]

first_img.save(rf'{path}\book.pdf', 'PDF', resolution=100.0, save_all=True, append_images=imgs)

执行完代码后，可以发现在图片所在目录下多了一个book.pdf文件

205609rs7timscmxxus6wa.jpg (354.81 KB, 下载次数: 0)

2020-3-1 12:49 上传

结语

以上过程可作为一些无法获取源文件网站的在线电子书抓取参考，针对这个网站，论坛里已经有人提出可以直接从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 ，可以不必大费周章地去整图片了。