In configuring the print settings, I specified margins to ensure proper formatting. However, I noticed that the margin adjustment only applies to the first page. I need

I have a method that retrieves margin top value from the backend. It works perfectly on the first page of print, but on the second page, the margin top space is missing.

initializePrintingSettings() {
this.printService.fetchPrintSettings().subscribe(response => {
  if (response["status"] && response["data"].length > 0) {
    this.printSettings = response["data"][0];
    console.log(this.printSettings);
    this.printSettings["margins"] =
      this.printSettings["margins"].split(",").join("cm ") + "cm";
  }
});

Additionally, I've created the following print function:

printContent.document.write(
  '<body style="margin:' +
  this.printSettings["margins"] +
  '" onload="window.print();window.close();">'
);

Answer №1

To set custom margins for each page, use the code below:

printDoc.document.write(
    '<style>
        @page {
            size: auto;
            margin: ' + this.printSettings["margins"];+
        '}
   </style>
   <body onload="window.print();window.close();">'
);

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

What is the proper syntax for implementing the $q.all method?

During my interview, I was asked the following question. Can you identify the correct syntax for using the $q.all method? • $q.all([promise1(), promise2]).then((values) => { … }); • $q.all("promise1", "promise2").then((values) => ...

Numerous column pictures that occupy the entire browser screen

I am looking to create a grid of clickable images that expand to cover the width of the browser window without any space on either side. Ideally, I would like each image to be 180x180px in size, but if it's easier they can resize based on the browser ...

Interacting with a 3D model using the mouse cursor in a three

After stumbling upon the three.js library recently, I've been spending several days experimenting with it. I am eager to incorporate a mouse event into my project similar to this example where the head of the skull follows the cursor. However, I want ...

Having trouble updating text in a PDF using NodeJS and hummus library

How can NodeJS be used to replace a string in a PDF file? offers a solution for text replacement in a PDF document. However, when applying the same code, an issue arises where the replaced text is visible in the source code of the PDF but does not render p ...

Creating a list of items using HTML tags should be coded in a way that fits neatly within the main container element

UPDATE: I've come across this code that seems to be functioning somewhat as desired. You can view it live at UPDATE - It's still not aligning properly within the #main div! I've experimented with both 100% and 990px for width in #menu span, ...

Offering fields for modules, main, and browser that meet the needs of ESM, CommonJS, and bundlers

I have upgraded a number of my published npm packages to include both commonjs and esm builds. Some of these packages are meant for use in both node and the browser, and they are all compiled using webpack or rollup. Additionally, all of them are written i ...

Error: The variable "user" has not been declared in server.js when using passportjs

As a novice with limited experience and a tendency to borrow code snippets from various sources, I'm struggling to identify the root cause of the Reference Error: User is not defined. This particular error crops up when I try to input or submit a new ...

Error encountered while trying to create a new project using Angular-

After executing ng new onepage, I encountered the following error message after waiting for a few minutes: npm WARN deprecated <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ec8b9e8d8f898a9980c18a9facddc2dec2df">[email  ...

Problem with javascript querystring code

Currently in the process of writing some vanilla JavaScript code to manipulate query strings without using jQuery. Here's what I have so far: // If there is no viewid in the query string, append it as a new key if (newUrl.indexOf("viewid") == -1) { ...

Continuous Updates to innerHtml in Angular2

While working on a project, I encountered an issue that seems to be more about style than anything else. The endpoint I am calling is returning an SVG image instead of the expected jpeg or png format, and I need to display it on the page. To address this, ...

Setting the minimum width for a grid item in a React Material UI component

Is there a way to ensure that a material-ui Grid item has a minimum width of 250 pixels? I've tried using the sizing suggestions from Material UI's documentation, but haven't had any success. The 'logo' element within the Grid cont ...

How can I automatically redirect a React page once I receive a response from Express?

I'm facing an issue with redirecting from one page to another in React. The setup involves an Express server serving the required data to React, and upon receiving the data in React, the goal is to display that result on another page by triggering a r ...

Retrieve the minimum and maximum values from a multi-dimensional array

If my array consists of the following subarrays: array = [[1, 5, 8, 9], [3, 7], [3, 8, 33], [2], [0, 6]] I am looking to determine the maximum and minimum values in this array. For example, in this case: max = 33, min = 0 While I have come across exampl ...

Stop SCSS from processing CSS variables in Angular-CLI

I am currently using Angular5 with sass v1.3.2. My goal is to dynamically change a color that is widely used in the scss files of my single page app without having to recompile new files. This color is globally defined in my _variables.css as: $brand: # ...

The background size cover feature is not functioning properly on mobile devices, especially on longer pages

In my Next.js project, I am encountering an issue with the background image not displaying on longer pages when viewed on a Google Pixel 3a device. Here is how it looks on shorter pages that do not exceed the viewport height: https://i.sstatic.net/jJBTy.pn ...

Troubleshooting Query Param Problems in EmberJS Route Navigation

("ember-cli": "2.2.0-beta.6") A search page on my website allows users to look for two different types of records: Users or Organizations. The URL for this search page is /search and I have implemented query parameters to maintain the state and enable ba ...

Issue with font icons not displaying properly on Firefox

In Firefox, the icon is not displaying in the center, but it works fine in Opera. body { height: 100vh; display: grid; place-items: center; } .link { background-color: red; padding: 3px; display: grid; place-items: center; ...

receiving null instead of an identifier

Attempting to perform an update operation in Angular. Upon submission after updating, a random number is displayed at the end of the API rather than the specific id number. The request URL appears as follows Request URL: http://localhost:4200/api/auth/rol ...

Streaming live video on the website

Hi there! I'm looking to integrate live video capturing into an HTML/JavaScript site for a presentation. However, I'm not sure where to start my search. Can anyone point me in the right direction? :) The live video will be captured by a camera o ...

Deleting an element from an array in JavaScript

I am working with a JavaScript array that I need to store in local storage. var myArray; myArray = [1,2,3,4,5]; localStorage.setItem('myArray', JSON.stringify(myArray)); The above code snippet sets the values of the 'myArray' ...