How to generate a PDF with Playwright that is doubled in quality? - pdf

I'm trying to create a PDF in Playwright that is double in quality.
I have tested:
Using scale parameter (but this "zooms in" and cuts the content)
Adding "double width and height" for Letter (this results in a 21x bigger in weight PDF, definitely looks better, but I'm worried that the size is not standard Letter).
I'm wondering if there's a way to do it maybe with CSS?
What I'm looking for is something like "zoom the page 2x and put the content into 1x"
Is it possible?

Related

How do I re-use the same image payload in several pages without repeating it?

I'm using tcpdf to generate a report that contains a logo from a svg vector image.
My goal is to efficiently re-use the same image payload over and over in the report, not storing the logo as if it was a different image on each page.
Right now, with the current data, the report generates 32 pages. The file size considerably increases with new pages being added. This seems to be due to the logo being repeated on every page.
I don't have tools to analyze what is inside the pdf but I can see from other reports that are generated by other applications, that the file size of pdfs containing repeated images peaks at 1 page and then on each consecutive page, the size increases very slightly, indicating that the first logo is efficiently re-used.
How can I achieve that using tcpdf?
If in my report, I place the logo only in page 1 and omit it in pages 2 - 32, still outputting all the text data, the file size is greatly reduced, just as in the examples that I mentioned before. This indicates that the svg data is repeated on every page.
From the example 009 in tcpdf's site documentation, I've tried loading the image from file and also tried using a "data stream" (this is encoding the svg in base64 and instead of referencing the image from a file, you use the text-based base64 variable content as a stream that contains the image payload).
I thought that using the data stream would take care of it, but it didn't.
Is there a way to reference the same image over and over in tcpdf?

White image while inserting a SVG image in TCPDF

I'm trying to insert some SVG images in a PDF using TCPDF with the method TCPDF::ImageSVG, but when I try this I get a white space.
If I try to enable TCPDF::setRasterizeVectorImages the image shows in the PDF file, but it is rasterized of course and so its quality is not good.
Do you have any idea?
Thank you very much for your help!
Unfortunately, TCPDF's SVG handling is quite limited, and the cause of your issue depends on the SVG you are trying to use. Later versions of TCPDF support more SVG functionality, so if you haven't done so, try using a later version of TCPDF.
If an update doesn't resolve the issue, and you're forced to use raster images, you can improve quality at the cost of file size. You can do this by rasterizing them at a high DPI yourself outside of TCPDF. Once you've done this, take your new high-resolution raster image and add it to your PDF with the Image method like any other raster image. At work we usually rasterize to 300dpi, but your application may call for more or less.
If your image gets added to the PDF far larger on the page than you expected, specify at least one of the dimensions so TCPDF knows how much of the page you're intending the image to use.

Font hinting behavior in PhantomJS?

I need to render text contained within divs on HTML document into PDF. I'm thinking of using PhantomJS, but one thing is very important. Different browsers and platforms render the text differently. So if I have the following code:
<div style='width:150px; height:80px; position:absolute; top:130px; left:78px'>
<p> Some text, yayy! :) </p>
</div>
It may render on one browser like this:
Some text, yayy!:)
But on another like this:
Some text,
yayy!:)
What happened was that (because of font-hinting, I guess), the text in the first example ended up with a certain width that fit into the containing div, but because of the font rendering on the second browser, the text ended up taking just a little more space that didn't fit in the container, and had to wrap around to the next line. I can't afford this kind of unreliability on how the output turns out. If the HTML had it on one line, I need the PDF to have on the same line too.
I've actually asked a related question here: Make fonts on Windows render like Mac/Linux: disabling font-hinting and/or deal with anti-alias on client side with no luck, but it was basically in trying to solve this same issue.
Can PhantomJS do anything about this? Or can PhantomJS at least somehow calculate the true width of a text, without font hinting and any other things involved? Or maybe calculate what it might render to if hinting were included? Or anything, as long as things come out on the PDF as they look on HTML. (Given the application I'm working on, I do not have the freedom change the CSS style of the containing DIV).
Font hinting is almost certainly not what is changing the width of text here. Font hinting involves making small adjustments to line up edges in an outline font to screen pixels; the adjustments are made within each character and should not change the overall width of that character.
Across platforms, there are slightly different versions of a font because of licensing issues. macOS and GNU/Linux can't usually go out and copy Microsoft's fonts exactly, for legal reasons, so the nearest you'll get is a font that basically looks the same (and has a similar name) but isn't really the same font. So some width variations across platforms are to be expected, unless you can provide your own font files along with the page (web fonts).
PhantomJS uses the system's fonts just like any other browser. So using PhantomJS will not automatically give you some "cross-platform" set of fonts that's different from your system fonts.
If you need 100% reproducibility then I suggest creating a virtual machine (or Docker image) with a standard set of fonts installed, and use that everywhere. Just don't forget to apply security patches to it when needed.

pdf2svg without size specification

I want to convert pdf to svg using pdf2svg without the width and height specification that is automatically added (for the purpose to make it fit to the container along the lines of what is mentioned here). I couldn't find any option on pdf2svg to do this. What is the most realistic reliable way to do this? If scripting is necessary, I would use jQuery and/or Ruby.

How to embed an image in a PDF using cfpdfform

I'm dynamically generating a PDF with a few variables but also need to be able to embed an image on the PDF. Anyone have any experience doing this using ?
You use a regular HTML image tag.
However for good print quality images you need to use an image that has larger dimensions than you might use in the document.
For example:
<img src="/path/to/my_picture.1280x800.jpg" style="width:320px;height:200px;" />
So in that example the width/height of the image file is at 4x what is displayed (obviously the source image need to have that quality to start with; resizing a smaller image bigger wont do much).
Being PDF, you've got conventional units too, so you can use CSS's in or cm units to set sizes relative to the paper size, but you'll still have the same issue of needing a larger input file. (This example is 160 px:in resolution)
<img src="/path/to/my_picture.1280x800.jpg" style="width:8in;height:5in;" />
Something else to be aware of - since the images are embedded (uncompressed?) in the PDF this can significantly increase filesizes, so you may need to experiment to work out the best trade-off between filesize and image quality.
Direct html tag did not work. But I figured out a solution which did.
<cfset photoLink = "D:\........\example.jpg">
<cffile action="readbinary" file="#photoLink#" variable="binAgentPhotoFile">
<cfinvokeargument name="photoFile" value="#toBase64(binAgentPhotoFile)#"/>
Argument is then passed to the schema.