使用 CSS @Page 渲染打印页面的大小答案

【问题标题】：Rendered Size of Printed Page using CSS @Page使用 CSS @Page 渲染打印页面的大小
【发布时间】：2012-08-06 13:30:14
【问题描述】：

您好，感谢您的关注！

背景

我正在使用Rotativa PDF 打印多页报告，该报告将 HTML 页面打印为 PDF。为此，我需要遵循 CSS 2.1 及更高版本的 @page 约定。

我的应用程序是 C#，MVC 3。

问题/疑问：

即使我在@page 声明中指定 8.5 英寸乘 11 英寸，打印的 PDF 中的页面也仅缩放到 8.5X11 表的大约 75%。我知道这一点是因为我有一个应该覆盖整个页面的背景图像，但它只打印到整个页面的 75% 左右。内容也按比例缩小，所以一切都按比例正确，只是没有按应有的方式绘制整个 8.5X11 帧。

我在 CSS 中这样设置报告的封面页：

@page defaultPage{size:8.5in 11in;margin: 2cm;}    
#CoverPage {
        page: defaultPage;
        background-image: url(/Resources/rendered_assets/img/cover_bg.jpg); 
        background-repeat:no-repeat;
        width:8.5in;
        height: 11in;           
    }

还有 HTML：

 <div id="CoverPage">
        <p>foo</p>
        <p>bar</p>
 </div>

知道我可能做错了什么吗？提前致谢。

【问题讨论】：

您确定没有其他（隐藏）图像或元素占 HTML 页面上其他 25% 的百分比（例如 的透明图像 i> 在页眉或页脚的某处宽？！？

标签： c# css pdf-generation css-paged-media

【解决方案1】：

不知道它是否能解决您的问题.. 但在最新的Rotativa 版本中，您可以将一些选项传递给渲染引擎。您可以像这样设置 PageWidth 和 PageHeight 和 Margins：

    return new ViewAsPdf()
    {
        FileName = "TestView.pdf",
        PageSize = Size.A3,
        PageOrientation = Orientation.Landscape,
        PageMargins = { Left = 0, Right = 0 }, // it's in millimeters
        PageWidth = 122, // it's in millimeters
        PageHeight = 44
    };

【讨论】：

【解决方案2】：

var urlHelper = new UrlHelper(Request.RequestContext);

string url = urlHelper.Action("Index", new { name = "value" });

return new UrlAsPdf("http://www.github.com")
{
    FileName = "TestExternalUrl.pdf",
    PageMargins = new Margins(3, 3, 3, 3)
};

【讨论】：