【前端】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、左: 10pxmargin:        [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的，直接导致捕获内容不完整。