I'm trying to generate a pdf report using handlebars and puppeteer. I want the first page to be portrait, and every page after to be landscape.
The issue I am having is that the page orientation is changing, but not the useable area if that makes sense...The page appears to be landscape, but the report is clearly only using portrait area
On the server I have
await page.emulateMediaType("screen");
const pdf = await page.pdf({
format: "A4",
printBackground: true,
preferCSSPageSize: true,
});
in the css I have the following:
#page :first {
size: A4 portrait;
}
#page {
size: A4 landscape;
}
Does anyone have any ideas? I'm a bit stuck if its a css thing, or a handlebars/puppeteer thing!
Related
i've made this banner like screen that appears when my site is loaded, but here's the thing, i don't want no scrollbar while this opening animation it's happening, i only want to show the other components (the scrollbar and the whole site) once the gsap animation finishes, how could i proceed? thanks! (i tried to create a function to control those global elements, is it a way?)
So if I understand correctly you need the Banner to be displayed until the site is loaded. Maybe you are making some API calls or in general, you are planning to show the banner for let's say 3 sec and post that you want your actual components to be displayed.
You can try below approch:
export const APP = (): JSX.Element => {
const [isAnimationInProgress, SetAnimationState] = React.useState(true);
React.useEffect(() => {
// You can have your page load API calls done here
// Or wait for 'X' seconds
// Post that set the AnimationState to false to render actual components
setAnimationState(false);
})
return (
{
isAnimationInProgress && <Banner />
}
{
!isAnimationInProgress && <ActualComponent />
}
)
}
Regarding scrollbars, including overflow: hidden; in style for the banner should do the work if you are getting scrollbars for the Banner component.
I've got the following css setting:
#media print {
#page {
size: 5700px 3900px; /* landscape 19" x 13" A0 */
margin: 0px;
}
}
This is so that, when I save the page as a PDF, it saves it at 300PPI. When I actually export it as a PDF though, Chrome exports it with a resolution of 4275px 2925px which is only 225PPI.
Is there a style I can add to force exporting in 300PPI? i.e. as 5700px 3900px
Is there a style I can add to force exporting in 300PPI
No, there is not. That's not what CSS is for. CSS is concerned with creating a layout from a structured document and applying visual effects given the constraints of the rendering device, thus CSS does not define those constraints - instead it works with them.
Anyway, when writing a media print stylesheet, don't use px units, instead use CSS's mm, cm, in units.
As ISO A0 paper is 841x1189mm then use this:
#media print {
#page {
size: 1189mm 841mm;
margin: 0;
}
}
I am getting JSON data from API, after getting that data i need to send that JSON data to print in pdf format. Please help me to solve this in Angular.
Reframing my question: I am now getting HTML data from API in an JSON format and I successfully rendered it on component but I am applying CSS for page-break-before is not working. Can anyone please help me out in it.
When I create in simple index.html file as a static data it is working but same with Angular component it is not working whether it is static or dynamic.
I tried
#media all {
.page-break { display: none; }
}
#media print {
.page-break { display: block; page-break-before: always; }
}
My HTML Code
<div class="page-break"></div>
<p>Date: 27/02/2020 </p>
<p>Sub: Request for ..............</p>
<p>WRT the BG number <b>123456789</b></p><br><br><br>
<p>Account number: 0000000000</p>
<p>Acccount Name: ABC</p>
<p>IFSC: ABC12456</p><br><br>
<p>Regards</p>
<div class="page-break"></div>
<p>Date: 27/02/2020 </p>
<p>Sub: Request for ..............</p>
<p>WRT the BG number <b>123456789</b></p><br><br><br>
<p>Account number: 0000000000</p>
<p>Acccount Name: ABC</p>
<p>IFSC: ABC12456</p><br><br>
<p>Regards</p>
One way to achieve this is with html2canvas and jsPdf. First you convert your HTML to an image with html2canvas and then print the image with jsPdf
const input = document.getElementById('print-container');
html2canvas(input)
.then((canvas) => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF({
orientation: 'landscape',
});
const imgProps = pdf.getImageProperties(imgData);
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
pdf.save('download.pdf');
});
See this Stackblitz I made: https://stackblitz.com/edit/angular-p1a7xn
Another way is to use jsPdf without html2canvas. Then you need to layout and style the pdf for yourself
Take a look to this library: http://pdfmake.org/#/
It's awesome!
Take a look to their playground here: http://pdfmake.org/playground.html
Basic example code:
const dd = {
content: [
'First paragraph',
'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'
]
}
This will create 2 lines in the PDF.
Their npm: npm i pdfmake
When I use google's YTPlayer to display a video with cc_load_policy=1, and if the video in question has just a English (auto-generated) subtitle, captions still don't appear for me - shouldn't the English (auto-generated) one still be displayed in such a case?
I've tried setting the cc_lang_pref=en as well as the hl=en parameters but to no avail.
The cc_load_policy=1 parameter does work well with videos that do have an English subtitle, so I don't think the problem has anything to with code per se.
Is there perhaps a special language code for English (auto-generated) that I should be using instead?
new YT.Player("ytplayer_placeholder", {
width: "100%",
videoId: "4Uzbpj1UCEY",
playerVars: {cc_load_policy: 1},
events: {
'onReady': player_ready,
'onStateChange': schedule_buffering,
'onError': error_handler
}
});
The sample code above includes the youtube videoid that has such a problem.
It should have displayed the video with the English (auto-generated) captions but nothing appears. I can manually click the CC button to get the captions to appear though, but I need that to happen automatically.
There is no official or documented way to force auto-generated captions in embedded videos. However there is a solution with the setOption method which works now, but there is no guarantee it will work in the future as this is a non documented call of the method:
const onApiChange = _ => {
if (typeof player.setOption === 'function') {
player.setOption('captions', 'track', {languageCode: 'en'}) // undocumented call
}
}
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: '4Uzbpj1UCEY',
playerVars: {
cc_load_policy: 1
},
events: {
onApiChange
}
})
}
Working jsFiddle is here.
You have to wait for an onApiChange event before using the setOption function. (See: https://developers.google.com/youtube/iframe_api_reference#Events) According to the docs only the 'fontSize' and the 'reload' parameters are supported. However, changing the captions track works too and it turns ON the captions as a side-effect. I tried only the 'en' languageCode, of course this will change to the normal english captions track if there is one available, but will display the auto-generated english captions in the absence of a predefined track.
(You can also query the active captions track with the getOption method, but it will return nothing if the auto-generated captions are used.)
I'm new b rails, I have successfully produced PDF from the HTML with wkhtmltopdf[0.11.0 rc1] free version, using ruby on rails(3.1).
I want that PDF in A4 printable size. (PDF have multiple pages.)
but it seems generated PDF having small size
my HTML wrapper/main DIV having width: 580px; and wrapper DIV is centered By margin: auto;
I'm already using Wicked-PDF and facing this issue in the generated PDF. using page_size as A4.
pdf = WickedPdf.new.pdf_from_string(render_to_string(
template: 'assessment_reports/assessment_report.html.haml',
layout: "layouts/reports.html.haml",
handlers: [ :haml ], margin: { :left => "5mm",:right => "5mm", :top => "20mm", :bottom => "0mm" },
locals: { :#view_mode => "pdf" }
))
Que is- how do i convert/scale its width- 210mm(which is width of A4 paper) and height proportionally while generating pdf? Not require but if possible-resolution should 300DPI.
Any help would be appreciated.
I had a similar issue and this argument to wkhtmltopdf solved the issue for me:
--disable-smart-shrinking