SoFunction
Updated on 2025-04-05

How to export pdf components using html2canvas and JsPDF for vue

Export pdf components using html2canvas and JsPDF

See examples

<template>
  <div class="g-down-pdf">
    <div  ref="pdfDom">
    //Inserted content       <slot name="content" ></slot>
    </div>
    <div @click="savePdf" class="get-pdf">
      <slot name="button">     
      	<div>downloadPDF</div>
      </slot>
    </div>
  </div>
</template>
<script>
import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
  components: {

  },
  props: {

  },
  data() {
    return {
    }
  },
  methods: {
    savePdf() {
      const title = 'Assessment Report'
      // The scroll bar will cause blankness. You need to put the top when exporting       = 0
       = 0
       = 0 
	 
	  // On the ios mobile phone, it will cause blank above and content behind it will be lost. iOS on the computer browser will not	  const u = 
      const isAndroid = ('Android') > -1 || ('Adr') > -1 // android terminal      const isIOS = !!(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios terminal      html2canvas(this.$, {
        allowTaint: true,
        y: isIOS ? 200 : 0
      })

      html2canvas(this.$, {allowTaint: true,y: isIOS ? 200 : 0})
        .then((canvas) => {
          const contentWidth = 
          const contentHeight = 
          const pageHeight = contentWidth / 592.28 * 841.89
          let leftHeight = contentHeight
          let position = 0
          const imgWidth = 595.28
          const imgHeight = 592.28 / contentWidth * contentHeight
          const pageData = ('image/jpeg', 1.0)
          const PDF = new JsPDF('', 'pt', 'a4')
          // There are two heights to be distinguished, one is the actual height of the html page and the page height of the generated pdf (841.89)          // When the content does not exceed the range displayed on one page of pdf, no paging is required          if (leftHeight < pageHeight) {
            (pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
          } else { // Pagination            while (leftHeight > 0) {
              // Set in pdf to display in (pageData, 'JPEG', left, upper, width, height)              (pageData, 'JPEG', 0, position, imgWidth, imgHeight)
              leftHeight -= pageHeight
              position -= 841.89
              if (leftHeight > 0) {
                ()
              }
            }
          }
          (title + '.pdf')
        })
    }
  }
}
</script>
<style scoped lang="less">
  .get-pdf{
    width: 100vw;
    height: 160px;
    background: #FFFFFF;
    box-shadow: 0px 2px 0px 0px #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
    /*position: fixed;*/
    /*bottom: 0;*/
    &>div{
      width: 90vw;
      height: 100px;
      background: #4475D6;
      border-radius: 8px;
      text-align: center;
      line-height: 100px;
      font-size: 36px;
      font-weight: 500;
      color: #FFFFFF;
    }
  }
</style>

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.