我在使用Puppeteer生成包含Fusion Charts图形的PDF时遇到了问题。
我们有FusionCharts企业计划的许可密钥,所以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版本…)。所以也许有一些我不知道的与这个问题相关的木偶操作选项…
编辑(07-09-2021)
我已经复制了我的代码在一个更简单的本地Puppeteer测试节点,只是加载PDF内容从和HTML文件,也不工作,许可证不适用。
我们终于找到了解决手头问题的方法。
我们刚刚添加了:
// 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对使用/安全的一些限制…