What is the process for changing the output paper size to A4 in React Native (expo android)?

Using React Native to develop an Android app for billing purposes, I encountered an issue with the output paper size being 216mmX279mm instead of the standard PDF size of 210mmX297mm. Utilizing expo-print and printToFileAsync from expo, I aim to achieve a PDF output in A4 size (210mmX297mm).

https://i.stack.imgur.com/qrDHl.png

After researching at the expo print documentation and referring to .@page docs on MDN website, I am left wondering: How do I Change Output to A4 size?
Examination of the print Documentation reveals mentions of FilePrintOptions, stating:

The default height of a single page is 792 pixels, equivalent to the US Letter paper format with 72 PPI. https://i.stack.imgur.com/F9edP.png

So How Can I change the defaults to A4 size and increase DPI?

javascriptandroidhtmlcssreact-native

Answer №1

Located It.

const saveAsFile = async () => {

const { path } = await Print.saveToFileAsync({
  content, height:842, width:595
});
console.log('File has been saved to:', path);
await shareDocument(path, { UTI: '.pdf', mimeType: 'application/pdf' });

Therefore, By default, height:792, width:612 of US letter paper at 72 PPI just like I inquired previously,
content is a string and accepts height and width as number as indicated in the code snippet,

if you want to adjust PPI, modify the pixel size for instance
A4 72PPI = H842, W595
A4 150PPI = H1754,W1240 It seems only "px" is allowed

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error encountered in jQuery 3.3.1: Unable to append a row to the tbody of a table

As I attempt to dynamically insert a row into an HTML table when a click event occurs using JQuery 3.3.1 and Bootstrap 4, I encounter a slight issue. HTML: <table id='tblAddedCallsign' class='table table-striped'> </table> ...

javascriptjquerybootstrap-4jquery-3

Is there a way to remove the initial word from a sentence?

Tue 26-Jul-2011 Looking to remove the initial word "Mon" using javascript with jQuery. Any suggestions on accomplishing this task? ...

javascriptjquery

Tips for locating the index while performing a drag and drop operation between two different containers

Can anyone help me figure out how to determine the exact index of an item when performing a jQuery drag and drop between two containers? I'm having trouble identifying the correct index, especially when it's dropped outside of its original contai ...

javascriptjqueryruby-on-rails-3jquery-ui-sortable

Has the HTML attribute 'step' stopped functioning properly?

I'm currently working on an Angularjs project that primarily uses material design. I am trying to set up a timepicker using the input control with the type=time attribute. However, I want to restrict the user to select times only within a 30-minute ra ...

htmlangularjs

To collapse a div in an HTML Angular environment, the button must be clicked twice

A series of divs in my code are currently grouped together with expand and collapse functionality. It works well, except for the fact that I have to click a button twice in order to open another div. Initially, the first click only collapses the first div. ...

javascripthtmlcssangulartypescript

Drag and drop a Jquery image onto the div with its top left corner

Drop targets: <div id="targetContainer" style="width:100px; height:100px;> <div id="tar_0-0" class="target" style="position: relative; float:left; width:50px; height:50px; background-color: #fff;"></div> <div id="tar_1-0" class="t ...

javascriptjqueryhtmldrag-and-drop

How can I use JavaScript to create a drop-down menu that only appears after selecting the previous one?

<div class="row"> <div class="col-md-4"> <label for="selectCustomers">Customer Select</label> <select class="form-control pointer" name="tableCustomers" id=" ...

javascripthtmldrop-down-menu

Error: The document is unable to detect any input values

I've been struggling with this issue for quite some time now and I can't seem to figure it out, no matter how hard I try. It seems that my input field is not capturing the value entered by the user for some unknown reason. Let me share the code ...

javascriptjqueryinput

Tips for concealing the currently playing track title on a media player

I'm looking for a way to conceal the track title displayed in the media player on Internet Explorer. Here's the code I currently have: <object id="mediaPlayer" width="320" height="240" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" type ...

html

After clicking, revert back to the starting position

Hey there, I have a question about manipulating elements in the DOM. Here's the scenario: when I click a button, a div is displayed. After 2 seconds, this div is replaced by another one which has a function attached to it that removes the div again. ...

javascriptjquery

Customized icons for Contact Form 7 on your Wordpress website

Currently, I am in the process of customizing a contact form by incorporating placeholder icons and text using the 'Contact Form 7' plugin within Wordpress. This particular contact form is situated on a website that I am constructing with the &ap ...

htmlcsswordpresswordpress-themingcontact-form-7

Unveiling the steps to automatically conceal a submitted form in React, no longer requiring the manual activation of a toggle button

Currently, I have a list of songs and a toggle button that reveals a form to add a new song. However, I want the form to hide automatically after submission without requiring another button click. I tried using useEffect but couldn't get it to work. A ...

javascriptreactjsformsexpresshide

Finding solutions for activating items and setting data sources in Bootstrap carousel thumbnails for Wordpress

I recently attempted to incorporate a bootstrap-powered carousel with thumbnails into my product slider. I managed to get it working for the main image (large image), but ran into issues when trying to resolve problems with the thumbnail section. Here is ...

jqueryhtmlcsswordpresstwitter-bootstrap

Troubleshooting strange behavior with Silex and Twig CSS caching issues

I'm facing a frustrating issue where changes I make in my CSS file are not reloading properly. The style.css file in PhpStorm appears as: body { background-color: blue; } However, when viewed in Chrome it shows: body { background-color: green; ...

cssgoogle-chrometwigphpstormsilex

Is there a way to eliminate the underline in TextField components in Material-UI?

Is there a way to remove the underline from a material-ui TextField without using InputBase? I would prefer to stick with the TextField API, but have not been able to find a solution in the documentation. ...

cssreactjsmaterial-ui

What is the best way to navigate back to the top of the page once a link has been clicked?

One issue I'm facing is that whenever I click on a link in NextJS, it directs me to the middle of the page: <Link href={`/products/${id}`} key={id}> <a> {/* other components */} </a> </Link> I believe the problem l ...

javascriptcssreactjsnext.js

Triggering a pop-up window to appear without user interaction on the specified date within the function

I am looking to automatically trigger a pop-up window when my website loads after a specific date that I define within a function. How can I set up the date function for this task? I want the pop-up window to appear automatically on 27/07/2011, and every ...

javascript

Implementing div elements in a carousel of images

I've been working on an image slider that halts scrolling when the mouse hovers over it. However, I'd like to use div tags instead of image tags to create custom shapes within the slider using CSS. Does anyone have any advice on how to achieve th ...

javascripthtmlcss

Android: Utilizing Spinners in Dialogs for Enhanced User Interaction

Looking to implement a dialog box for users to select year/month (specifically for credit cards). When the user clicks OK, I need to notify the host activity about these changes. Due to SDK version 7 compatibility requirements, DialogFragment cannot be us ...

androidandroid-dialog

Ways to optimize the performance of my android application

Looking for a way to optimize my Android app, as I am currently using 5 APIs in a single class which slows down the performance. Here is a snippet of my code: @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceS ...

javaandroidjsonoopoptimization