html2cavans&jsPDF实现html元素转存为pdf

最新推荐文章于 2025-05-25 12:50:06 发布

原创

最新推荐文章于 2025-05-25 12:50:06 发布 · 568 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html2canvans #jsPDF

本文介绍了如何在业务场景中，通过点击按钮将表格数据渲染到模板并保存为PDF。在实现过程中遇到由于元素隐藏导致保存为空的问题。解决方案是使用Promise封装html2canvas的转换过程，确保在PDF保存完成后再进行元素隐藏，从而正确保存显示的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

业务场景

通过点击按钮将表中一条数据渲染到模板中保存为pdf

问题

因为我的打印元素开始是隐藏的，调起保存时才让它显示，保存后再让它隐藏，
这个时候就会发生一个问题，保存下来的是被渲染成隐藏的html，什么都没有。这是因为异步导致的，html2canvans还没转译完的时候就已经被渲染隐藏了。
解决：给函数加上同步，用Promise封装转译保存过程，这样在主函数中通过await 等待保存完成后执行隐藏操作。

//首先需要引入html2cavans 和 jspdf
   async function renderPrescriptionInfo(type,data) {
         // console.log(data)
        var data = data
        data.createTime = layui.util.toDateString(data.createTime, 'yyyy-MM-dd');
        //获取需要打印的元素
        var getTpl = document.getElementById("prescription").innerHTML
            , view = document.getElementById('prescription1Html');
        laytpl(getTpl).render(data,async function (html) {
            view.innerHTML = html;
            var flag = false;
            if(type==='print'){
                $('#main').addClass('layui-hide');
                $('#printDiv').removeClass('layui-hide');