javascript - 网站内容在 PDF A4 页面中没有响应

Question

我正在使用 puppeteer 将带有 highchart.js 图表的我的网站导出为 A4 PDF。我对 PDF 中的内容有疑问。

假设我的网站如下所示:

将我的网站导出为 PDF A4 格式尺寸时的外观:

正如您在 pdf 上看到的那样，我的图表根本没有响应。我想用 1920x1080 捕获我的内容并将其放入 A4。

如果我在 PDF 中使用比例作为属性，那么 PDF 导出看起来不错。

return await page.pdf({
    path,
    printBackground: true,
    landscape,
    format: 'A4',
    scale: await calculcateScale(landscape, rect.width, rect.height) //rect is x,y, width, height of my div
});

我不想使用比例尺，因为我需要我的图表出现在多个页面上。

关于如何解决这个问题有什么想法吗？

其他 puppeteer 代码:

1. 我将视口(viewport)设置为:defaultViewport: {width: 1920, height: 1080, deviceScaleFactor: 2}

2. 导航到我的页面...

3. 等待我的图表的特定 div await page.waitForSelector("#graphs");

4. 页面pdf

return await page.pdf({
    path,
    printBackground: true,
    landscape,
    format: 'A4',
});

Answer 1

pdf 函数的行为类似于打印操作。这意味着 @media print适用。

所以你的 PDF 的“响应式”风格应该在:

@media print {

}