使用 Puppeteer 生成 PDF 时无法隐藏 Fusion Charts 图形水印答案

【问题标题】：Can't hide Fusion Charts graphics watermark when Generating a PDF with Puppeteer使用 Puppeteer 生成 PDF 时无法隐藏 Fusion Charts 图形水印
【发布时间】：2021-11-03 12:13:14
【问题描述】：

我在使用 Puppeteer 生成包含 Fusion Charts 图形的 PDF 时遇到问题。

我们有 Fusion Charts Enterprise 计划的许可密钥，所以 FusionCharts 试用 水印根本不可见。

这是与PDF生成相关的代码：

  const [page, browser] = await launchPuppeteer({ clientTz });

  const content = await renderTemplate('dashboard')({ dashboard, licenseKey: FUSION_CHARTS_LICENSE_KEY_ID });

  const { height, width } = PDF_DEFAULT_OPTIONS;
  await page.setViewport({ width, height });
  await page.setContent(content, { waitUntil: 'networkidle0' });

  const pdfContent = await page.pdf({
    ...PDF_DEFAULT_OPTIONS
    , headerTemplate: headerTemplate({ dashboard, profile })
    , footerTemplate
  });

变量content包含使用EJS模板渲染后生成的HTML。

如果我直接在浏览器中运行该 HTML，它可以正常工作，并且不会显示 Fusion Charts 水印。但是当我用 Puppeter 生成 PDF 时，水印总是可见的。

这是 EJS 模板 HTML 代码：

<html>
    <head>
        <script src='https://cdn.fusioncharts.com/fusioncharts/3.16.0/fusioncharts.js'></script>
        <script src='https://cdn.fusioncharts.com/fusioncharts/3.16.0/themes/fusioncharts.theme.fusion.js'></script>
    </head>
    ...
 
    <script>
 
        FusionCharts.ready(function() {

            const _licenseKey = <%- JSON.stringify(licenseKey) %>;
            FusionCharts.options.license({ key: _licenseKey, creditLabel: false });

            // With this, I just make sure my licenseKey is correct
            const license = document.createElement('p');
            license.innerHTML = `License key: <br>${_licenseKey}`;
            document.body.append(license);
            ...
            ...
 
            new FusionCharts(graphicData.data).render();
        });
 
    </script>
 
</html>

所以，基本上，经过很多不同的方法和尝试，我得出的结论是，问题与 Puppeteer 以及它如何从 HTML 生成 PDF（可能是它使用的 Chromium 版本......）有关。所以也许有一些我不知道的与这个问题相关的 Puppeteer 选项......

编辑（07-09-2021）

我已经在一个更简单的本地 Puppeteer 测试中复制了我的代码，使用节点，只是从 HTML 文件中加载 PDF 内容，并且也无法正常工作，没有应用许可证。

【问题讨论】：

@daniegarcia ：请发送邮件至 support@fusioncharts.com，如果您有企业许可证，则可以使用也在 puppeteer 上运行的 fusionexport，在这种情况下您可以轻松传递许可证密钥。 fusioncharts.com/dev/exporting-charts/using-fusionexport/…fusioncharts.com/dev/exporting-charts/using-fusionexport/…
@Zapdos13 现在我需要坚持我所拥有的，因为与我们系统的其他服务共享代码，所以我们现在无法迁移到使用 FusionExport。 Anayway，如果它在 Puppeteer 上运行，为什么不工作，甚至运行本地 Puppeteer？
@KJ 这应该不是问题，许可证在具有本地主机开发的浏览器中工作正常，并且不受 IP 限制。
尝试在 fusioncharts.js 文件的末尾添加密钥，这样无论何时加载文件都会应用密钥

标签： javascript pdf puppeteer ejs fusioncharts

【解决方案1】：

我们终于找到了解决手头问题的解决方案。

我们刚刚添加了：

// Added these two lines
await page.goto('https://example.com');
await page.setCacheEnabled(false);

await page.setContent(content, { waitUntil: 'networkidle0' });
const pdfContent = await page.pdf({.....

通过这种方式，我们确保所有来自 HTML 的请求都有一个有效的来源/引用者，在本例中为 https://example.com。

这似乎与我最初的问题有关。也许只是 Fusion Charts 对使用/安全性的一些限制......

【讨论】：