英文:
Puppeteer pdf always render html in 1024px width how to change that
问题
我正在使用 Puppeteer Sharp 将 HTML 转为 PDF。
问题在于使用媒体类型为打印（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;
}
如何在不使用“媒体类型屏幕”的情况下控制 HTML 的渲染宽度？
即使在 `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.
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;
}
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
以下是您要翻译的代码部分：
原始代码：
@media print {
@page {
size: a3;
}
body {
min-width: 992px !important;
}
.container {
min-width: 992px !important;
}
}
更改后的代码：
@media print {
@page {
size: auto;
}
body {
min-width: 100% !important;
}
.container {
min-width: 100% !important;
}
}
希望这有所帮助。
英文:
The issue is solved. I am using Bootstrap 4, which had media print in the CSS.
@media print {
@page {
size: a3;
}
body {
min-width: 992px !important;
}
.container {
min-width: 992px !important;
}
}
I overwrited the above by
@media print {
@page {
size: auto;
}
body {
min-width: 100% !important;
}
.container {
min-width: 100% !important;
}
}
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论