相关疑难解决方法(0)

参考完整的小提琴:http://jsfiddle.net/XT92a/

@page {
    margin: 1in;
}

@page :first {
    margin: 2in 1in 3in 3in;
}

我希望上面的规则可以使第一个打印页面具有一定的边距,而所有其他页面都有1英寸的边距.

相反,我在Chrome的打印预览中得到以下内容(准确到打印输出).保证金是对非第一页不同,但它们都是不正确的.注释掉:first margin规则允许非首页以正确的布局打印,但当然,第一页也会受到影响.

在我看来,Mozilla的文档声称Chrome正确支持这一点.显然Chrome会做出反应,但不正确.如果可以的话,我会参考Chrome文档,但谷歌很糟糕的文档!(有没有谷歌相当于MDN？我找不到它.)

对我来说很奇怪,我在其他地方找不到这个问题,如果Chrome应该从版本2.0开始就支持这个问题,并且打印布局是如此庞大的PITA.

我做错了吗？有一个强大的解决方法吗？我试过@page:first(没有空格),独立设置边距值trbl样式和单独设置,并在样式声明中交换规则的顺序.没有效果.

我正在致力于渲染网站的 PDF。我希望第一页有不同的页眉和页脚，其余页面也有不同的页眉和页脚。有什么办法可以做到这一点吗？

const puppeteer = require('puppeteer');

(async() => {
 var t = Date.now();
 console.log('Current time ' + t + ' msec'); 

 const browser = await puppeteer.launch({executablePath: 'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe', ignoreHTTPSErrors:true, headless:true, devtools:false});
const page = await browser.newPage();
await page.setViewport({width: 1920, height: 1080});

await page.setExtraHTTPHeaders({'Report-Print-Preview-Mode':'true'});
await page.goto('https://localhost', {waitUntil: 'networkidle2'});
await page.type('#username', 'scott');
await page.type('#password', 'tiger');  
await page.click('[id="login_button"]');

await page.waitForSelector('[id="new_page_table_id"]');
await page.on('console', msg => console.log('PAGE LOG:', msg.text()));

// page.pdf() is currently supported only in headless mode.
// @see https://bugs.chromium.org/p/chromium/issues/detail?id=753118

await page.pdf({
path: …

它与打印有关，并且仅与打印有关。

CSS：

@page {
    size: A4 portrait;
}
@page :first{
    size: 210mm 1000mm;
}

根据 CSS 的定义，只有首页高度为 1000 毫米，其余页面高度为 297 毫米 (A4)。

但在 Chrome 中，从第二页开始，看起来像 297mm，但所有内容都消失了。

自己尝试一下，使用Google Chrome，打开http://fiddle.jshell.net/T4nnG/1/show/ 并尝试打印，看预览，第一页是正确的，从第二页开始，大小是正确的，但内容消失了

使用“另存为PDF”可以看得更清楚，但是如果你选择真正的打印机，它会缩小第一页，错误是相同的

它可能只能在 Chrome 中使用，但我只使用 Chrome 的应用程序，所以只要它能在 Chrome 中运行，我就很高兴。

我做错了什么吗？请提供正确CSS的建议，谢谢。