Low PDF Quality

I'm testing the PDF reporting functionality (my main reason to migrate to Opendistro) when I noticed that the generated PDF is just a screenshot of the page instead of a vector/text PDF. Also there's a issue with some fonts with wrong kerning.

I've reading the code and doing some tests, and looks viable to remove the screenshot part of the code:

kibana-reports/kibana-reports/server/routes/utils/visual_report/visualReportHelper.ts

Lines 170 to 177 in 98750be

    
           const screenshot = await page.screenshot({ fullPage: true }); 
        
           const templateHtml = composeReportHtml( 
        
             reportHeader, 
        
             reportFooter, 
        
             screenshot.toString('base64') 
        
           ); 
        
           await page.setContent(templateHtml);

So the quality is restored, but the font kerning issue persists. Doing some research, found this issue on puppeteer that suggests adding --font-render-hinting=none to args solves the problem. I did tested here, and the result is a perfect PDF.

Note that since the removed piece of code is responsible for adding the header and footer to the report, we need to rewrite the composeReportHtml to modify the original html instead of creating a new one.

I'm working on a pull request to solve this issue, but would be great to hear from someone that wrote the screenshot part the reasons for it.

@iget-master
Hi that's an issue that has been brought up a lot. Honestly I forget why we made a deisgn choice at that time lol, but some time ago I did have a branch in my own repo that does some research on high-quality, text-selectable pdf. But I think at that time we just don't have enough time and resource to complete that and add to the release. Please take a look if you can find anything useful. The changes are mainly in one file, and I mostly get it working. But I didn't think of the font issue at that time. And there are minor issues of header/footer rendering, which I documented in the TODOs.

Please let me know if you have a different approach and I am willing to discuss more.

https://github.com/zhongnansu/kibana-reports/blob/research-text-selectable-pdf/kibana-reports/server/routes/utils/visualReportHelper.ts#L113-L169

@zhongnansu your solution is similar to mine, except for the fix for wrong fonts. But now I noticed that I made it only for Dashboard as source, I'll test with visualization

This issue has been moved to opensearch-project/reporting#45

	const screenshot = await page.screenshot({ fullPage: true });

	const templateHtml = composeReportHtml(
	reportHeader,
	reportFooter,
	screenshot.toString('base64')
	);
	await page.setContent(templateHtml);