Question

我试图将HTML2Canvas与jsPDF一起使用来保存一些手风琴到pdf。手风琴是用javascript动态创建的，我试图将它们的高度保存到pdf（我需要在某个时刻拆分页面并将它们保存在单独的图像中，因为它们太大了）。我收集了所有手风琴的名字：

function gatherAccordions(){
    //Launched on button click
    var accordionArr = document.getElementsByClassName("akkordion");
    for (var i = 0; i<accordionArr.length;i++){
        console.log(accordionArr[i]);
        console.log(accordionArr[i].clientHeight); //returns 0
    }
}

编辑：当我读到更多时，我得到了.clientHeight将返回0，以防CSS中没有设置高度。我决定尝试强烈建议的jQuery方法。虽然它让我回归-2（显然它可能是正确的高度）。

function gatherAccordions(){
    var accordionArr = document.getElementsByClassName("akkordion");
    for (var i = 0; i<accordionArr.length;i++){
        console.log(accordionArr[i]);
        console.log($("#"+accordionArr[i].id).height()); //returns -2
    }
}

任何想法我怎么能接近这件事？我必须注意，手风琴（你可以从下面的代码中看到）不是手风琴树的底部元素，下面有几个div和其他东西。如果我将.height（）分别给予accordionBody和accordionhead，我确实收到-20和-31作为结果高度，这听起来很奇怪（是负面的）。此外，当我向手风琴身体添加元素时，身体的高度并没有增加，虽然在视觉上我可以清楚地告诉它确实如此。

这会构建手风琴：

/*
    #Builds the head of accordion which contains main stats
*/
function buildAccordionHead(player){
    //player has attributes: coef, ratio, pos, hasplayed, name, points
    //This is the panel that holds the player main information (coef,name,pos etc)
    var accordionHead = document.createElement("div");
    accordionHead.className = "panel-heading";
    accordionHead.dataset.parent = "#accordion";
    accordionHead.dataset.toggle = "collapse";
    accordionHead.setAttribute('href', "#id_"+player.pos);
    //This is the container for positioning items
    var container = document.createElement("div");
    container.className = "container-fluid";
    //Create playerrow (FN06)
    var upper_row = rowCreate("KOHT","","K","S","P",true);
    var playerRow = rowCreate(player.pos,player.name,player.coef,player.ratio,player.score,false);
    //Add row(s) to the children of container
    container.appendChild(upper_row);
    container.appendChild(playerRow);
    //Add container to the children of accordion head
    accordionHead.appendChild(container);
    return accordionHead;
}
/*
    Builds the body of the accordion which contains history 
*/

function buildAccordionBody(player,round){
    //moving inside out!
    //generates container-fluid element with a rows inside
    if (even){
        var containerfluid = historyRowEven(player);
    }
    else{
        var containerfluid = historyRowOdd(player,round);
    }
    var bodyel = document.createElement("div");
    bodyel.className = "panel-body";
    bodyel.appendChild(containerfluid);
    var collapser = document.createElement("div");
    collapser.id = "id_"+player.pos;
    collapser.className = "panel-collapse collapse";
    collapser.appendChild(bodyel);
    return collapser;
}

/*
    The main builder function!
*/
function buildAccordion(player,round){
    //This is outer panel
    var accordionPanel = document.createElement("div");
    accordionPanel.className = "panel panel-default akkordion";
    var accordionHeading = buildAccordionHead(player);
    var accordionBody = buildAccordionBody(player,round);
    //Add accordion head to the children of accordion-panel
    accordionPanel.appendChild(accordionHeading);
    accordionPanel.appendChild(accordionBody);
    accordionPanel.id = "collapser_id_"+player.pos;
    //Add accordion-panel to the children of div with accordion
    var mainElement = document.getElementById("accordion");
    mainElement.appendChild(accordionPanel);
}

获得自举手风琴的高度

0 个答案: