我已将单个网页保存到本地磁盘(纯 html 文件,没有更改)。
尝试使用 Puppeteer 创建 PDF 时,缺少具有相对路径的图像。此外,PDF 中的所有相关 href 链接都指向不存在的本地地址,而不是指向网页上的正确地址(即“http://www.example.com/”加上相对网址)
是否可以在 Puppeteer 中定义一个前缀,添加到所有相对 URL(图像、链接、css、js),因此“http://www.example.com/”被添加到所有以开头的相对 URL在 html 文件中使用“/”?
base
元素来完成。来自文档:
HTML
元素 指定用于文档中包含的所有相对 URL 的基本 URL。一个文档中只能有一个<base>
元素。<base>
请注意,这必须在其他具有 URL 属性的元素之前指定。这意味着无法执行某些 JavaScript 来更改已呈现页面的行为。相反,您应该在呈现之前更改 HTML。
在呈现之前将基本元素添加到您的 HTML 代码中,使其看起来像这样:
<!DOCTYPE html>
<html>
<head>
<base href="http://www.example.com/">
...
虽然接受的答案是正确的,但它并没有准确说明如何使用 puppeteer 自动注入
base
标签。我在这里遇到了同样的问题,这里是如何在 Puppeteer 中动态添加基本标签:
await page.evaluate(() => {
const base = document.createElement('base');
base.href = window.location.origin;
// Insert the base element as the first child of the head element
document.head.insertBefore(base, document.head.firstChild);
});