快捷導(dǎo)航

vue如何使用html2canvas和JsPDF導(dǎo)出pdf組件

更新時(shí)間：2024年09月13日 10:05:33 作者：侯六六

這篇文章主要介紹了vue如何使用html2canvas和JsPDF導(dǎo)出pdf組件問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

使用html2canvas和JsPDF導(dǎo)出pdf組件

來(lái)看實(shí)例

<template>
  <div class="g-down-pdf">
    <div  ref="pdfDom">
    //插入的內(nèi)容
       <slot name="content" ></slot>
    </div>
    <div @click="savePdf" class="get-pdf">
      <slot name="button">     
      	<div>下載PDF</div>
      </slot>
    </div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
  components: {

  },
  props: {

  },
  data() {
    return {
    }
  },
  methods: {
    savePdf() {
      const title = '評(píng)估報(bào)告'
      // 滾動(dòng)條會(huì)導(dǎo)致空白 導(dǎo)出時(shí)需置頂
      window.pageYOffset = 0
      document.documentElement.scrollTop = 0
      document.body.scrollTop = 0 
	 
	  // 在ios手機(jī)上會(huì)導(dǎo)致 上方空白 后邊內(nèi)容丟失  在電腦瀏覽器上的ios并不會(huì)
	  const u = navigator.userAgent
      const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 // android終端
      const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios終端
      html2canvas(this.$refs.pdfDom, {
        allowTaint: true,
        y: isIOS ? 200 : 0
      })

      html2canvas(this.$refs.pdfDom, {allowTaint: true，y: isIOS ? 200 : 0})
        .then((canvas) => {
          const contentWidth = canvas.width
          const contentHeight = canvas.height
          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 = canvas.toDataURL('image/jpeg', 1.0)
          const PDF = new JsPDF('', 'pt', 'a4')
          // 有兩個(gè)高度需要區(qū)分，一個(gè)是html頁(yè)面的實(shí)際高度，和生成pdf的頁(yè)面高度(841.89)
          // 當(dāng)內(nèi)容未超過(guò)pdf一頁(yè)顯示的范圍，無(wú)需分頁(yè)
          if (leftHeight < pageHeight) {
            PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
          } else { // 分頁(yè)
            while (leftHeight > 0) {
              // 在pdf.addImage(pageData, 'JPEG', 左，上，寬度，高度)設(shè)置在pdf中顯示；
              PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
              leftHeight -= pageHeight
              position -= 841.89
              if (leftHeight > 0) {
                PDF.addPage()
              }
            }
          }
          PDF.save(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>