Solution 1 :

vue-html2pdf npm module does not work properly. Rather than you can try html2pdf module for convert html to pdf in vuejs.

Package link:

Codesandbox Example:

Hope that, your problem will be solved. Thanks.

Solution 2 :

I just saw this, I am the developer of vue-html2pdf, and I tested your code on version 1.3.6, it worked perfectly on Chrome Version 81.0.4044.138, Microsoft Edge 44.18362.449.0 and Firefox 76.0.1.

you also have a typo on <img :src=url> it should be <img :src="url">

and if you can, can you please provide the values of the variables test, size, and ref, you assigned to the props.

and the prop :paginate-elements-by-height="10" I think the value should be higher, try 1300.

Solution 3 :

After losing my day I found the problem !
Here 2 sources of error :

-If you use a “component” inside the “vue-html2pdf”, the page break couldn’t work.
To solve this problem, use “vue-fragment” library <3

-If you use a too small value for “paginate-elements-by-height” attribute, the “vue-html2pdf will bug and then you can just kill the process. By default it’s 1300 or 1400, try with 1600 or more and your problem will solved.

Solution 4 :

fixed this problem: Impossible to convert html code to pdf with vue-html2pdf

   the first of all i have set packages in the such following sequence
    1. npm i [email protected] 
    2. npm i [email protected]
    3. npm i [email protected]

    On time the passing some steps to create pdf file i got mistake
    `TypeError: str.charAt(...) is not a function`.
    or on another configuration for vue-html2pdf i am getting the console messages:
    - Dom Has Rendered 
    - 0ms html2canvas: html2canvas $npm_package_version
    - 926ms html2canvas: Document cloned, using computed rendering
    - 926ms html2canvas: Starting node parsing
    - 947ms html2canvas: Finished parsing node tree
    - 948ms html2canvas: Finished loading 0 images Array(0)
    - 949ms html2canvas: Starting renderer
    - 950ms html2canvas: Canvas renderer initialized (816x18 at 312,63) with scale 2
    - 959ms html2canvas: Render completed
    but pdf file no created
    I fixed this problem:
    when i looked at "node_moduleshtml2pdf.jspackage.json"
    and i have seen
    "dependencies": {
        "es6-promise": "^4.2.5",
        "html2canvas": "^1.0.0-alpha.12",
        "jspdf": "^1.4.1"
     then from "myprojectpackage.json" - 
    I have replaced
     "dependencies": {
     from "jspdf: ^1.5.2" to   "jspdf: ^1.4.1"
     so need to set
     1. npm i [email protected]
     2. npm i [email protected]
     3. npm i [email protected]
     so you should look at *jspdf version* into "node_moduleshtml2pdf.jspackage.json"

Problem :

I have a project in vuejs and I have to use vue-html2pdf.

When I write text the in tag: <section>something</section>, my PDF is generated.
But when I write in tag: <section><p>something</p></section>, my browser is crashes.

Here my code in vuejs:

    <section slot="pdf-content">
        <section class="pdf-item">
            <img :src=url>

And my function to download PDF:

function generateReport() {


Comment posted by DocBook

Consider also, on Linux,

Comment posted by Hashan Liyanage94

Thank you !!! it was really helped to me. Cheers!!!

Comment posted by

Careful! that package has 4 vulnerabilities, 1 of them high: Severity: high Regular Expression Denial of Service (ReDoS) –

Comment posted by

xmldom * Severity: moderate Misinterpretation of malicious XML input –

Comment posted by…i

Can you please tell me how to pass URL of same domain to download the pdf of that page ? I have checked this script but not able to understand how can i pass URL into it. Example:

Comment posted by Cynthia

I’m not able to get a copy of your codepen to work in my application. The method fires when I press the button, but the html2pdf portion does nothing, and I don’t get an error. Any advice on how to display an error if there is one?