The Vue html2pdf library seems to be generating an incorrect HTML element in the resulting PDF file

I am working on developing an app in Vue and I am encountering an issue while trying to use vue-html2pdf for generating PDF files from an HTML element. The problem is that the PDF generated seems to be cut off. You can view a screenshot of the HTML element here

Additionally, here is the PDF file that is being generated: here

Below is the code of the element that I am trying to convert into a PDF file.

<vue-html2pdf
      :show-layout="false"
      :float-layout="true"
      :enable-download="true"
      :preview-modal="true"
      :paginate-elements-by-height="1000"
      filename="hee hee"
      :pdf-quality="2"
      :manual-pagination="false"
      pdf-format="a4"
      pdf-orientation="portrait"
      pdf-content-width="800px"
      ref="html2Pdf"
  >
      <section slot="pdf-content" >
        <section class="pdf-content">
          <WarscrollComponent 
            v-for="(miniscroll, index) in getScrollsToPrint" 
            :key="index" 
            :miniscroll="miniscroll"
            component="printSheet"
          />
        </section>
      </section>
    </vue-html2pdf>

Any suggestions on what might be causing this issue?

javascriptvue.jspdfhtml2pdf

Answer №1

While it may not be the ideal solution, I can confirm that it worked for me and I have come to accept it since there doesn't seem to be a better alternative.

For my case, adding margin-top: -1123px to the top section of the PDF content helped remove unnecessary space at the top.

Your specific situation may require a different approach, but I believe there is a suitable combination out there that will work for you too.

If anyone has a more standardized solution, feel free to share it in the comments section.

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

Issues have been encountered with Angular 5 when trying to make required form fields work properly

Just created my first Angular app using Angular 5! Currently following the documentation at: https://angular.io/guide/form-validation. Below is the form I have set up: <form class="form-container"> <mat-form-field> <input matInput pl ...

javascriptangulartypescript

What are the steps to incorporate ThreeJS' FontLoader in a Vue project?

I am encountering an issue while attempting to generate text in three.js using a font loader. Despite my efforts, I am facing difficulties in loading the font file. What could be causing this problem? const loader = new FontLoader(); loader.load( ' ...

javascriptvue.jsvuejs2three.js

Sending information to a PHP script using Ajax

I am working on a project that involves input fields sending data to a PHP page for processing, and then displaying the results without reloading the page. However, I have encountered an issue where no data seems to be passed through. Below is my current s ...

javascriptphpjqueryajax

Using jQuery Plugin for Date Operations

I am in search of a jQuery tool that can assist me with date manipulations, such as: 1) Adding a specific number of days to a date and obtaining a new Date. 2) Determining the week of the year for a given date. 3) Calculating the number of days between two ...

jqueryjquery-pluginsjavascript

Adjust Position of Text on nvd3 Line Chart

Is there a way to rotate the x-axis labels by 90 degrees? I am experiencing issues with them overlapping. I have attempted to use the rotateLabels option, but it doesn't seem to be working as expected. <nvd3-line-chart data="singleLineChartD ...

javascriptangularjsd3.jssvgnvd3.js

Unable to retrieve information from the json-server

For my current project in Backbone.js, I'm utilizing the json-server package to populate it with data. I've created a db.json file containing the data and executed the command json-server --watch db.json. The server started successfully and is ru ...

javascriptjsonbackbone.js

Looking to incorporate an Ajax feature that allows for updating dropdown menus in each row of the database

Please find below the UI screenshot highlighting the dropdown menu: What I am looking for? I would like the option selected in the dropdown menu to be updated for each specific row in the database using AJAX. Below are the codes I have written. As a beg ...

javascriptphpjqueryajaxcodeigniter

Establishing the preset values for Material-UI toggle button group

I utilized the Material UI library to implement a button toggle widget for selecting options. Check out my codesandbox project here - https://codesandbox.io/s/50pl0jy3xk The user can interact by choosing a membership type: adult, child, or infant. Option ...

javascriptreactjstogglematerial-ui

Whenever the user hits the "Enter" key, a new element will be generated and added to the bottom of an existing element

I am in need of creating a new element at the end of another element. For instance, let's say I have this element: <div id="elmtobetrig">Element that should be followed by another element when the user hits enter after this text. <! ...

javascripthtmlcss

Working with the Enter Key in Vue.js

I am faced with a challenge involving a text field and a button setup. By default, the button is set to submit a form when the Enter key is pressed on the keyboard. My goal is to capture each key press while someone is typing in the text field, particularl ...

javascriptvue.js

Hold off until the script is successfully downloaded and executed, then patiently wait for the DOM to finish loading

I'm facing a challenge with running Javascript conditionally without it being in requirejs form. The script is located on the same server/domain as the requesting page, where an ajax call needs to be made. Is there a foolproof way to ensure that an a ...

javascriptjqueryajaxdom

What could be causing the state to continuously appear as null in my redux application?

Currently, I am in the process of developing a basic contacts application to gain expertise in React and Redux. The main focus right now is on implementing the feature to add a new contact. However, I have encountered an issue where the state being passed ...

javascriptreactjsreduxreact-reduxstate

Retrieve specific components of objects using a GET request

When visitors land on my web app's homepage, a GET request is triggered to fetch a current list of Stadiums stored in the database through my API. However, the Stadium objects retrieved are packed with unnecessary data, particularly extensive arrays o ...

javascriptangularjsnode.jsmongodbmongoose

Free up MySQL connections within a Promise.All implementation

At the moment, I am facing issues with releasing MySQL connections from a connection pool. Interestingly, when I release connections in a synchronous "for" loop, everything works fine. However, when I attempt to release them asynchronously using Promise.Al ...

javascriptmysqlnode.jspromise

What is the best way to track and document the specific Context Provider being utilized while invoking useContext?

After creating a custom component that displays AuthContext.Provider with specific values, I encountered an issue. Even though it functions correctly, when I utilize useContext within a child of the AuthProvider component, my code editor (VS Code) is unabl ...

javascriptreactjsvisual-studio-codereact-contextjsdoc

Ways to incorporate a unique debounce technique where the function is only executed every nth time

const _debounce = (num, fn) => { //implementation goes here } const originalFunction = () => { console.log('fired') } const _callFunc = () => _debounce(2, originalFunction) _callFunc() //The originalFunction does not run _callFun ...

javascriptdebouncing

Using HTML and CSS to create a Contact Form

Greetings! I have come across this contact form code: /* Custom Contact Form Styling */ input[type=text], [type=email], select, textarea { width: 100%; padding: 12px; border: 1px solid #555; margin-top: 6px; margin-bottom: 16px; resize: v ...

javascripthtmlcssreactjs

Display user profile pictures from Vue.js in the Laravel public directory

I have been working on implementing a commenting system and recently incorporated vue.js into my laravel project. One of the features I want to include in my comment area is displaying user profile images from the laravel public folder. However, I am u ...

javascriptphplaravelimagevue.js

Using JavaScript to interact with elements inside an iframe on a webpage

In a simple scenario, I am experiencing incorrect results. Code snippet from MyFrame.HTML: <!DOCTYPE html> <html> <head> <title>My Frame</title> </head> <body> <a href="https://www.google.com& ...

javascripthtmliframe

Utilizing JavaScript, create a dynamic grid gallery with Div Spin and expand functionality

I am looking to create a unique effect where a div rotates onclick to reveal a grid gallery on the rear face. Starting this project feels overwhelming and I'm not sure where to begin. <ul class="container-fluid text-center row" id=" ...

javascripthtmlcssbootstrap-5image-gallery