Puppeteer PDF 总是以 1024 像素宽度呈现 HTML，如何更改？

huangapple
go评论94阅读模式
英文:

Puppeteer pdf always render html in 1024px width how to change that

问题

  1. 我正在使用 Puppeteer Sharp 将 HTML 转为 PDF。
  2. 问题在于使用媒体类型为打印（media type print）会导致 HTML 渲染为 1024 像素宽度，但我想改变这个。

private async System.Threading.Tasks.Task<MemoryStream> GeneratePuppeteerPDF(string html)
{
var workStream = new MemoryStream();
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.SetContentAsync(html);
var pdfOptions = new PdfOptions()
{
DisplayHeaderFooter = false,
Landscape = false,
PrintBackground = true,
Format = PaperFormat.A4,
MarginOptions = new MarginOptions()
{
Top = "1cm",
Bottom = "1cm",
Left = "1cm",
Right = "1cm"
}
};
await page.EmulateMediaTypeAsync(MediaType.Print);
var st = await page.PdfStreamAsync(pdfOptions);
st.CopyTo(workStream);
}
}
return workStream;
}

  2. 如何在不使用“媒体类型屏幕”的情况下控制 HTML 的渲染宽度？
  3. 即使在 `PdfOptions` 中使用 `Width` 也不起作用，请帮忙。我还没有在 StackOverflow 或其他地方找到任何解决方案。
英文:

I am using Puppeteer Sharp for HTML to pdf.
The issue is using media type print cause HTML to render at a width of 1024px, but I want to change that.

  1. private async System.Threading.Tasks.Task&lt;MemoryStream&gt; GeneratePuppeteerPDF(string html)
  2. {
  3.     var workStream = new MemoryStream();
  4.     using (var browser = await Puppeteer.LaunchAsync(new LaunchOptions()
  5.     {
  6.         Headless = true,
  7.         Timeout = 10000,
  8.         ExecutablePath = @&quot;C:\Program Files (x86)\Google\Chrome\Application\chrome.exe&quot;
  9.     }))
  10.     {
  11.         using (var page = await browser.NewPageAsync())
  12.         {
  13.             await page.SetContentAsync(html);
  14.             var pdfOptions = new PdfOptions()
  15.             {
  16.                 DisplayHeaderFooter = false,
  17.                 Landscape = false,
  18.                 PrintBackground = true,
  19.                 Format = PaperFormat.A4,
  20.                 MarginOptions = new MarginOptions()
  21.                 {
  22.                     Top = &quot;1cm&quot;,
  23.                     Bottom = &quot;1cm&quot;,
  24.                     Left = &quot;1cm&quot;,
  25.                     Right = &quot;1cm&quot;
  26.                 }
  27.             };
  28.             await page.EmulateMediaTypeAsync(MediaType.Print);
  29.             var st = await page.PdfStreamAsync(pdfOptions);
  30.             st.CopyTo(workStream);
  31.         }
  32.     }
  33.     return workStream;
  34. }

How can I control the render width of HTML without using Media Type Screen

Even using Width in PdfOptions won't work; please help. I didn't yet find any solution on stackOverflow or anyplace.

答案1

得分: 1

以下是您要翻译的代码部分：

原始代码：

  1. @media print {
  2.   @page {
  3.     size: a3;
  4.   }
  5.   body {
  6.     min-width: 992px !important;
  7.   }
  8.   .container {
  9.     min-width: 992px !important;
  10.   }
  11. }

更改后的代码：

  1. @media print {
  2.   @page {
  3.     size: auto;
  4.   }
  6.   body {
  7.     min-width: 100% !important;
  8.   }
  10.   .container {
  11.     min-width: 100% !important;
  12.   }
  13. }

希望这有所帮助。

英文:

The issue is solved. I am using Bootstrap 4, which had media print in the CSS.

  1. @media print {
  2.  @page {
  3.    size: a3;
  4.  }
  5.  body {
  6.    min-width: 992px !important;
  7.  }
  8.  .container {
  9.    min-width: 992px !important;
  10.  }
  11. }

I overwrited the above by

  1. @media print {
  2.   @page {
  3.     size: auto;
  4.   }
  6.   body {
  7.     min-width: 100% !important;
  8.   }
  10.   .container {
  11.     min-width: 100% !important;
  12.   }
  13.  }

And now it's working if you set the div that holds the content to 600px, it will render in 600px width. You get what you see in the browser.

huangapple
  • 本文由 发表于 2023年5月11日 19:58:35
  • 转载请务必保留本文链接：https://go.coder-hub.com/76227417.html
  • c#
  • html
  • pdf
  • puppeteer
  • puppeteer-sharp
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定