如何下载网页中的 pdf 文件?一起打败「只给看不给下」魔咒!

之前在头秃期末月要整理复(yu)习(xi)资料的时候,发现好几位老师给的资料是放在线上学习平台的,并且几乎都设置为了「只允许阅读」模式。

就算不吐槽我一学期用上了学习通、微助教、云班课、雨课堂、智慧树这么多个平台,也一定要吐槽只能看不能下载的资料有多不方便使用。

于是我顺便研究了下「如何下载网页中的 pdf 文档」这个问题,今天就来和大家分享一下~

当然这里还是得先说明,下载后的内容仅用于个人学习,请勿作他用,否则可能存在侵权嫌疑。

01 直接下载

可以直接用浏览器打开的 pdf 文档(即网址为 balabalabala.pdf 的),这个不需要过多介绍,点击下载即可。另一种虽然没有提供「下载」按钮,但能通过浏览器「打印」另存为 pdf 的,也无需多说。

02 通过获取文件路径进行下载

这种方法适用于 HTML5 页面中内嵌 pdf 的下载,基本操作思路是通过开发者工具来找到 pdf 存取的文件路径。

如果你对 H5 有一些了解,看得懂 Elements 里那些东西,自然是可以从中检索(Ctrl + F)出 .pdf 后缀的文件源,再从 Sources 中确定它的服务器源,从而推断得到它的路径。

但是,对的,我真的有很多但是。如果是不懂这些的朋友,或许可以尝试更简便的另一种方法。

我们都知道你所能在网页看到的东西都是存放在服务器的,当你进入网页后它会发送一个请求出去,获取到数据之后再呈现给你。所以这个过程的大意就是:嘿有位朋友需要看 pdf 啦,俺来你这拿给 ta 看看喔!

那么,我们就可以从它的操作信息中找到我们需要的文件路径。页面中的网络操作信息——比如 HTTP 请求和响应、Cookie 等内容——都会记录在 Network 面板中,我们在这里做点小动作重新请求一次进行筛选就好,具体操作如下:

step 1 右键选择「检查」或是按下「 F12」 进入开发者工具。

step 2 点击「 Network 」,选择筛选图标,点击「XHR」。如果此时面板无内容,按下「 Ctrl + R 」重新向服务器请求一次数据。

step 3 找到 pdf 文件,右键选择「Open in new tab」,点击下载即可。如果你刷新出来的 Network 内容较多,可以点击 Size 进行排序。一般来说,pdf 文件都相对比较大,排序后更容易找到它。

step 4 此时我们就可以获取到 .pdf 的地址了,点击下载即可。

还需要说明的是,如果 Network 中并没有完整的 .pdf,而是一行行的 .jpg ,我们只需要将所有 jpg 图片文件下载后再进行一次合并操作即可(合并操作拉至文末最后一部分查看),不过这样会牺牲掉一定的清晰度。

评论区有朋友似乎没太明白我这里说的内容,网站没有提供完整的 pdf 而是提供的图片的话,解决思路是下载图片后合并,补充详细操作步骤如下(2022.09.05):

step 1 右键选择「检查」或是按下「 F12」 进入开发者工具。

step 2 点击「 Network 」,如果此时面板无内容,按下「 Ctrl + R 」重新向服务器请求一次数据。

step 3 找到 .png 文件(或者是其他的图片格式后缀,如 .jpg 等),右键选择「Open in new tab」,点击下载即可。如果你刷新出来的 Network 内容较多,可以点击 name 进行排序。如果这里没有找到全部的 .png 文件,下拉网页查看一次即可。

step 4 此时我们就可以获取到 .png 的地址了,逐张保存后使用本文 4.1 小节的方法将图片合并为 .pdf 即可。

关于这个网站,可以再多说几句。我们观察域名会发现其实下载地址很有规律:

按需更改为「https://hbba.sacinfo.org.cn/hbba_onlineRead_page/+后缀+/页码.png」即可获取到文档图片的下载地址。

另外,有些情况下可能没有很好找的文件后缀名,可以边滑动预览 pdf,观察 network 中随之增加的条目,也可以获得相关地址。

03 通过浏览器脚本下载

之前网上盛传的学习通中通过找到 object id 后进入 d0.ananas.chaoxing.com/ 进行课件下载的方法,同样也是上一种思路。

不过现在学习通中的课件是没有办法这样下载成功的,这里提供另一种解决途径——使用用户脚本进行下载。

相对于上一种方式还要自己费点劲找到文件路径,使用脚本添加下载功能无疑是懒癌首选。

这里还是再说明一下用户脚本是什么东西。简单来说它是一段用于优化网页浏览体验的代码,有些可以过滤掉部分网页内容,有些则可以为网站添加新的功能。

好的,请不要看到「代码」这两个关键词就觉得不会技术的麻瓜无法使用脚本。事实上,很多爱撒人间的大佬都会将写好的用户脚本分享出来,下载后就可以直接使用,不需要你自己写。

我们可以在 GreasyFork、 GitHub/GistUserscript.Zone SearchOpenUserJS 等网站中很轻松地获取到这些用户脚本。

解决了用户脚本是什么,怎么获取的问题之后,我们就可以来谈谈如何使用它了。

使用用户脚本的前提是,你需要一个用户脚本管理器。其实就是在你的浏览器中安装一个插件了啦,比较流行的是 Tampermonkey 和 Violentmonkey。前者支持的浏览器更多一些,后者则是开源,择一下载即可。

安装完用户脚本管理的插件之后,浏览器右上角会出现相应的插件图标(图上为 Chrome 中安装 Tampermonkey 后的示例)。

以「站点名称 + 下载」为关键词在上述脚本获取网站中进行检索,这里以 Greasy Fork 为例。选择脚本后,点击安装。安装好脚本后确认脚本已启用,重新刷新页面。在原有的课件下方会出现下载选项,点击就可以进行下载了。

这种方法的局限性是如果是相对冷门的站点,很可能并没有相应的脚本可以直接使用。目前来说像是常用的文库、线上学习平台、知乎 / B 站等知名网站还是都有相当数量的脚本可供选择的。

当然,在这种思路下使用 IDM / FDM 进行下载也是一种选项,这里就不再作过多说明。

04 暴力破局法

这种方法适用面最广,但相对来说比较麻烦。

对于那种网课视频中的 ppt / pdf 资料,或是非常非常古早的用 Flsh 嵌入的 pdf 以及微信 H5 页面里的文档,处理起来本就烦人且棘手可以考虑使用该法。

这篇文章的一切基础是总归内容是你能看到的,那毕竟看都能看了,我们延续获取图片合并成 pdf 的思路……这说白了无非就是截图、翻页、截图、翻页…重复个百八十次罢了 。

那这种重复性操作何必自己动手呢,来试试这两种方法:

4.2

另一种则是通过键鼠录制软件模拟那百八十次的截图翻页操作,得到图片文件进行合并。

首先让我们祭出这款 Tiny Task,大小很感人功能很强大,34KB 帮你解放双手,不再充当无脑截图大笨蛋。

简单来说这款软件的功能就是根据你所录制好的鼠标、键盘操作样例,不断重复该样例操作。在录制操作之前,我们可以先设置一下截图工具。

如果你惯用的截图软件提供了「截图自动保存」功能,记得先设置一下自动保存路径。如果没有的话,录制操作的时候多一步保存操作也行,问题不大。

打开 Tiny Task 后你可能会有些许懵圈,尤其是屏幕大的朋友,搞不好还要费神找找它在哪儿(笑。总之启动后的它非常简洁,图标即释义,无需我过多说明。

在右起首位的设置图标中,我们可以看到录制热键默认是「Ctrl + Shif + Alt + R」,这既是「开启录制」也是「结束录制」的操作热键。

回放热键默认则是「Ctrl + Shif + Alt + P」,同样的开启结束为同一个热键。你可以在这里选择修改或者直接使用默认的热键。

首先让我们先录制一遍完整的操作用于让 Tiny Task 自动模仿进行重复,具体操作如下:

step 1 按下 Ctrl + Shif + Alt + R 开启录制。

step 2 移动鼠标点击翻页按钮。

step 3 按下截图快捷键 / 点击截图,进行截图操作。如没有设置自动保存路径,此处需要多一步保存操作。

step 4 按下 Ctrl + Shif + Alt + R 结束录制。

此时操作样例已录制完成。如果是普通的 pdf 文档顺序点击翻页录制,这样录制操作样例完全没问题。如果是 ppt 内容的话,因为存在点击出现的动画效果,很可能需要多次点击才能展现出完整的单页内容,推荐在录制操作时逆序点击翻页。

接着我们在设置图标的下拉菜单中勾选上「连续播放」,同时设置好播放速度和相应的循环播放次数(还剩多少页就写多少次),再使用 Ctrl + Shif + Alt + P 进行回放即可。

这里需要注意,播放速度最好不要超过网页加载下一页画面的速度,否则容易截下不完整内容的图片。

另外在这种方法下还可能遇到的小问题是网页可能无法适应页面显示,内容不完整。

进入到我们熟悉的开发者工具,点击第二行左起第二个图标或是按下 Ctrl + Shift + M 切换到移动端模式,此时页面上方会出现模拟设备的选择栏,选择好设备和显示比例即可将内容完整显示。

如果此时分辨率不够导致截图不够清晰,可以直接使用开发者工具中的内置截图功能,即模拟设备选择栏右侧下拉菜单中的「Capture screenshot」。

图片保存位置为浏览器默认下载位置,可在浏览器设置中修改。可以去勾询问位置选项,这样可以少一步点击保存操作~

其他依旧延续上述操作思路,使用 Tiny Task 进行录制操作即可。

4.3

最后的最后,我们只剩下合并处理 pdf 的问题。还是有蛮多方法可以将图片合并成 pdf 的,比如在线网站 iLovePDF、把图片放进 word 转 pdf、批量重命名后使用电脑自带的打印、以及各种各样的 pdf 处理软件。

这里以我自己惯用的 Adobe Acrobat DC 作为示例,具体操作如下:

step 1 打开 Adobe Acrobat DC,在「文件」-「创建」中选择「将文件合并为单个 pdf」。

step 2 选中你所需要合并的文件,点击合并即可。

直接在文件管理器中全选文件,右键选择「在 Acrobat 中合并文件」,也能完成同样的操作。

如果你截图时不够精确,想要对其再进行一次裁剪处理,使用 Acrobat 也可以进行相关的编辑。

当然,如果你不喜欢体积稍微有点大的 Acrobat,也可以试试最近开源了的老牌 pad 文档编辑处理软件「PDF Patcher」( PDF 补丁丁)

传送门:github.com/wmjordan/PDF

相比较 Acrobat 几百兆字节的大小,只有 13MB 的 PDF Patcher 就非常讨喜了,不过你也得忍受一下这古早的界面。

操作同样很简单,点击菜单栏「合并」进入到操作面板,添加相关文件、设置好基本信息后,点击「生成合并文件」即可。

好啦,本文的介绍差不多到这里就结束了。如果你有更加方便的解决方法,也欢迎你在评论区与我交流。