Vue 指定 DIV 導出 PDF

Vue項目, 將 DIV 以 PDF 的形式導出
 1 <template>
<div class="btn" @click="downloadPdf">下載</div>
<div ref="pdf">我是一個要變為圖片或PDF的div</div>
</template>
<script>
  import html2canvas from 'html2canvas'
  import jspdf from 'jspdf'
  export default {
    name: "printDiv",
    data () {
      return {
        pdf: null
      }
    },
    methods: {
      downloadPdf () {
        let target = this.pdf
        html2canvas(target, {
            useCORS: true, // 當圖片是鏈接地址時，需加該屬性，否組無法顯示圖片
            "imageTimeout": 0,
            'scale': 2,
            "width": 592,
            "height": 841,
          })
            .then(canvas => {
              console.log(canvas)
              let contentWidth = canvas.width; // 592px
              let contentHeight = canvas.height; // 841px
              //一頁pdf顯示html頁面生成的canvas高度;
              let pageHeight = contentWidth / 592 * 841;
              //未生成pdf的html頁面高度
              let leftHeight = contentHeight;
              //頁面偏移
              // let offsetX = 100;
              // let offsetY = 100;
              let offsetX = 0;
              let offsetY = 0;
              //a4紙的尺寸[595.28,841.89]，html頁面生成的canvas在pdf中圖片的寬高
              let imgWidth = 592;
              let imgHeight = 592 / contentWidth * contentHeight;
              let pageData = canvas.toDataURL('image/jpeg', 1.0);

              // 第一個方向,第二個單位,第三個尺寸格式
              // landscape橫向
              // let pdf = new jspdf('landscape', 'pt', 'a4');
              let pdf = new jspdf('', 'pt', 'a4');

              //有兩個高度需區分，一個是html頁面的實際高度，和生成pdf的頁面高度(841.89)
              //當內容未超過pdf一頁顯示的范圍，無需分頁
              if(leftHeight < pageHeight) {
                pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
              } else {
                while(leftHeight > 0) {
                  pdf.addImage(pageData, 'JPEG', offsetX, offsetY, imgWidth, imgHeight)
                  leftHeight -= pageHeight;
                  offsetX -= 592;
                  offsetY -= 841;
                  //避免添加空白頁
                  if(leftHeight > 0) {
                    pdf.addPage();
                  }
                }
              }
              let name = '文件名.pdf'; // 定義生成的pdf的文件名字
              pdf.save(name);
            });
      }
    },
    mounted () {
      this.pdf = this.$refs.pdf
    }
  }
</script>