首发地址： https://mp.weixin.qq.com/s/w6v3RhqN0hJlWYlqTzGCxA

前言

之前在PC微信逆向) 定位微信浏览器打开链接的call提过要写一个保存公众号历史文章的工具。这篇文章先写一个将文章保存成pdf和html的工具，后面再补充一个采集历史的工具，搭配使用就能保存所有历史文章到本地。

如果是在浏览器打开文章，想保存成pdf和html很简单，右键打印(pdf)和另存为(html)就可以了。想在程序里实现则需要一些自动化工具，例如playwright、puppeteer等，但这些都没有移植到aardio。

cdp

先科普一个知识：大部分自动化工具都是基于chromium内核浏览器自带的一个叫Chrome DevTools Protocol^[1]的协议(后面简称cdp)，它涵盖了对谷歌浏览器的所有自动化操作。

cdp协议使用jsonrpc和谷歌浏览器通信，所以完全可以在aardio也实现一个类似drissionpage的库，但是工程量不小，我没那么多时间去实现。所以只在用到哪部分的时候完善哪部分接口，不会去完整实现一个drissionpage。

用到的cdp接口

保存成html

cdp协议里并没有直接获取页面html的接口，但是可以通过获取页面document.body.outerHTML的值来得到。而获取该值则是通过Runtime.evaluate^[2]接口执行js表达式并返回结果。

不过这样保存的html打开之后，会显示一直转圈，并且图片无法加载。这是因为有些图片用的相对链接，解决方法就是替换相对链接为绝对链接。不过我更推荐保存成mhtml，这样图片就会被嵌入到html里，不需要从网络加载。

保存成mhtml

cdp协议里保存成mhtml的接口是Page.captureSnapshot^[3]

保存成pdf

接口是Page.printToPDF^[4]

简单使用

aardio其实提供了cdp协议的封装库web.socket.chrome，用法可以在案例里搜索这个。

保存成mhtml

import win.ui;

import console

import web.view;

import web.socket.chrome;

/*DSG{{*/

var winform = win.form(text="测试";right=759;bottom=469;bgcolor=16777215)

winform.add()

/*}}*/

var wb = web.view(winform,,"--remote-debugging-port=29999");

winform.text = "正在打开网页，请稍候 ……"

winform.show();

var ws = wb.openRemoteDebugging();

ws.Page.navigate(

url = "https://mp.weixin.qq.com/s/Nik8fBF3hxH5FPMGNx3JFw";

);

wb.wait("Nik8fBF3hxH5FPMGNx3JFw");

win.delay(3000)

import crypt;

ws.Page.captureSnapshot().end = function(result,err){

if(result[["data"]]){

string.save("示例.mhtml", result.data)

winform.text = "保存mhtml成功"

}

}

win.loopMessage();

虽然保存了，但是图片并没有显示，应该是图片还没加载就已经开始保存了，并且有些图片只有滑动到底部时才会加载。所以还需要先下拉到底部，让页面把图片全部加载出来再进行保存。

异步改同步

这是个异步库，上面的写法看起来不太顺眼，可以将它稍微封装一下改为同步库使用。

callWait = function(ws, method,params,timeout,interval){

if(!ws) return;

var done = null;

var t = ..string.split(method,".");

var func = ws;

for(i=1;#t;1){

func = func[t[i]];

}

var result;

func(params).end = function(r,err){

if(!err) {

done = true;

result = r;

}

};

..win.wait(lambda() done,winform,timeout:15000,interval);

return result;

}

这样调用就顺眼多了，当然习惯了异步的话也可以不改。

var result = callWait(ws, "Page.captureSnapshot", {});

string.save("示例.mhtml", result.data)

滑动到底部

滑动操作用JavaScript比cdp接口要简单的多，所以先找gpt写一段JavaScript滑动到底部的代码(需要多调教几次，最初版本肯定是有错误的)。

scrollPageBottom = function(ws){

..win.delay(1000);

var scrollToEnd = `(async function scrollPage() {

return new Promise(async (resolve) => {

var distance = 500;

var count = 0;

window.scrollTo(0, 0);

window.scrollTo(0, 0);

var scroll = async () => {

var lastScrollTop = document.documentElement.scrollTop;

window.scrollBy(lastScrollTop, distance);

await new Promise(r => setTimeout(r, 500));

var newScrollTop = document.documentElement.scrollTop;

var scrollHeight = document.body.scrollHeight;

console.log(lastScrollTop, newScrollTop, scrollHeight);

if(lastScrollTop === newScrollTop) count += 1;

if ((lastScrollTop === newScrollTop && newScrollTop/scrollHeight > 0.8) || count > 2) {

resolve();

} else {

await scroll();

}

};

await scroll();

});

})();`;

var params = {

"expression": scrollToEnd,

"awaitPromise": true,

"returnByValue": true

}

// 开始滑动

callWait(ws, "Runtime.evaluate", params);

// 有时候滑动还未结束，上面的代码就返回了，所以继续等待

..win.wait(function(){

var r= callWait(ws, "Runtime.evaluate", {

expression="document.documentElement.scrollTop/document.body.scrollHeight > 0.8";

awaitPromise=true;

returnByValue=true

});

return r;

},,15000,500)

}

封装成库

全部放出来代码会太多，所以将代码封装成了库(cdpdriver)，放到了之前写的aardio教程) 搭建自己的扩展库仓库里，有兴趣的可以去github自己看怎么实现的。

封装的库使用示例如下:

import cdpdriver;

import web.view;

import win.ui;

import console

/*DSG{{*/

var winform = win.form(text="cdp协议";right=759;bottom=469)

winform.add()

/*}}*/

var initWebView = function(){

var cmdArgs = `--remote-debugging-port=29999`;

winform.webView = web.view(winform,,cmdArgs);

if(!_STUDIO_INVOKED) winform.webView.enableDevTools(false);

winform.show();

winform.stateTable = {

pageReady=null;//页面加载完成

}

var ws = winform.webView.openRemoteDebugging();

var cdpClient = cdpdriver(ws);

// 启用Page事件

ws.Page.enable();

// Page.domContentEventFired和Page.loadEventFired事件触发表示页面加载完成

ws.on("Page.domContentEventFired",function(param){

winform.stateTable.pageReady = true;

})

ws.on("Page.loadEventFired",function(param){

winform.stateTable.pageReady = true;

})

winform.stateTable.pageReady = null;

var url = "https://mp.weixin.qq.com/s/Nik8fBF3hxH5FPMGNx3JFw";

winform.webView.go(url);

win.wait(lambda() winform.stateTable.pageReady, winform.hwnd, 15000, 50);

win.delay(1000)

if(winform.stateTable.pageReady){

cdpClient.scrollPageBottom();

var mhtml = cdpClient.outerMHTML;

string.save("测试.mhtml", mhtml)

}

}

initWebView()

winform.show();

win.loopMessage();

这样保存的mhtml图片显示也正常

pdf也是正常的

严重bug

当某个网页的图片特别多的时候，保存的mhtml文件特别大的时候(比如八九十兆)，这时候控制台就会出现no enough memory的错误，经过多天的排查，没有找到具体原因，不过我猜测是aardio异步传输数据时，申请的内存空间小于这个文件大小，所以当传输文件的数据时就会出错。

解决方法

这个解决不了只能不用这个异步库，自己基于官方扩展库里的hpsocket实现一个jsonrpc。

但是官方扩展库的hpsocket使用的dll还是2017年的版本，为了避免之前版本有未修复的bug，去github更新一下hpsocket的dll。

hpsocket的dll下载地址: https://github.com/ldcsaa/HP-Socket/releases

hpsocket封装后的使用案例

import win.ui;

import web.view;

/*DSG{{*/

mainForm = win.form(text="hpsocket cdp协议";right=757;bottom=467)

mainForm.add()

/*}}*/

var threadMain = function(debugPort){

import win;

import cdpdriver.hpcdp;

import cdpdriver.jsonrpc;

import kilogging;

var logger = kilogging();

..cdpdriver.jsonrpc.waitDebuggingPages(debugPort);

var wsClient = ..cdpdriver.jsonrpc();

wsClient.connect(debugPort);

wsClient.send("Page.enable");

wsClient.on("Page.domContentEventFired", function(){

..thread.set("pageReady" + owner.guid, true);

})

wsClient.on("Page.loadEventFired", function(){

..thread.set("pageReady" + owner.guid, true);

})

var cdpClient = ..cdpdriver.hpcdp(wsClient);

var url = "https://mp.weixin.qq.com/s/Nik8fBF3hxH5FPMGNx3JFw";

var pageReadyFlag = "pageReady" + wsClient.guid;

..thread.set(pageReadyFlag, null);

logger.info("开始下载 (%s) pdf和html", url);

wsClient.send("Page.navigate",{"url":url})

win.wait(function(){

return thread.get(pageReadyFlag);

},, 10000, 100);

if(!thread.get(pageReadyFlag)) {

logger.info("页面(%s)访问失败", url);

return;

}

cdpClient.scrollPageBottom();

// 计算网页图片的数量

var imgCount = cdpClient.runJsCode('document.querySelectorAll("#img-content img").length;')

// 如果获取数量失败，则默认是40

imgCount := 40;

// 每张图片会多等待300毫秒

..win.delay(imgCount * 300);

var mhtmlData = cdpClient.getOuterMHTML();

var mhtml = mhtmlData ? mhtmlData.data;

var pdfData = cdpClient.getPdf();

var pdf = pdfData ? pdfData.data;

logger.info("获取到的文件大小，pdf(%s), mhtml(%s)",tostring(#pdf), tostring(#mhtml));

if(pdf) {

var pdfBytes = ..crypt.bin.decodeBase64(pdf);

..string.save("测试.pdf", pdfBytes);

logger.info("保存pdf成功，路径：%s", io.fullpath("测试.pdf"));

}

if(mhtml) {

..string.save("测试.mhtml", mhtml);

logger.info("保存mhtml成功，路径：%s", io.fullpath("测试.mhtml"));

}

}

var initWebView = function(){

var cmdArgs = `--remote-debugging-port=29999`;

mainForm.webView = web.view(mainForm,,cmdArgs);

mainForm.show();

var debugPort = mainForm.webView.remoteDebuggingPort;

thread.invoke(threadMain,debugPort)

}

initWebView()

mainForm.show();

return win.loopMessage();

很明显，hpsocket写代码要比web.socket.chrome麻烦的多，因为它是基于多线程的，所以正常情况下推荐使用web.socket.chrome，只有当你遇到不能使用的情况，才换hpsocket。

引用链接

• [1] https://chromedevtools.github.io/devtools-protocol/
• [2] https://chromedevtools.github.io/devtools-protocol/tot/Runtime/#method-evaluate
• [3] https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-captureSnapshot
• [4] https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-printToPDF

本文由博客一文多发平台 OpenWrite 发布！