Corrupted PDF file producing distorted images

I recently created a well-designed HTML page that can be transformed into a PDF format. The HTML page displays correctly in the web browser.

https://i.sstatic.net/D0DE8.png

However, when I execute window.print(), the structure appears distorted.

https://i.sstatic.net/1EtRJ.jpg

This is how my HTML code looks:

<div class="main"> <!-- PDF Page 1 --> </div>
<div class="pagebreak"></div>
<div class="main"> <!-- PDF Page 2 --> </div>
<div class="pagebreak"></div>
<!-- more ... -->

I've spent hours trying to troubleshoot this issue without success. The red boxes located at the corners of the PDF pages have the CSS property position: absolute;. The overflowing content seems to be causing the problem. How can I prevent this from happening?

javascripthtmlcsspdf

Answer №1

It appears that the issue may be related to the dimensions of the parent element, although more information such as the CSS code is needed for a precise diagnosis. One solution could be to adjust the parent element to take up the full width and height of the viewport. You can try something like this:

<div class="main" style="height:100vh;"> <!-- Content for PDF Page 1 --> </div>
<div class="pagebreak"></div>
<div class="main" style="height:100vh;"> <!-- Content for PDF Page 2 --> </div>
<div class="pagebreak"></div>
<!-- Add more content here -->

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

When executing store.sync() in ExtJS, all fields are passed

In the latest version of ExtJS (6.5.0), I have set up a Store and an editable grid panel: Ext.define('StateStore',{ extend: 'Ext.data.Store', alias: 'store.stateStore', storeId : 'StateStore', field ...

javascriptajaxextjs

Error (CODE5022) JavaScript detected in Internet Explorer 10

Here is the code that I wrote: AjxException.reportScriptError = function(ex) { if (AjxException.reportScriptErrors && AjxException.scriptErrorHandler && !(ex instanceof AjxException)) { AjxException.scriptErrorHandler(ex); ...

javascriptajaxinternet-explorer-10

What is the best method for incorporating jQuery code into a separate file within a WordPress theme?

I'm fairly new to working with Javascript/jQuery, so please be patient with me. Currently, I'm in the process of creating a custom WordPress theme where I've been using jQuery to modify the main navigation menu generated in my header file ( ...

javascriptjquerywordpress

Encountering a problem while verifying pattern using regular expressions

I'm facing an issue when manually checking if my inputs match the specified patterns. Below is the function I am using for this check: if (!$element.attr("pattern")) return true; let pattern = $element.attr("pattern"); le ...

javascripthtmlregex

Can you effectively link together AngularJS promises originating from various controllers or locations?

Attempting to explain in as much detail as possible, the configuration file config.js contains the following code snippet: .run(['$rootScope', '$location', 'UserService', 'CompanyService', function($rootScope, $loca ...

javascriptangularjspromiseq

Angular 6 CSS spacing dilemmas

We recently made the switch from Angular 5 to Angular 6 and noticed that there is no spacing between the buttons/icons, etc. We are looking to bring back the spaces between the buttons and icons. I have recreated the issue below. As you can see in the Ang ...

javascriptcssangularangular5angular6

What is the best way to transfer data between files in Python?

My website code is (ser.html) <div> <a v-bind:href="'ser/'+post.name"> {{post.name}}</a> </div> I am trying to transfer post.name data from this file to another one (det.html). In my views.py file: from django.shortcut ...

javascriptjquerypythonpython-3.xvue.js

Unable to capture screenshot of hovered element using Cypress

Having an issue with taking a screenshot of an element with a hover effect. The screenshots always come out without the hover effect applied. tableListMaps.lineWithText('Hello world', 'myLine'); cy.get('@myLine').realH ...

javascriptreactjscypress

Displaying a table using Vue.js to showcase filtered data fetched with Axios

I have been struggling to find a solution for displaying filtered results in my table using Vue.js and Axios. While I am able to filter the results with an if statement, the issue arises when exporting the data as it includes unfiltered results as well. Cu ...

javascriptvue.js

Change the marquee scrolling back to its original starting point

I am trying to implement a continuous image scroll (marquee) in HTML. My goal is to have the marquee stop scrolling when the mouse hovers over it, with the images returning to their initial position. Once the mouse moves away, I want the marquee to resume ...

jqueryhtmlcssimagemarquee

Can anyone share tips on how to effectively center navbar link items with Bootstrap?

I recently tried to center the navigation links on my website using Bootstrap. I followed the instructions on the w3schools documentation and also watched a YouTube video for additional guidance. Both resources suggested adding the justify-content-center c ...

htmltwitter-bootstrapbootstrap-5

Utilize a CSS selector to target all deleted nodes using the MutationObserver in the HTML5 API

Is there a way to retrieve all removed nodes from the DOM that have specific classes using CSS selectors? Below is an example of how it can be done with some complexity, but is there a simpler and more general approach? new MutationObserver(mut =& ...

javascripthtmlcssmutation-observers

Extract the body.req object within a loop in a Node.js application

I'm looking to efficiently parse and save the body of a POST request using Mongoose in Node.js. Is there a way to use a for loop to accomplish this task, rather than manually saving every property? My ideal solution would involve something like: for ...

javascriptjsonnode.jsexpresspost

Limit DerbyJS to re-rendering specific DOM elements

Currently, DerbyJS (visit http://derbyjs.com) functions by replacing everything in the body tag of the document each time a link is clicked. Is there a way to utilize the template, but replace only the content inside #main-content instead of refreshing th ...

javascriptjquerynode.jsderbyjs

The applet failed to load on the HTML webpage

I'm having trouble getting this applet to load on an HTML page. I've already added full permissions in the java.policy file and I'm using the default HTML file from NetBeans Applet's output. /* Hearts Cards Game with AI*/ import java.a ...

javahtmlapplet

ERB failing to interpret Ruby script

Hello, my index.html.erb file looks like this: <h1>Bookmarks</h1> t <% @books.each do |b| %> <div class="book"> e <div class="row"> s <div class="col-md-1"> t <p class="rank-this ...

htmlruby-on-railsrubyerb

Is it possible for a website administrator to view the modifications I have made to the CSS and HTML code?

Is it possible for a website to detect any temporary changes made to their CSS or Html through developer tools, even though these changes are not permanent? ...

htmlcss

How to convert a querydict with multiple objects into lists

When I send an array of JavaScript objects to a Django view via AJAX, the object structure is as follows: [{'oid':'id1','oiid':'iid1'},{'oid':'id2','oiid':'iid2'}] This is ho ...

javascriptajaxdjango

MongoDB is experiencing an issue where the latest document is not being stored at the

Storing comments for my webpage in MongoDB has been flawless so far. Whenever a new comment is saved, it gets added to the bottom of the collection. This results in the newest comment appearing at the top when loading comments, which is ideal. However, I e ...

javascriptmongodb

Align the input labels to the right

In the demonstration below, an example is provided for aligning labels to the right of an input field. Is there a way to ensure that the input field takes up 100% of the width? Additionally, can an input be replaced with a textarea or another div element w ...

htmlcss