Incomplete PDF rendering using Save as PDF - with a map object
Reported by
myt...@gmail.com,
Dec 14
|
|||||||||||||||||
Issue description
Chrome Version : 71.0.3578.80
OS Version: OS X 10.13.6
URLs (if applicable) :
Other browsers tested:
Add OK or FAIL after other browsers where you have tested this issue:
Safari: Fail
Firefox: Fail
IE/Edge: Not tested
Steps to reproduce
Create a PDF from an HTML page as follows:
private async generateReport(page: any, searchID: number, path: string) { await page.setViewport({ width: 1280, height: 2000 }); console.log('Navigate to Report with URL=' + navUrl); //Navigate to the reports, wait for the page to load, and save as pdf await page.goto(navUrl, {waitUntil: 'networkidle0'}) .catch( (err: any) => { throw new Error('could not navigate to reports page; ' + err.message); }); console.log('convert html to PDF and save to ' + path); await page.pdf({path: path, format: 'Letter' , preferCSSPageSize: true , margin: { top: 20, left: 10, right: 10, bottom: 10 } , landscape: true}).catch( () => { throw new Error('pdf generator failed'); }); }
The Html page template is produced by angular. The general structure is as follows:
(git - Won't let me put html as code sub curly braces)
{table} {thead}myHeader Definition{/thead} {tfoot}myFoot Definitions{/tfoot} {tbody} {div *ngFor="Iterate over row content div style set to display:block} {tr}{td} {angular-custom-contentTemplate-directive/} {/td}{/tr} {/div} {/tbody} {/table} {div} {google map(agm)} {div}
The map image comes out with a blank band.
Please refer to attachment image
Puppeteer version: "_id": "puppeteer@1.9.0",
Platform / OS version: mac 10.13.6
Node.js version: 10.12.0
What is the expected result?
Expect to get more wisiwig output of the html rendered page.
What happens instead?
Get odd blank spots in the report, despite setting the page break avoid for the {div display:block}
Particularly disturbing is the band on the last image.
What is the expected result?
UserAgentString: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.80 Safari/537.36
,
Dec 15
,
Dec 17
Thanks for filing the issue! @Reporter: Could you please provide sample Test file/URL that reproduces the issue which help in further triaging the issue in better way. Thanks!
,
Dec 17
,
Dec 18
I will try to set up a test over the weekend
,
Dec 18
Thank you for providing more feedback. Adding the requester to the cc list. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Dec 18
FWIW, Internals>Plugins>PDF is for the PDF Viewer. This is PDF generation, aka printing. Is there any way to reproduce this without Puppeteer? That would make it easier to debug.
,
Dec 19
As per comment# 7 adding Needs-Feedback label to it.
,
Jan 7
Ok guys: Not sure who's plunkr this is (Sebastian M from AGM?), but it can demo the problem. Steps: Open - http://embed.plnkr.co/xXjOCZ/ Open - app/Main.ts, change line 22 to use a height of 800px Open plunkr in preview window (if you get an error, refresh the plunkr editor page) CMD P, for the print preview screen - you should see the band in the preview. As per attachment
,
Jan 7
Thank you for providing more feedback. Adding the requester to the cc list. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Jan 7
This kind of rendering split (with the map) appears to be happening with other print rendering also. When printing a table, I am also getting "arbitrary" (as yet I have not discerned a pattern) splits in the data, that appear to be stretching the data to fill the page. Will try and include this too, when I can get a reproducible example.
,
Jan 10
The steps in comment 9 allowed me to repro the bug. I tried launching Chromium with --enable-print-browser, and it shows up there too. So this is likely a Blink bug.
,
Jan 10
I wasn't able to reproduce this in 73.0.3667.0/dev on MacOS. Here are the steps I did; can you see if I made a mistake (or, possibly, this is fixed in M73)? 1. I went ahead and made a copy of the plunkr with the 800px edit so I loaded: https://embed.plnkr.co/wHI7FPNyjNTRBE3zyGQE/ 2. I closed the editor pane and file tree pane. 3. I pressed cmd + p 4. Things look fine, see attachment. Questions: 1) When I view https://embed.plnkr.co/wHI7FPNyjNTRBE3zyGQE, the map is not fullscreen like in your screenshot. How did you make it fullscreen? 2) The OP says this fails with Firefox and Safari too. Is that true? That makes me think this is a bug in the map code. 3) Can you try Chrome Canary and see if it reproduces there?
,
Jan 10
,
Jan 11
Try this: 1) Load https://embed.plnkr.co/wHI7FPNyjNTRBE3zyGQE/ 2) Press the expand icon (tooltip: Open the preview in a separate window) on the 3rd row in the top right corner. This opens a new tab with a https://run.plnkr.co/preview/.../ URL. 3) Press ctrl + p in the new tab. It works fine for me on Firefox. YMMV?
,
Jan 11
Thanks thestig, I can confirm this is reproducible with: --enable-print-browser --enable-prefer-compositing-to-lcd-text It looks like we are incorrectly not painting the img tiles due to clipping.
,
Yesterday
(43 hours ago)
The NextAction date has arrived: 2019-01-21
,
Yesterday
(35 hours ago)
pdr@, where does the problem lay for the purposes of setting a component? Compositor? Reset owner and status when we choose a component.
,
Today
(12 hours ago)
My guess is that this is a bug blink-side in paint, but I didn't debug this far enough to say whether it's paint or compositor. This bug seems very old, at least as far back as r493706 (M62). WDYT of marking this as available but not assigned to anyone?
,
Today
(10 hours ago)
Yeah, making available. |
|||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||
Comment 1 by myt...@gmail.com
, Dec 14