网站内容在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
});

我不想使用比例尺，因为我需要将图形放在多页上。

关于如何解决此问题的任何想法？

其他伪造者代码：

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

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

3. 使用我的图表await page.waitForSelector("#graphs");

等待特定的div

4. 页面pdf

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

Answer 1

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

因此，PDF的“响应式”样式应位于：

@media print {

}