如何在 Puppeteer 中添加所有相对 URL 的绝对路径以用于 PDF？

问题描述 投票：0回答：2

我已将单个网页保存到本地磁盘（纯HMTL文件，没有更改）。

尝试使用 Puppeteer 创建 PDF 时，缺少具有相对路径的图像。此外，PDF 中的所有相对 

href
链接都引用了不存在的本地地址，而不是指向网页上的正确地址（即 
http://www.example.com/
加相对 URL）。

是否可以在 Puppeteer 中定义一个前缀，添加到所有相对 URL（图像、链接、CSS、JS 等）中，以便将 

http://www.example.com/
添加到 HTML 文件中以 
/
开头的所有相对 URL 中？

pdf url path reference puppeteer
2个回答
4
投票

可以使用 

base
元素来做到这一点。来自文档：

HTML 

<base>
元素 指定用于文档中包含的所有相对 URL 的基本 URL。文档中只能有一个 
<base>
元素。

请注意，必须在具有 URL 属性的其他元素之前指定它。这意味着不可能执行某些 JavaScript 来更改已渲染页面的行为。相反，您应该在渲染之前更改 HTML。

在渲染之前将基本元素添加到 HTML 代码中，使其看起来像这样：

<!DOCTYPE html>
<html>
<head>
  <base href="http://www.example.com/">
...
2
投票

虽然接受的答案是正确的，但它并没有准确显示如何使用 Puppeteer 自动注入 

base
标签。我遇到了同样的问题，以下是如何在 Puppeteer 中动态添加 
base
标签：

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);
});
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.