有没有办法通过使用 casperjs 或 phantomjs 来保存当前网页？
我试图获取 html 并将其保存到文件中。但生成的文件与当时的屏幕截图有很大不同（casper.capture）。有没有办法保存当前网页？
【问题讨论】：
标签： javascript phantomjs casperjs
Andrey Borisko 建议使用磁盘缓存来检索资源。我的方案效率不高，但是你不需要解压文本文件。
在向resource.received 事件处理程序注册资源后，我使用 XMLHttpRequest 检索所有资源。然后我将资源过滤为图像、css 和字体。当前的限制是无法正确处理包含 ../ 或 ./ 之类的远程资源路径。
我使用getHTML 检索当前页面内容并遍历所有捕获的资源以用随机生成的文件名替换标记中使用的路径，该路径由完整资源 URL 的一部分标识。文件扩展名是根据资源的内容类型创建的。它是使用mimeType from this gist 转换的。
由于 CSS 文件可能包含背景图像或字体，因此必须在保存到磁盘之前对其进行处理。提供的loadResource 函数加载资源，但不保存。
由于使用 XMLHttpRequest 下载资源，必须使用 --web-security=false 标志调用脚本：
casperjs script.js --web-security=false
script.js
var casper = require("casper").create();
var utils = require('utils');
var fs = require('fs');
var mimetype = require('./mimetype'); // URL provided below
var cssResources = [];
var imgResources = [];
var fontResources = [];
var resourceDirectory = "resources";
var debug = false;
fs.removeTree(resourceDirectory);
casper.on("remote.message", function(msg){
this.echo("remote.msg: " + msg);
});
casper.on("resource.error", function(resourceError){
this.echo("res.err: " + JSON.stringify(resourceError));
});
casper.on("page.error", function(pageError){
this.echo("page.err: " + JSON.stringify(pageError));
});
casper.on("downloaded.file", function(targetPath){
if (debug) this.echo("dl.file: " + targetPath);
});
casper.on("resource.received", function(resource){
// don't try to download data:* URI and only use stage == "end"
if (resource.url.indexOf("data:") != 0 && resource.stage == "end") {
if (resource.contentType == "text/css") {
cssResources.push({obj: resource, file: false});
}
if (resource.contentType.indexOf("image/") == 0) {
imgResources.push({obj: resource, file: false});
}
if (resource.contentType.indexOf("application/x-font-") == 0) {
fontResources.push({obj: resource, file: false});
}
}
});
// based on http://docs.casperjs.org/en/latest/modules/casper.html#download
casper.loadResource = function loadResource(url, method, data) {
"use strict";
this.checkStarted();
var cu = require('clientutils').create(utils.mergeObjects({}, this.options));
return cu.decode(this.base64encode(url, method, data));
};
function escapeRegExp(string) {
// from https://stackoverflow.com/a/1144788/1816580
return string.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
}
function replaceAll(find, replace, str) {
// from https://stackoverflow.com/a/1144788/1816580
return str.replace(find, replace);
}
var wrapFunctions = [
function wrapQuot1(s){
return '"' + s + '"';
},
function wrapQuot2(s){
return "'" + s + "'";
},
function csswrap(s){
return '(' + s + ')';
}
];
function findAndReplace(doc, resources, resourcesReplacer) {
// change page on the fly
resources.forEach(function(resource){
var url = resource.obj.url;
// don't download again
if (!resource.file) {
// set random filename and download it **or** call further processing which in turn will load ans write to disk
resource.file = resourceDirectory+"/"+Math.random().toString(36).slice(2)+"."+mimetype.ext[resource.obj.contentType];
if (typeof resourcesReplacer != "function") {
if (debug) casper.echo("download resource (" + resource.obj.contentType + "): " + url + " to " + resource.file);
casper.download(url, resource.file, "GET");
} else {
resourcesReplacer(resource);
}
}
wrapFunctions.forEach(function(wrap){
// test the resource url (growing from the back) with a string in the document
var lastURL;
var lastRegExp;
var subURL;
// min length is 4 characters
for(var i = 0; i < url.length-5; i++) {
subURL = url.substring(i);
lastRegExp = new RegExp(escapeRegExp(wrap(subURL)), "g");
if (doc.match(lastRegExp)) {
lastURL = subURL;
break;
}
}
if (lastURL) {
if (debug) casper.echo("replace " + lastURL + " with " + resource.file);
doc = replaceAll(lastRegExp, wrap(resource.file), doc);
}
});
});
return doc;
}
function capturePage(){
// remove all <script> and <base> tags
this.evaluate(function(){
Array.prototype.forEach.call(document.querySelectorAll("script"), function(scr){
scr.parentNode.removeChild(scr);
});
Array.prototype.forEach.call(document.querySelectorAll("base"), function(scr){
scr.parentNode.removeChild(scr);
});
});
// TODO: remove all event handlers in html
var page = this.getHTML();
page = findAndReplace(page, imgResources);
page = findAndReplace(page, cssResources, function(cssResource){
var css = casper.loadResource(cssResource.obj.url, "GET");
css = findAndReplace(css, imgResources);
css = findAndReplace(css, fontResources);
fs.write(cssResource.file, css, "wb");
});
fs.write("page.html", page, "wb");
}
casper.start("http://www.themarysue.com/").wait(3000).then(capturePage).run(function(){
this.echo("DONE");
this.exit();
});
奇迹发生在findAndReplace。 capturePage 是完全同步的，因此可以在任何地方放下它而不会感到头疼。
mimetype.js 的网址
【讨论】：
不，我认为没有简单的方法可以做到这一点，因为 phantomjs 不支持以 mht 格式 (Render as a .mht file #10117) 呈现页面。我相信这就是你想要的。 因此，它需要一些工作来实现这一点。我做了类似的事情，但我正在做相反的事情，我有一个渲染的 html 代码，我通过 phantomjs 渲染成图像/pdf。我必须先清理文件，它对我来说很好。
所以，我认为你需要做的是：
剥离所有js调用，如script标签或onload属性等。
如果您可以从本地访问 css、图像等资源（并且您不需要对抓取页面的域进行身份验证），那么您需要更改 src 的相对路径绝对属性以加载图像/等。
如果您在打开页面时无权访问资源，那么我认为您需要实现 similar script 在 phantomjs 加载页面时下载这些资源，然后将 src 属性重定向到该文件夹或者可能使用数据 uri。
您可能还需要更改 css 文件中的链接。
这将显示您当前缺少的图像\字体和样式。
我相信还有更多的积分。如果您需要更多信息，我会在看到我的代码后更新答案。
【讨论】：