十月十号 2022-01-07 19:18 采纳率: 73.3%
浏览 21

在用html2canvas和pdf的时候，在点击后修改dom节点的一个样式，但是pdf还是修改前的样式，我想要修改后的，有无解法？


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
        <script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script>
        <style type="text/css">
            .a{
                position: relative;
                width:200px;
                height:200px;
                border: 1px solid red;
                overflow: hidden;
                /* display: flex; */
                /* flex-wrap: wrap; */
                /* overflow-y: scroll; */
            }
            .name{
                width:200px;
                height:200px;
                background-color: #0000FF;
            }
            .name2{
                position: absolute;
                top: 0px;
                left: 200px;
                width:200px;
                height:200px;
                background-color: #acffb6;
            }
        </style>
    </head>
    <body>
        <div id="all">
            <div class="a" id="box">
                <div class="name" ></div>
                <div class="name2"></div>
            </div> 
            
        </div>
            
            <button type="button" id="exportToPdf" onclick="btn()">pdf</button>
            <script type="text/javascript">
                 function btn() {
                    var nameboxs = document.getElementsByClassName("name2");
                    var a = document.getElementById("box");
                    box.style.overflow="visible";
                    for(let i=0;i<nameboxs.length;i++){
                        nameboxs[i].style.position="static";
                    }
                    
                    //  nameboxs.forEach( el =>{
                    //     el.style.position="static";
                    // })
                        html2canvas(
                                document.getElementById("all"),
                                {
                                    dpi: 172,//导出pdf清晰度
                                    onrendered: function (canvas) {
                                        var contentWidth = canvas.width;
                                        var contentHeight = canvas.height;
                            
                                        //一页pdf显示html页面生成的canvas高度;
                                        var pageHeight = contentWidth / 592.28 * 841.89;
                                        //未生成pdf的html页面高度
                                        var leftHeight = contentHeight;
                                        //pdf页面偏移
                                        var position = 0;
                                        //html页面生成的canvas在pdf中图片的宽高（a4纸的尺寸[595.28,841.89]）
                                        var imgWidth = 595.28;
                                        var imgHeight = 592.28 / contentWidth * contentHeight;
                            
                                        var pageData = canvas.toDataURL('image/jpeg', 1.0);
                                        var pdf = new jsPDF('', 'pt', 'a4');
                                        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                                        //当内容未超过pdf一页显示的范围，无需分页
                                        if (leftHeight < pageHeight) {
                                            pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
                                        } else {
                                            while (leftHeight > 0) {
                                                pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                                                leftHeight -= pageHeight;
                                                position -= 841.89;
                                                //避免添加空白页
                                                if (leftHeight > 0) {
                                                    pdf.addPage();
                                                }
                                            }
                                        }
                                        console.log(canvas,pdf)
                                        pdf.save('hh.pdf');
                                    },
                                    //背景设为白色（默认为黑色）
                                    background: "#fff"  
                                })
                    
                   
                }
            </script>
    </body>
</html>
  • 写回答

1条回答 默认 最新

  • ZionHH 2022-01-08 12:27
    关注

    其实是获取了修改后的dom，html2canvas会获取选中节点的宽高来生成canvas，从而使你这里超出的部分未被渲染
    可以在 background下面设置生成的高度，height: 404
    或者all换成body节点

    img

    评论

报告相同问题？

问题事件

  • 修改了问题 1月7日
  • 修改了问题 1月7日
  • 创建了问题 1月7日

悬赏问题

  • ¥15 Kylin-Desktop-V10-GFB-Release-JICAI_02- 2207-Build14-ARM64.iso有没有这个版本的系统啊
  • ¥15 能不能通过蓝牙将传感器数据传送到手机上
  • ¥20 100元python和数据科学实验项目
  • ¥15 根据时间在调用出列表
  • ¥15 FastReport.community 编辑，table只显示“每页”最顶部和底部横线
  • ¥15 R 包chipseeker 安装失败
  • ¥15 Veeam Backup & Replication 9.5 还原问题
  • ¥15 vue-print-nb
  • ¥15 winfrom的datagridview下拉框变成了黑色，渲染不成功
  • ¥20 利用ntfy实现短信推送