使用 Puppeteer 使用 NodeJS 和 Express 截取 EJS 模板

Question

我有 NodeJs/Express 應用程序，我想在其中打開新的瀏覽器 window 並在其中呈現本地 EJS 視圖。 我正在嘗試使用 Puppeteer 來做到這一點。

const puppeteer = require('puppeteer');
router.post('/new_window', async (req, res) => {
  try {
     const browser = await puppeteer.launch({headless: false});
     const page = await browser.newPage();
     const pageContent = ejs.render('../views/mypage.ejs', {})  
     await page.setContent(pageContent)
     //await page.screenshot({path: 'example.png'});
     // await browser.close();
  } catch (err) {
     res.status(500)
     console.log(err)
     res.send(err.message)
  }
})

在瀏覽器而不是頁面布局中，我得到：

../views/mypage.ejs

Answer 1

代替：

await page.goto(...); // This code is acting like your browser's address bar

嘗試

const pageContent = ejs.render('../views/mypage.ejs', {data to populate your .ejs page}) //This is sudo code. Check ejs docs on how to do this 
await page.setContent(pageContent)

上面的代碼將讓您在您的服務器上創建您的頁面。 使用page.setContent(..)您可以加載任何 HTML 字符串。

Answer 2

OP 進行了正確使用page.setContent而不是page.goto的編輯，但是，仍然存在問題。 ejs.render()用於在字符串形式的模板上運行 EJS，因此它將文件路徑視為模板本身。 如果您想首先將文件讀入字符串（可能在您的應用程序啟動時，如果模板從未更改）， ejs.render()將起作用。

另一種方法是使用接受路徑的 EJS 方法ejs.renderFile() 。 這是一個顯示用法的最小示例：

const ejs = require("ejs"); // 3.1.8
const express = require("express"); // ^4.18.1
const puppeteer = require("puppeteer"); // ^19.1.0

express()
.get("/greet", (req, res) => {
  let browser;
  (async () => {
    browser = await puppeteer.launch();
    const [page] = await browser.pages();
    const html = await ejs.renderFile("greet.ejs", {name: "world"});
    await page.setContent(html);
    const buf = await page.screenshot();
    res.contentType("image/png");
    res.send(buf);
  })()
    .catch(err => {
      console.error(err);
      res.sendStatus(500);
    }) 
    .finally(() => browser?.close());
})
.listen(3000);

其中greet.ejs包含：

<!DOCTYPE html>
<html>
<body>
<h1>Hello, <%- name %></h1>
</body>
</html>

要使用 Express、EJS 和 Puppeteer 制作 PDF，請參閱Express/Puppeteer：從 EJS 模板生成 PDF 並作為響應發送。

要跨路由重用瀏覽器，請參閱此答案以了解可能的方法。

使用 Puppeteer 使用 NodeJS 和 Express 截取 EJS 模板

問題描述

2 個解決方案

解決方案1
2

解決方案2
-1 2022-11-04 21:36:25

使用 Puppeteer 使用 NodeJS 和 Express 截取 EJS 模板

問題描述

2 個解決方案

解決方案1 2

解決方案2 -1 2022-11-04 21:36:25

解決方案1
2

解決方案2
-1 2022-11-04 21:36:25