|
|
Rank: Newbie
Groups: Member
Joined: 11/14/2019
Posts: 2
|
Hi. I have a responsive layout on my page in CSS. It has separate options for screen and print media. This works fine during printing in Chrome, but unfortunately, it doesn't work during converting a page to pdf. I've tried this with the latest version of the EOPDF (v19.2.91), but it didn't work. My CSS rules are pretty simple
Code: CSS
$narrow-screen-width: rem(686);
$normal-screen-width: rem(1392);
@function topixels($val) {
@return number(#{to-fixed($val * 72)}px);
}
$a4-paper-width: topixels(7.26); // w8.26 × h11.69 in * 72 dpi (margin 0.4 in x 2)
$a3-paper-width: topixels(10.69); // w11.69 × h16.5 in * 72 dpi (margin 0.4 in x 2)
.widget {
margin: rem(10);
min-width: rem(333);
width: 100%;
page-break-inside: avoid;
@media screen and (min-width: $narrow-screen-width), print and (min-width: $a4-paper-width) {
//2 widgets on the row
width: calc(50% - #{rem(20)});
margin-left: rem(10);
margin-right: rem(10);
}
@media screen and (min-width: $normal-screen-width), print and (min-width: $a3-paper-width) {
//4 widgets on the row
width: calc(25% - #{rem(20)});
}
}
Could you help me with this? Thanks.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,218
|
Hi, Please try the following and see if it works: 1. Make sure you set HtmlToPdf.Options.UsePrintMedia to true. By default our converter uses screen media, not print media; 2. Turn auto fit off by setting both HtmlToPdf.Options.AutoFitX and AutoFitY to None. See here for more details: https://www.essentialobjects.com/doc/pdf/htmltopdf/auto_fit.aspx3. After you turn auto fit off, you may need to adjust HtmlToPdf.Options.OutputArea and HtmlToPdf.Options.ZoomLevel to fine tune the output. These two properties control the internal "browser window" size. The window width maybe important for you to achieve optimal output because a typical PDF page is narrower than a typical browser window, thus resulting in smaller window size unless you decrease HtmlToPdf.Options.ZoomLevel; Please let us know if this works for you. Thanks!
|
|
Rank: Newbie
Groups: Member
Joined: 11/14/2019
Posts: 2
|
eo_support wrote:Hi, Please try the following and see if it works: 1. Make sure you set HtmlToPdf.Options.UsePrintMedia to true. By default our converter uses screen media, not print media; 2. Turn auto fit off by setting both HtmlToPdf.Options.AutoFitX and AutoFitY to None. See here for more details: https://www.essentialobjects.com/doc/pdf/htmltopdf/auto_fit.aspx3. After you turn auto fit off, you may need to adjust HtmlToPdf.Options.OutputArea and HtmlToPdf.Options.ZoomLevel to fine tune the output. These two properties control the internal "browser window" size. The window width maybe important for you to achieve optimal output because a typical PDF page is narrower than a typical browser window, thus resulting in smaller window size unless you decrease HtmlToPdf.Options.ZoomLevel; Please let us know if this works for you. Thanks! Hi. I have the following code in my .net app:
Code: C#
var options = new HtmlToPdfOptions();
var pageSize = PdfPageSizes.FromName(paperSize);
options.PageSize = pageSize;
options.OutputArea = new RectangleF(margins.Left, margins.Top, pageSize.Width - margins.Left - margins.Right, pageSize.Height - margins.Top - margins.Bottom);
options.AutoFitX = HtmlToPdfAutoFitMode.None;
options.AutoFitY = HtmlToPdfAutoFitMode.None;
options.UsePrintMedia = true;
HtmlToPdf.ConvertUrl(url, fileStream, options);
But no matter what I specify in the parameter paperSize, A4 or A3, or even A0, I get the same result. It looks like min-width even in print mode has a screen width, not a paper width. Thanks. P.S. I use margins 0.4 for all sides.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,218
|
Have you tried setting HtmlToPdf.Options.ZoomLevel? If you continue to have problem, please send a full test page to us and we will investigate further. See her for how to send test files to us: https://www.essentialobjects.com/forum/test_project.aspxThanks!
|
|