Vue--将页面区域导出为pdf

背景：

将前端页面指定区域的内容导出为pdf，使用纯前端实现

两种实现：

• 方式一： 使用jsPDF、html2canvas，将特定区域使用html2canvas转化为图片，使用jsPDF将图片转化为pdf。

  该方式适用于小区域转化pdf。当前转化区域有翻页时会出现内容拆分导致导致的可读性变差。

  <template>
    <div>
      <!-- 其他代码 -->
      <el-button @click="handleDownload">下载PDF</el-button>
      <el-dialog :visible.sync="dialogVisible">
        <div id="content-to-pdf">
          <!-- 对话框内容 -->
        </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');
          
          // 创建PDF并添加图片
          const pdf = new jsPDF();
          pdf.addImage(imgData, 'PNG', 10, 10);
          
          // 下载PDF
          pdf.save("download.pdf");
        });
      }
    }
  }
  </script>
  

• 方式二：html2pdf.js 将特定区域。支持自动分页

  <template>
    <div>
      <!-- 其他代码 -->
      <el-button @click="handleDownload">下载PDF</el-button>
      <el-dialog :visible.sync="dialogVisible">
        <div id="content-to-pdf">
          <!-- 对话框内容 -->
        </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: '导出文档.pdf',
  	      image: { type: 'jpeg', quality: 0.98 },
  	      html2canvas: {
  	        scale: 2,
  	        useCORS: true, // 如果你有加载图片，且跨域
  	        allowTaint: true
  	      },
  	      jsPDF: {
  	        unit: 'mm',
  	        format: 'a4',
  	        orientation: 'portrait'
  	      }
  	    })
  	    .save();
      }
    }
  }
  </script>