What is the reason for the blank first page when printing with vue-html2pdf, a tool that utilizes html2pdf.js internally?

Hey there, I'm currently experiencing issues with printing using a Vue component named vue-html2pdf.

Here are the problems I'm facing:

  1. The pagination doesn't break the page when content is added, resulting in a 3-page printout.
  2. The first page appears blank when clicking on the download button.

Below are the settings I'm using for printing:

<vue-html2pdf
  :show-layout="false"
  :float-layout="true"
  :enable-download="true"
  :preview-modal="true"
  :paginate-elements-by-height="1400"
  filename="nightprogrammerpdf"
  :pdf-quality="2"
  :manual-pagination="false"
  pdf-format="a4"
  :pdf-margin="10"
  pdf-orientation="portrait"
  pdf-content-width="800px"
  @progress="onProgress($event)"
  ref="html2Pdf"
>

Here's a demonstration: https://codesandbox.io/s/vue-html-to-pdf-example-forked-3lijbr?file=/src/App.vue:95-532

javascriptvue.js

Answer №1

Exploring your codesandbox, I stumbled upon a solution: eliminating the section element resolved the issue of the first blank page disappearing.

<!-- 
<section slot="pdf-content">
  <ContentToPrint />
</section>
-->
<ContentToPrint slot="pdf-content" />

However, the pagination in the new pdf still appeared odd. To rectify this, I removed the div in ContentToPrint, resulting in a perfectly formatted pdf.

<template>
  <div style="margin: 12px 12px">
    <img src="https://picsum.photos/500/300" />
    <!-- <div> -->
    <p>
      <strong
        ><a href="https://www.nightprogrammer.com/" target="_blank"
          >Nightprogrammer.com</a
        ></strong

It seems that the library is unable to handle excessive div elements.

Check out my modified codesandbox. The pdf appears better when viewed on a standalone page ()

https://codesandbox.io/s/vue-html-to-pdf-example-forked-1puw7d?file=/src/App.vue

Answer №2

To resolve the issue, switch out the section tag with a div tag.

Answer №3

Dealing with a similar problem led me to discover a solution through some adjustments. After reviewing your code snippet, I noticed that the paginate-elements-by-height attribute was set to "1400". By reducing the limit to 1200 and exporting the document again, I successfully eliminated the blank page from the resulting PDF file.

Answer №4

After some troubleshooting, I discovered that changing the min-height of my wrapper from 100vh to auto resolved the issue.

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

Can we accurately pinpoint individual LineSegments in three.js by hovering over them, especially those with unique geometries?

Creating two examples of drawing lines in three.js was quite a fun challenge. One example showcased different geometry and material, while the other kept it simple with just one geometry and material. The demonstration links can be found here: Example 1 an ...

javascriptthree.js

How can state be efficiently communicated from a parent component to a child component in React?

As I embark on my first React project, I have encountered a recurring issue that has left me scratching my head. Whenever I pass state to a child component within an empty-dependency useEffect and then update the state, the child fails to reflect those cha ...

javascriptreactjs

Encountering a ReferenceError while attempting to implement logic on a newly created page

I've been experimenting with building a website using the Fresh framework. My goal was to add a simple drop-down feature for a button within a navigation bar, but I'm struggling to figure out where to place the necessary code. I attempted creatin ...

javascripttypescriptserver-side-renderingjavascript-framework

Link the Material-ui ToggleButtonGroup with redux-form

I'm currently facing a challenge with connecting the material-ui ToggleButtonGroup to Redux form. The issue seems to be occurring in my code snippet below: <Field name='operator' component={FormToggleButtonGroup} > <ToggleButt ...

javascriptreactjsmaterial-uiredux-formtogglebutton

Manage AJAX API responses in Vuex by loading, storing, and reloading them for improved efficiency

In my project, I have a vue3-app that acts as the frontend for an asp.net core 2 api. Many components use the same data, leading to multiple identical requests. To avoid this, I want to store response data in vuex if it's not already there. The chal ...

vue.jsaxiosvuex

npm not working to install packages from the package.json file in the project

When using my macbook air, I encounter an issue where I can only install npm packages globally with sudo. If I try to install a local package without the -g flag in a specific directory, it results in errors. npm ERR! Error: EACCES, open '/Users/mma ...

javascriptmacosnode.jsnpmosx-mountain-lion

Sketch the borders of the element (animated)

Seeking a way to create a button with an animated border that looks like it is being drawn. Current progress involves some code, but it's not working smoothly with border-radius set. (keep an eye on the corners) https://codepen.io/anon/pen/MbWagQ & ...

javascriptjqueryhtmlcss

Maintain scroll position during ajax request

I am working on a single-page website that contains numerous containers. Each container's content is loaded dynamically via ajax, so they may not all be populated at the same time. These containers have variable heights set to auto. The website uti ...

javascriptjqueryhtmlcss

Tips for sending a successful POST request with the MEAN stack

Currently, I am utilizing yeoman to set up a new project. My ultimate goal is to master the process of scaffolding CRUD operations. However, I have encountered an issue with a post request. For this reason, I opted for the angular-fullstack generator as I ...

javascriptnode.jsangularjsmongodbexpress

sanitizing user input in an AngularJS application

I created a feature in angular using ng-repeat <ul class="messages"> <li ng-repeat="e in enquiries"> <img src="/img/avatar.jpg" alt=""> <div> ...

javascriptangularjs

Searching by multiple parameters in Angular.js

I have a script that scans through a field and highlights the words related to the search input. I want this script to not only filter by title, but also by name. How can I adjust the code to filter both the title and name when searching? <li ng-repeat ...

javascriptangularjs

Can you explain the different types of dynamic page props available in a Next.js application?

Is there a specific type available in Next.js 14 that I can use to replace the "any" type in the TypeScript code snippet below, for my dynamic route? export default async function DetailProduct({ params }: any) { const { imageAddress, title, price } = ...

javascriptreactjsnext.js

What is the mechanism behind the jQuery ready function that enables its first parameter to transform into a jQuery object?

While browsing today, I came across this interesting code snippet: jQuery(document).ready(function($$){ console.log($$); }); It seems that $$ is recognized as the jQuery object itself. Typically, to achieve this, we would need to pass the jQuery varia ...

javascriptjquery

Steps to create a submit button that is linked to a URL and includes an image

I'm attempting to convert my submit button into an image that, when clicked, redirects to another page. Currently, the submit button is functional but lacks the desired image and href functionality. <input type="submit" name="submit" alt="add" o ...

javascriptphpjqueryhtmlcss

The function of cookieParser() is causing confusion

Having an issue that I've been searching for answers to without success. When using app.use(express.cookieParser('Secret'));, how can we ensure that the 'Secret' is truly kept secret? I'm feeling a bit lost on this topic. Is ...

javascriptnode.jscookiesexpress

Manipulating toggle buttons using CSS and jQuery

Check out this jsfiddle to see my attempt at creating a toggle switch in the form of a mute button. The toggle button shows the current setting: mute or unmute When hovered over, it displays the alternative setting However, I am encountering an issue wh ...

javascriptjquerycsshover

Check my Twitter feed every 10 seconds

I'm attempting to access my Twitter feed (sent from a smartphone) for a local application, as Twitter is remote... I created a jQuery + JSON script, but with my overly frequent setInterval at 25ms, I quickly hit the limit of 150 requests per hour and ...

javascriptapitwitter

Oops! There seems to be an error with the <path> attribute. It looks like we were expecting a number, but received something different: "

I'm currently working on creating a basic line graph using d3.js and integrating it into a React component. However, I'm encountering this error: Error: <path> attribute d: Expected number, "MNaN,36.393574100…" Unfortunately, the similar ...

javascriptreactjsapid3.jsaxios

The initialization of the R Shiny HTML canvas does not occur until the page is resized

I am currently facing an issue while integrating an HTML page with a canvas into my shiny R application using includeHTML(). The packages I am using are shiny, shinydashboard, shinycssloaders, dplyr, and DT. Everything is working perfectly fine except for ...

javascripthtmlcssshinyhtml5-canvas

Issue: ArrayBuffer failing to function properly in conjunction with Float64Array in NodeJS

Having some trouble with getting a Float64Array to work with an array buffer in Node. Here's what I've tried... var ab = new ArrayBuffer(buffer.length); var view = new Uint8Array(ab); console.log(view.length);//prints 3204 However, when I try ...

javascriptnode.js