html页面使用jspdf预览及下载pdf模板

1,heml页面引入js
<!-- 引入PDF生成库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script><script src="/js/jspdf.min.js"></script>//为本地中文字体base64文件路径2,
下载ttf格式字体,在网站File To Base64 Encoder | Convert any file | GiftOfSpeed 中转换为base编码"AAEAAAARAQAABAA"定义到js文件jspdf.min.js中内容:
const simheiBase64 = "data:application/font-ttf;crset=utf-8;base64,AAEAAAARAQAABAA";

3,html页面调用:

// 修改查看回执按钮
actions.push('<a class="btn btn-info btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="viewReceipt(\'' + row.noticeId + '\', \'' + row.noticeTitle + '\', \'' + row.createBy + '\', \'' + row.createTime + '\')"><i class="fa fa-eye"></i>查看回执</a> ');

// 查看回执函数
function viewReceipt(noticeId, title, creator, createTime) {const { jsPDF } = window.jspdf;const doc = new jsPDF();// 假设你已将 SimHei.ttf 转换为 Base64 并赋值给 simheiBase64doc.addFont(simheiBase64, 'SimHei', 'normal');doc.setFont('SimHei');// 添加文本doc.setFontSize(20);doc.text('公告回执', 105, 20, null, null, 'center');doc.setFontSize(12);doc.text('公告ID: ' + noticeId, 20, 40);doc.text('公告标题: ' + title, 20, 50);doc.text('创建者: ' + creator, 20, 60);doc.text('创建时间: ' + createTime, 20, 70);doc.text('生成时间: ' + new Date().toLocaleString(), 20, 80);// 生成 PDF 数据 URLconst pdfData = doc.output('datauristring');// 在弹窗中显示 PDFdocument.getElementById('pdfFrame').src = pdfData;$('#pdfModal').modal('show');
}