如何修改Puppeteer Sharp中Print媒体类型的HTML渲染宽度

要修改Print媒体类型下的渲染宽度，核心是通过设置页面视口替代默认的1024px，同时配合CSS的@page规则保证打印布局一致性，具体操作如下：

核心逻辑 #

启用MediaType.Print时，Puppeteer会默认使用1024px视口宽度渲染内容，该值和PdfOptions中的Width属性无关。我们需要手动设置视口宽度匹配打印页面的可用区域，再通过CSS规则对齐打印参数。

修改后的完整代码 #

private async System.Threading.Tasks.Task<MemoryStream> GeneratePuppeteerPDF(string html)
{
    var workStream = new MemoryStream();
    // 计算A4去掉1cm边距后的可用宽度：210mm - 2*10mm = 190mm → 约718px（1mm≈3.7795px）
    const int targetViewportWidth = 718;
    
    using (var browser = await Puppeteer.LaunchAsync(new LaunchOptions()
    {
        Headless = true,
        Timeout = 10000,
        ExecutablePath = @"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"
    }))
    {
        using (var page = await browser.NewPageAsync())
        {
            // 设置视口宽度为打印可用区域宽度
            await page.SetViewportAsync(new ViewPortOptions
            {
                Width = targetViewportWidth,
                Height = 1000, // 高度设足够大，不影响自动分页
                DeviceScaleFactor = 1
            });
            
            // 添加CSS打印规则，和PdfOptions参数对齐
            await page.AddStyleTagAsync(new AddTagOptions
            {
                Content = @"
                    @page {
                        size: A4;
                        margin: 1cm;
                    }
                    body {
                        width: 100%;
                        max-width: 100%;
                        margin: 0;
                        padding: 0;
                    }
                "
            });
            
            await page.SetContentAsync(html);
            await page.EmulateMediaTypeAsync(MediaType.Print);
            
            var pdfOptions = new PdfOptions()
            {
                DisplayHeaderFooter = false,
                Landscape = false,
                PrintBackground = true,
                Format = PaperFormat.A4,
                MarginOptions = new MarginOptions()
                {
                    Top = "1cm",
                    Bottom = "1cm",
                    Left = "1cm",
                    Right = "1cm"
                }
            };
            
            var st = await page.PdfStreamAsync(pdfOptions);
            st.CopyTo(workStream);
            workStream.Position = 0; // 重置流位置，确保调用方正常读取
        }
    }
    return workStream;
}

关键说明 #

1. 视口设置：SetViewportAsync的Width值要对应打印页面去掉边距后的实际可用宽度，避免内容渲染后被强制缩放。
2. CSS规则：@page规则明确打印页面的尺寸和边距，和PdfOptions保持一致，防止布局偏移；body样式确保内容自适应视口宽度。
3. 流位置重置：添加workStream.Position = 0，否则调用方读取流时会从末尾开始，无法获取有效内容。

内容的提问来源于stack exchange，提问作者Hamzeh Jankhout