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";

复制代码

// 修改查看回执按钮
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 并赋值给 simheiBase64
    doc.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 数据 URL
    const pdfData = doc.output('datauristring');

    // 在弹窗中显示 PDF
    document.getElementById('pdfFrame').src = pdfData;
    $('#pdfModal').modal('show');
}