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的,直接導致捕獲內容不完整。