Some background:
There is no native pixel resolution for a PDF document. This is because PDF documents are scaled using inches. Each PDF viewer then determines how many pixels it will display per inch (e.g. Adobe Acrobat is 110px/in).
My problem:
React-PDF uses a default scale of 72ppi. However in many cases this is too small for comfortable reading. I was hoping there may be a way to set up a default PPI of 96.
What I currently do:
I scale each <Page/> by a factor of 96 / 72, however I'm worried that this scaling is being applied after the main rendering process (i.e. on the pixel output) rather than as part of it (i.e. on the source document).
<Document file={url}>
<Page scale={96/72} pageNumber={1}/>
</Document>
This could result in bluriness of the final output.
Possible solution?
Rendering the document as an SVG may improve final scaled-resolution detail.
<Page renderMode="svg"/>
Anyone else have some experience working with PPI in react-pdf?
Yes, you can improve the final scaled-resolution detail by rendering the document as an SVG. This is because SVGs are vector-based, meaning that they are resolution-independent and can be scaled without loss of quality. You can set the renderMode prop of the Page component to "svg" to render the page as an SVG.
Here is an example of how to set the default PPI to 96 using the defaultScale prop of the Document component:
<Document file={url} defaultScale={96/72}><Page pageNumber={1} renderMode="svg" /></Document>
This will render the first page of the document as an SVG with a default scale of 96 PPI. You can adjust the defaultScale value to whatever PPI you prefer.
As for where to send the secret code for authentication, typically the user would enter the code into the Google Authenticator app on their device, which generates a time-based one-time password (TOTP) that they can use for authentication. The TOTP is typically entered into your application's login form along with the user's username and password. You don't need to send the secret code anywhere, as it is only used to generate the TOTP on the user's device.