# 安装稳定版本
npm install html2canvas@1.4.1 jspdf@1.5.3<div>
<div ref="contentRef" class="certificate-content">
<div class="title">标题</div>
<div>内容</div>
</div>
<div class="bottom-btn">
<button @click="downLoadPDF">生成PDF</button>
</div>
<div>
<script lang="ts" setup>
import {
ref,
reactive,
PropType,
watch,
defineProps,
defineEmits,
onMounted,
computed,
} from 'vue';
const contentRef = ref();
const loading = ref(false);
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
const downLoadPDF = async () => {
if (!contentRef.value) {
console.log('contentRef.value 为空');
return;
}
loading.value = true;
try {
//1. 将DOM节点转换为Canvas图像
const canvas = await html2canvas(contentRef.value, {
scale: 2, //提高分辨率，让PDF更清晰
backgroundColor: '#fff',
logging: false,
useCORS: true, //如果内容中有图片，需要开启跨域支持
});
const imgData = canvas.toDataURL('image/png');
//2. 创建 PDF 文档（A4纸尺寸，纵向）
const pdf = new jsPDF({
orientation: 'portrait',
unit: 'mm',
format: 'a4',
});
const pdfWidth = pdf.internal.pageSize.getWidth(); // A4 宽度约 210mm
const pdfHeight = pdf.internal.pageSize.getHeight(); // A4 高度约297mm
const imgWidth = pdfWidth;
const imgHeight = (canvas.height * imgWidth) / canvas.width;
//4. 将图像添加到 PDF 中
pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight, undefined, 'FAST');
//5. 保存PDF,
pdf.save(`XXX.pdf`);
} catch (err) {
console.log('生成PDF失败', err);
} finally {
loading.value = false;
}
};
</script>
<style scoped>
.certificate-content {
padding: 80px;
font-family: 'SimSun', '宋体', serif;
font-size: 16px;
white-space:pre-wrap;
white-space:pre-line;
}
.title{
text-align: center;
margin-bottom: 100px;
font-size:30px;
}
.bottom-btn{
text-align: right;
}
</style>