lliudewa 发表于 2022-10-16 00:32

gb688预览-浏览器保存pdf下载的方法思路

本帖最后由 lliudewa 于 2023-10-8 11:09 编辑

# gb688预览-浏览器保存pdf下载的方法思路

## 前言(说点废话,与题目无关,算有感而发吧)
- 吾爱论坛自我感觉是我心中真正的技术论坛,自己是做web前端,喜欢web领域的逆向,奈何自己水平太低,只能打工维持生活,自己连基本混淆和复杂的解密都搞不定,每当自己对技术懈怠时, 就会去论坛看最新技术文章 ,尤其是自己每次阅读到优秀的技术文章时,都感觉自愧不如自己只掌握了前端的皮毛,当然也使自己受益良多提高了自己的逆向兴趣和技术的热爱.自己也白嫖了论坛好多软件,学习视频和资料.
- 当然良好发展离不开论坛优秀的管理员和管理制度,吾爱一直坚持原创,产生了很多优秀的文章.论坛文章的排版格式阅读体验也非常好我阅读越来很轻松.
- 最后,祝吾爱不忘初心,在未来的技术道路上越来越好(我在干什么,开局送祝福?).

## 言归正传
- 故事要从一次聊天说起,群里一个人(刚子)发了一个链接问有人能下载这个pdf吗,当时我看到是一个链接,由于在公司无法用公司电脑查看链接,就说了能帮你他下载,但需要等下班用自己电脑帮他下载.
![聊天1.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4da07d74d31d46ca82aa8faf6bffa78a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1170&h=2532&s=461363&e=png&b=f4f4f4)
- 我当时给他说,不是要pdf吗,直接ctrl+p保存为pdf就行了,他说不行,保存时是空白页面,我当时以为浏览器不支持保存pdf就没多想.
![聊天2.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/34a3c2d79d1e4227b1122788250e4d9a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1170&h=2532&s=307248&e=png&b=f3f2f2https://imgsrc.baidu.com/super/pic/item/562c11dfa9ec8a1349add920b203918fa1ecc0bf.jpg&referrerpolicy=no-referrer)
- 于是下班回去用自己的电脑chrome浏览器打开老哥的链接(下面附链接),打开要输入验证码后页面显示出来.
- 链接-浏览器btoa生成的(aHR0cDovL2MuZ2I2ODguY24vYnpnay9nYi9zaG93R2I/dHlwZT1vbmxpbmUmaGNubz0zNDBCQ0UzMzYzNkU0MjY3MEY5RjU5NUM5NURCODkwQQ==)
- 思路一
    1. 自己首先是要打开浏览器开发者工具来debug, f12居然没反应,右键也没反应,最后ctrl+shift+i才把devtool显示出来.
    2. 页面看起来是图片,就想着这些图片是怎么来的,于是重新请求进行抓包,当自己抓到图片的包,看起来和页面大差不差时,自己内心是愉悦的,想着把这些图片下载起来就行了,当自己下载下来图片点开看时,发现都是图片显示残缺的一部分,心里默默念了mmp
    ![调试1.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fcaa32feffa0418a8972b6f2025bd88f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1246&h=693&s=167861&e=png&b=f2f2f2&referrerpolicy=no-referrer)
    3. 但转念一想,不对啊,这种残缺图片,它的页面怎么就能正常展示呢,于是自己进入审查元素查看DOM结构,发现,它都是通过span元素的背景图片显示的,把多张背景通过算法计算位置叠加到一起,显示出完整页面(这个展示思路有点厉害)
    ![调试2.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6e09a3f0e9564edf923ba4034df3407c~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1299&h=655&s=53903&e=png&b=fcfcfc&referrerpolicy=no-referrer)
    ![调试3.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6cacea68d15f4960bfb040a8cdeb7df8~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1291&h=608&s=52254&e=png&b=fcfcfc&referrerpolicy=no-referrer)
    4. 于是产生了一种思路,就是自己拿到多张图片,根据算法叠加到一块,就能把页面展示出来,由于不知道什么算法,自己也不会叠加,于是这种思路卒.
- 思路二
    1. 那就使用chrome浏览器自带打印功能保存为pdf,右键点击打印发现右键没反应,原来把右键菜单屏蔽了,那就ctrl+p出来弹窗,选择保存pdf,但预览显示空白,自己还以为是浏览器预览的问题,直接保存,找到保存文件一看0kb,打开是空白,自己也没多想,就以为浏览器不支持打印,于是这种思路又卒.
    ![调试4.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/92aefd10286646118f0dea16f6d7927a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1249&h=692&s=24286&e=png&b=ffffff&referrerpolicy=no-referrer)
- 思路三
    1. 碰到难题,就打开论坛找老哥解决,于是论坛搜索gb6**,看到了一些相关的帖子,说的网站升级了,之前一句js代码就能下载,再到后来手机版接口能下载pdf版本,但现在升级了,都不能下载了,还找到了一些关于讨论下载技术的帖子,当然肯定有大佬能下载,只是没公开出来或者我没找到.自己一看都升级了连大佬也没办法,于是这种思路也卒
    [相关帖子链接](https://www.52pojie.cn/forum.php?mod=viewthread&tid=1375791&extra=&highlight=gb688&page=1)
    ![调试5.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ae12d135854f45e88a924572587b8a88~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1036&h=1270&s=88141&e=png&b=ffffff&referrerpolicy=no-referrer)
- 自己当时是搞不定了,于是当天晚上回群友消息,网站太牛逼自己搞不定
    ![聊天3](https://imgsrc.baidu.com/super/pic/item/09fa513d269759ee0ef3ee0bf7fb43166c22df4b.jpg)
## 正片开始
- 链接(aHR0cDovL2MuZ2I2ODguY24vYnpnay9nYi9zaG93R2I/dHlwZT1vbmxpbmUmaGNubz0zNDBCQ0UzMzYzNkU0MjY3MEY5RjU5NUM5NURCODkwQQ==)
- 上图也可以看出,时隔多日搞出来了下载,但群友最后已经不需要了,于是自己分享出来
- 过程是自己在看论坛精华技术文章时,感叹大佬文章写的真好同时,想到之前链接为什么浏览器打印保存pdf是空白,于是自己随便找了几个网站,保存pdf,发现预览都是有内容的,而且保存后打开是正常的pdf格式,于是想到是不是网站对保存pdf作了手脚,于是自己马上兴趣来了,去谷歌输入: **浏览器如何禁用保存pdf功能**.于是找到一条有用线索:
![正文1](https://imgsrc.baidu.com/super/pic/item/d058ccbf6c81800ab26407cef43533fa838b4769.jpg)

- 于是自己赶紧在网站下全局搜索这个 **@media print**,果然搜索出了好多信息
![正文2](https://imgsrc.baidu.com/super/pic/item/6d81800a19d8bc3e1c8b880ac78ba61ea9d3456b.jpg)

- 自己心想自己把 **@media print** 删除掉会不会就能打印了,于是自己删除掉一个调出保存pdf预览功能,果然空白的页面显示出来一些边框,自己内心狂喜,把这些 **@media print** 都删除掉不就是能保存pdf了.
![正文3](https://imgsrc.baidu.com/super/pic/item/8b13632762d0f703bc4f1b1c4dfa513d2797c575.jpg)

- 那么自己怎么把资源文件 **@media print** 全部删除?
1. 自己手动删除,通过浏览器的overrides功能覆盖掉,自己debug时采用的这种
2. 先通过浏览器找到哪些文件含有 **@media print** 通过fildder拦截响应,再利用正则把 **@media print** 替换掉,文章中采用这种
![正文4](https://imgsrc.baidu.com/super/pic/item/6a600c338744ebf8518eeaff9cf9d72a6159a777.jpg)

```javascript
   // 以下是新加的
      if(oSession.fullUrl.Contains("/bzgk/css/bootstrap.min.css") || oSession.fullUrl.Contains("/bzgk/css/viewer.css")){
            var responseStringOriginal = oSession.GetResponseBodyAsString();
            responseStringOriginal = responseStringOriginal.replace(/@media print/g,'@m8edia print');
            oSession.utilSetResponseBody(responseStringOriginal)
      }
```
3. 于是自己保存为pdf时,内容就显示出来了(要勾选背景图形)
![正文5](https://imgsrc.baidu.com/super/pic/item/b3b7d0a20cf431adb92bcdf90e36acaf2fdd9871.jpg)
4. 但是却只能打印一页,自己去查看DOM结构,发现有个元素overflow:auto于是就把这个去掉
![正文6](https://imgsrc.baidu.com/super/pic/item/bf096b63f6246b6044f53cb4aef81a4c500fa273.jpg)
5. 上面再保存时,就显示了29页,自己保存下来,发现文件大小只有1M,不对啊,上次调试保存下来,文件有8M大小,于是找原因发现页面采用了懒加载,只有把网页页面拖动到最后,dom才会把所有的图片加载出来,保存pdf时后面的页面才会显示出来
![正文7](https://imgsrc.baidu.com/super/pic/item/aa64034f78f0f7365804c2c14f55b319eac4137c.jpg)
6. 自己保存下来,文件有8M多,自己通过pdf也能正常打开,上面还是有水印的
![正文8](https://imgsrc.baidu.com/super/pic/item/d0c8a786c9177f3edbc072cd35cf3bc79e3d567e.jpg)
- 至此全文结束,感谢你的阅读(可以利用此思路来保存你想要保存任何预览是空白的网页).

涛涛不绝00 发表于 2022-10-18 09:35

本帖最后由 涛涛不绝00 于 2022-10-18 09:40 编辑

以前写过一个tampermonkey脚本,方法和楼主思路一是一样的,目前还可以用
https://github.com/chengdong0421/GB_tampermonkey
在预览界面上先点击”提取页面“,稍等一会再点击”保存pdf“。不过,对于页面太多的标准会内存不足。技术有限,只能做到这一步了,有需要的可以拿去用

希望论坛内有技术大佬帮忙优化优化,破除内存不足的问题



wg521125 发表于 2022-10-18 20:09

成品来了.

逍遥一仙 发表于 2022-10-16 12:20

style里的就是图片对应位置,下载后用gdi+切割,并按计算好的位置画回去。最后合并成pdf即可。


18cm60min 发表于 2022-10-16 22:31

kxykxy157 发表于 2022-10-16 14:16
太及时了,昨天还发愁呢,今天就见到了
http://c.gb688.cn/bzgk/gb/showGb ... 1037B330E1F2EF60932
这个 ...
这个网站我一般用MHTML的格式保存.
我用的是EDGE浏览器.CTRL+S保存,单个文件,MHTML格式

唯一的缺点的就是必须要一直先拉到底,让所有的页面加载出来.

侃遍天下无二人 发表于 2022-10-16 20:57

这网站太邪门了,图片这样切割加载起来要耗费36倍的内存,因为每个块都是完整的图片
破解办法是利用canvas,参考 class 的值确定图片块的位置,重新将图片拼凑出来后输出到屏幕上,并删掉原有的内容(为了节省内存)
pdfImg-1-4 表示这张图的切片位于 第一列 第四行
每张图片的大小都是 119px × 168px
style中的 background-position: -600px -1859px; (往左上方移动)则表示应该从这张图片的 (600,1859) 处开始截取(截的时候要从左上移到右下方开始)
根据这些就可以自己画图了,画好后导出为jpg
然后既然图片都自己画了,再调用jsPDF把他们塞进pdf里直接导出效果会更好,可以避免页面错乱和打印到其他东西的问题

我是一只小小 发表于 2022-10-17 14:25

楼主好厉害但对我这种小白真的会抛弃掉非得要pdf的想法
1.保存为mhtml形式,然后用quicklook预览
2.截长图吧直接,手机端小米手机可以+QQ浏览器可以还有其他的软件也可以,电脑端就很多了faststone capturer比较常用,然后打印成PDF,需要文本的话识别一下

独孤唐 发表于 2022-10-16 20:02

国标、行业标准文件可以在 标准下载网 下载,正好前几天帮人试过可行
示例:消防员电梯制造与安装安全规范
https://www.biao-zhun.cn/111269.html

阿源小哥哥 发表于 2022-10-22 21:58

wg521125 发表于 2022-10-18 20:09
成品来了.

点击解析下载没动静阿,下载下来的文件在哪里呢

mdictfan 发表于 2022-10-16 11:29

感谢授人以渔!

郭小斌 发表于 2022-10-16 10:12

谢谢 很有用

lddhnly 发表于 2022-10-16 09:56

感谢分享,收藏学习啊。

yiguodunbuxia 发表于 2022-10-16 10:15

感谢分享思路和方法

dtadsl 发表于 2022-10-16 10:18

我一般用这个插件 Print Friendly & PDF 下载 网页PDF ,比浏览器自带的好用

edenszero 发表于 2022-10-16 10:33


感谢分享很有用

叫我小王叔叔 发表于 2022-10-16 10:42

dtadsl 发表于 2022-10-16 10:18
我一般用这个插件 Print Friendly & PDF 下载 网页PDF ,比浏览器自带的好用

这个网站,这个插件好像不太好使。

long8586 发表于 2022-10-16 10:54

学习了!
页: [1] 2 3 4 5 6 7 8 9 10
查看完整版本: gb688预览-浏览器保存pdf下载的方法思路