Generate a PDF file using HTML content with specified page dimensions and margins

I'm in the process of generating a PDF from an HTML page using google-apps-script and need to set the page size to "Letter" instead of "A4" (8.26 x 11.69). While I have managed to tackle background colors, images, and more based on various resources including Creating PDF from HTML background color in the PDF, the challenge lies in adjusting the page size.

function htmlToPDF() {

  var html = "<h1>Hello world</h1>"
       + "<p>This is just a paragraph"
       + "<p style='color:red;'>I am red</p>"
       + "<p style='color:blue;'>I am blue</p>"
       + "<p style='font-size:50px;'>I am big</p>"
       + "<table style='border-collapse: collapse; width: 698px; height: 115px; background-color: #C5D9F1;' border='0' cellpadding='10'>"
       + "<tbody>"
       + "<tr>"
       + "<td style='padding: 5px;background-color:powderblue;' nowrap='nowrap'><strong>Bold with background-color:</strong></td>"
       + "</tr>"
       + "</tbody>"
       + "</table>";

  var blob = Utilities.newBlob(html, "text/html", "text.html");
  var pdf = blob.getAs("application/pdf");

  DriveApp.createFile(pdf).setName("text.pdf");

  MailApp.sendEmail("[your email here ]", "PDF File", "", 
     {htmlBody: html, attachments: pdf});
}

Several methods have been attempted to modify the size

1) Including the following snippet adjusts the margin to zero

<style> @page { margin: 0; }

However, specifying Width & Height like so, does not produce any changes.

@page { margin: 0; width: 216mm; height: 279mm }

and/or

@media print { margin: 0; width: 600px; height: 800px }

2) Even trying to alter the Width & Height during the creation of the HTML Output as shown below

  var h = HtmlService.createHtmlOutput(myHTML);
  h.setWidth(2550);
  h.setHeight(3300);

Thank you...

Answer №1

According to the information provided in the official documentation,

It is important to note that not all CSS properties can be modified using @page. Only the margins, orphans, widows, and page breaks of the document are customizable. Any attempts to modify other CSS properties will not have any effect.

However, there is a way to experiment with the size property:

<style>
@page  {
  margin: 0;
  size: letter; /*or width then height 150mm 50mm*/
}
</style>

Answer №2

  const documentOptions: any = {
    size: "letter",
    filePath: `${PDFS_DIRECTORY}\\${fileName}.pdf`,
    margins: {
      top: "1in",
      right: "1in",
      bottom: "1.25in",
      left: "1in",
    }
  };

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 Webpack 4 when trying to compile node modules CSS file: Unexpected .(dot) token

I am currently in the process of transitioning my React project from client-side rendering to server-side rendering. Unfortunately, I have encountered an issue with my webpack configuration for CSS that was working perfectly fine in my original project (c ...

How can Checkbox body styles be altered based on its input state in Mantine?

I am utilizing Mantine and need to create a custom styled container for a Checkbox input. This particular checkbox will alter its body styles based on the input state (checked or not checked). To achieve this, I must determine the pseudo class state of th ...

Firefox is unable to display SWF files

My code snippet: <div id="sw" style="cursor:pointer" > <object id="swfobj" type="application/x-shockwave-flash"> </object> The JavaScript part: function openfile(filePath) { $("#swfobj").attr("data", filePath); $("#sw ...

Stop Sass from including property entirely

Within my current project, I have implemented a sass-mixin that looks something like this: mymixin.scss: @mixin customized_mixin($header-border-top-stack, $header-border-bottom-stack) { #some-id { border-top: $header-border-top-st ...

Modify the current style of the MUI table

I'm working on a table with sorting functionality similar to the mui website's "sorting and selecting" feature: https://material-ui.com/components/tables/ My goal is to modify the color of the header text that is selected for sorting. I attempte ...

Update issue detected with radio buttons in jQuery

Trying to get radio buttons in my code to update like other variables on the web page when their state changes. HTML <TD><Input id="radOn2" name="Nb_var86" type= "radio" Value=1 onClick="this.form.submit();">ON</TD> <TD><Input ...

Expanding a centered div beyond 100% width will cause the div to only enlarge towards the right side

I am currently in the process of revamping the login page for my website. I am facing a challenge where I am unable to adjust a div element to extend beyond 100% without it overflowing to the right side instead of the left. Despite trying various methods, ...

In Bootstrap 5 navbar, a distinct white underline is displayed beneath the dropdown menu in the

When designing my website with Bootstrap 5, I utilized the framework to create the navbar. Incorporating my own CSS, I enabled the services dropdown to open on hover. However, upon testing, I observed an unexpected white underline appearing under the servi ...

Loading an external script is causing a total style overhaul on my website

Every time I load my page to check the remaining balance of a gift card (using a third-party script), it seems to mess up the styles that are already set on my website. Here is a snippet of the code causing the issue: <div id="main" class=&quo ...

The iframe HTML code is appearing as normal text within a table

https://i.stack.imgur.com/1MIs5.png There are numerous questions like this on Stack Overflow without answers, which is why I'm posing this question. This particular issue only displays text and not a HTML iframe inside a table td element. <!DOCTYP ...

Aligning two lines next to a radio button using HTML and CSS

I'm facing a challenge where I want to align two lines in the middle of a radio button. Despite my efforts, I am able to line up the top line but struggling with the bottom one. I prefer not floating the radio button as it's being styled using a ...

Adding design to distinct element after clicking a button

Struggling with a JS/Jquery issue on my portfolio website, I admit that I am still just an average programmer. My portfolio website has five buttons, each representing a different project. For each project, there is a corresponding text description and an ...

Modifying an image using JavaScript and CSS

I've been experimenting with adding an Adblock detector that will show one image when detecting Adblock and another when not detecting it. The challenge lies in the fact that CSS controls the display and formatting of the image. Is there a way to mani ...

Let us know when the information on a different tab is updated

I have multiple tabs and I want to indicate when a change occurs on another tab that the user hasn't clicked. For example, if the user hits the run button while on the Data pane, I would like the Errors tab to change to red to show that there was a ch ...

Displaying hyperlinks within a table that is contained within a div on the current webpage

I have created an HTML page that looks like this: <!DOCTYPE html> <html> <body bgcolor="#EBF5FB"> <h1 align="center">SLA Monitor Reports </h1> <div id="link" align="center"> <table cellpadding="25px" bord ...

Tips for retaining the value of a variable when the page is reloaded

I need to store the value of the variable loggedIn, as it determines the behavior of a function in appComponent.html. Can you explain how I can achieve this? Template of app component: <li class="nav-item"> <a class ...

Converting Numerical Formats into Numbers: A Step-By-Step

How can I format numbers in JavaScript as 1,000,000 without being able to use the operators +, -, *, or / with numbers inputted into a specific box? After clicking "try it," an error message is displayed: ORIGINAL AMOUNT: NaN ORIGINAL AMOUNT: NaN ...

Using a link within a container with a specific style defined within an element in HTML/CSS

Currently, I am in the process of creating my first HTML5 application but encountering some challenges with HTML/CSS, specifically with the header tag. I typically start my CSS rules by targeting the main element to control each property individually and ...

The file type input is not directing to the correct folder in Internet Explorer version 9

Could someone please assist me with this problem in IE9? After I select a file to upload, then choose another one, it shows "fakepath" in IE9. See the image below for more information: https://i.sstatic.net/QsJFk.png https://i.sstatic.net/3nWRC.png htt ...

How to turn off span text in AngularJS

What is the best way to deactivate the text within a span using angularjs? I'm having trouble with ng-disabled in my situation. Below is the code for the span element: <span ng-click="clickMe()" ng-if="true" ng-disabled="true">Click Me!</sp ...