【前端】html2pdf实现用前端下载pdf

npm安装完后，编写代码。

<template>
  <div id="pdf-content">
    需要被捕获为pdf的内容
  div>
template>

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

export default {
  methods: {
    downloadPdf() {
      const element = document.getElementById('pdf-content');
      const opt = {
      	// 转换后的pdf的外边距分别为：上: 10px、右: 10px、下: 10px、左: 10px
        margin:        [10, 10, 10, 10],
        filename:     '下载.pdf',
        image:        { type: 'jpeg', quality: 1 },
        html2canvas:  { scale: 1 },
        jsPDF:        { unit: 'mm', format: 'a4', orientation: 'portrait' }
      };
      
      // 调用html2pdf库的方法生成PDF文件并下载
      html2pdf().from(element).set(opt).save();
    },
  },
};
script>

pdf-content这一块div展示的内容都将被捕获，成为生成的pdf页的内容。

注意，如果pdf-content使用了滚动条，滚动条没有滚到的部分是无法被捕获进pdf的，直接导致捕获内容不完整。