<template>
  <div>
    <!-- 其他代碼 -->
    <el-button @click="handleDownload">下載PDF</el-button>
    <el-dialog :visible.sync="dialogVisible">
      <div id="content-to-pdf">
        <!-- 對(duì)話框內(nèi)容 -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import html2canvas from 'html2canvas';
import { jsPDF } from "jspdf";

export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    handleDownload() {
      const contentDom = document.getElementById('content-to-pdf');
      
      // 使用html2canvas捕獲DOM元素為圖片
      html2canvas(contentDom).then(canvas => {
        const imgData = canvas.toDataURL('image/png');
        
        // 創(chuàng)建PDF并添加圖片
        const pdf = new jsPDF();
        pdf.addImage(imgData, 'PNG', 10, 10);
        
        // 下載PDF
        pdf.save("download.pdf");
      });
    }
  }
}
</script>

<template>
  <div>
    <!-- 其他代碼 -->
    <el-button @click="handleDownload">下載PDF</el-button>
    <el-dialog :visible.sync="dialogVisible">
      <div id="content-to-pdf">
        <!-- 對(duì)話框內(nèi)容 -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import html2pdf from 'html2pdf.js';

export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    handleDownload() {
      const contentDom = document.getElementById('content-to-pdf');
      
      html2pdf()
	    .from(element)
	    .set({
	      margin: 10,
	      filename: '導(dǎo)出文檔.pdf',
	      image: { type: 'jpeg', quality: 0.98 },
	      html2canvas: {
	        scale: 2,
	        useCORS: true, // 如果你有加載圖片，且跨域
	        allowTaint: true
	      },
	      jsPDF: {
	        unit: 'mm',
	        format: 'a4',
	        orientation: 'portrait'
	      }
	    })
	    .save();
    }
  }
}
</script>