如何在 Puppeteer 中添加所有相对 URL 的绝对路径(本地 html 文件应从网络加载图像以生成 PDF)

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

我已将单个网页保存到本地磁盘(纯 html 文件,没有更改)。

尝试使用 Puppeteer 创建 PDF 时,缺少具有相对路径的图像。此外,PDF 中的所有相关 href 链接都指向不存在的本地地址,而不是指向网页上的正确地址(即“http://www.example.com/”加上相对网址)

是否可以在 Puppeteer 中定义一个前缀,添加到所有相对 URL(图像、链接、css、js),因此“http://www.example.com/”被添加到所有以开头的相对 URL在 html 文件中使用“/”?

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/">
...

0
投票

虽然接受的答案是正确的,但它并没有准确说明如何使用 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);
  });
© www.soinside.com 2019 - 2024. All rights reserved.