Cannnot convert HTML code to PDF with vue-html2pdf - vue.js

Question

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:
<vue-html2pdf
:show-layout="false"
:preview-modal="true"
:paginate-elements-by-height="10"
:filename="test"
:pdf-quality="2"
:pdf-format="size"
:ref="ref"
>
<section slot="pdf-content">
<section class="pdf-item">
<img :src=url>
</section>
</section>
</vue-html2pdf>
And my function to download PDF:
function generateReport() {
this.$refs.html2Pdf.generatePdf();
}

Answer 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: https://www.npmjs.com/package/html2pdf.js/v/0.9.1
Codesandbox Example: https://codesandbox.io/s/xlnzq7y28q
Hope that, your problem will be solved. Thanks.

Answer 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.

Answer 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.

Answer 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 jspdf#1.5.2
2. npm i html2pdf.js#0.9.1
3. npm i vue-html2pdf#1.8.0
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_modules\html2pdf.js\package.json"
and i have seen
"dependencies": {
"es6-promise": "^4.2.5",
"html2canvas": "^1.0.0-alpha.12",
"jspdf": "^1.4.1"
}
then from "myproject\package.json" -
I have replaced
"dependencies": {
from "jspdf: ^1.5.2" to "jspdf: ^1.4.1"
so need to set
1. npm i jspdf#1.4.1
2. npm i html2pdf.js#0.9.1
3. npm i vue-html2pdf#1.8.0
so you should look at *jspdf version* into "node_modules\html2pdf.js\package.json"