angularjs - Puppeteer 和 angularjs html 渲染问题

Question

我正在尝试使用 puppeteer 预渲染用 angularjs 编写的网页。我的应用程序的堆栈是 MEAN (Mongo-Express-Angular-NodeJs)。

渲染逻辑如下:

var args = [
    '--disable-gpu',
    '--disable-setuid-sandbox',
    '--no-sandbox',
  ];


var getPageContent = async function getPageContent(request)
{
    var url = getUrl(request);
    var browser = await puppeteer.launch({headless: true, handleSIGINT: false, args: args});
    var page = await browser.newPage();
    await page.goto(url, {waitUntil: 'networkidle2'});
    var html = await page.content();
    await browser.close();
    return html;
};

一切正常，我确实得到了页面的 html。不过我以有 Angular 的方式获取html。如下所示:

<title> {{meta.title}} </title>
<meta property="og:title" content="{{meta.title}}">
<meta property="og:description" content="{{meta.description}}">
<meta property="og:image" content="{{meta.imageSrc}}">

我想要的是页面的实际内容，而不是 {{}}。像这样的东西:

<title> My Page </title>
<meta property="og:title" content="My Page">
<meta property="og:description" content="Page about saving humanity">
<meta property="og:image" content="url_to_image">

我想知道这是否是 page.content() 的问题？或者是否有任何其他 puppeteer API 可以返回页面的实际原始 html？

Answer 1

module.exports.getmessages = async (page, selector, message) => {
const messages = [];
const bodyHandle = await page.$$(selector);
console.log(" table of messages length : ", bodyHandle.length);
const length = bodyHandle.length;
console.log(message + "switch ordre after load :\n")
for (let i = 0; i < length; i++) {
    const element = bodyHandle[i];
    const content = await page.evaluate(body => body.textContent, element);
    console.log("message" + i + ": ", content + "\n");
    messages[i] = content;
}
return messages;}

您好，我使用 vue js 的模拟代码，我得到了一个带有 vue 创建的正确值的 html 代码，我希望该代码对您有用;)