Impossible to convert html code to pdf with vue-html2pdf

问题

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

When i write a text in tag : <section>something</section>, my PDF is generated. But when i write in tag : <section><p>something</p></section>, my browser is crashed.

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>

                  <button @click="generateReport">Download</button>

with this code below, my browser crashes.

And my function to download pdf :

function generateReport() {
  this.$refs.html2Pdf.generatePdf();
}

回答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.

回答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.

回答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.

来源：https://stackoverflow.com/questions/60204249/impossible-to-convert-html-code-to-pdf-with-vue-html2pdf

标签

Vue.js

html2pdf