Использование insertBefore и insertAfter с html2canvas - PullRequest
Новая
       17

Использование insertBefore и insertAfter с html2canvas

0 голосов
/ 05 сентября 2018

Я экспортирую в файл диаграмму и хочу добавить к изображению верхний и нижний колонтитулы, оба из которых содержат некоторый текст.

Функция заголовка: 

putHeader(element) {
    const targetElement = element.querySelector(".my-css-class");
    $(`<div class="...">${this.headerValue}`</div>).insertBefore(targetElement);

    element.querySelectorAll('...').forEach(el => {
            el.style.display = "none";
        });
}

этот работает нормально.

Если я добавлю функцию нижнего колонтитула, как показано ниже, она добавит нижний колонтитул под заголовком, но над графиком. Если я изменю insertBefore() на insertAfter(), текст нижнего колонтитула вообще не будет отображаться. 

putFooter(element) {
    const targetElement = element.querySelector(".my-css-class");
    $(`<div class="...">${this.footerValue}`</div>).insertBefore(targetElement);

    element.querySelectorAll('...').forEach(el => {
            el.style.display = "none";
        });
}

Функция html2canvas: 

html2canvas(element, {
    scale: ...,
    width: ...,
    height: ...,
    ...
    onclone: (element) => {
        this.addHeader(element);            
        element.querySelector('...').style.height = "700px";
        element.querySelector('...').style.width = "1300px";
        this.addFooter(element);
    },
    }
    ).then(function(canvas) {
    ...
}

Я пытался поместить this.addFooter(element) в разные места внутри onclone(), но результат тот же.

Есть предложения?

...