Как сохранить в pdf файле картинки и кириллический текст с html страницы?

Question

[ligisayan]

Преобразую html страницу в pdf с помощью javascript на клиентской части. Делаю это используя библиотеки jspdf и html2canvas согласно инструкции из видео

Но, к сожалению, такой способ не сохранятеткартинки (canvas) Вот мой демо-пример

function getPDF() {
    doCanvas();

    $(document).bind('function_a_complete', doPDF);
}

function doCanvas() {
    html2canvas(document.querySelector("#myDiv")).then(canvas => {
        document.querySelector("#newDiv").appendChild(canvas);
    });
    $(document).trigger('function_a_complete');
}
function doPDF() {

    console.log("do pdf");
    var doc = new jsPDF();
    doc.fromHTML($('#newDiv').html(), 20, 20, {'width':500});
    doc.text(50,50, "Новый текст");
    doc.save('test.pdf');
}

При первом клике на кнопку скачать PDF (вверху) рендерится картинка, при втором - скачивается инфа со страницы, но, как видим в скачаном файле, сохраняется только текстовая информация, причем киррилические буквы прописываются кракозябпами.

Как это можно поправить? Ну и конечно же в идеале сделать так, чтобы с первого клика скачивалась страничка.

Comments

[Stalker_RED]

Что плохого в этой записи?

[ligisayan]

Stalker_RED, в том, что все это не работает в итоге, наверное

[Stalker_RED]

ligisayan, значит у вас где-то ошибка.

[ligisayan]

Stalker_RED, неужели вы думаете, что ваш ответ несет хоть какую-то смысловую нагрузку..

[Moskus]

ligisayan, то, что у вас должно получиться, можно назвать PDF только условно - это картинка-скриншот внутри контейнера PDF.

[Stalker_RED]

ligisayan, я думаю, что без навыков телепатической отладки более конкретно вам никто не ответит.
Или вы всерьез предлагаете собрать тестовый стенд за вас?

[ligisayan]

Moskus и Stalker_RED, добавил 2 тестовых стенда

[Moskus]

ligisayan, в стендах не подключены библиотеки. И даже если бы они были подключены - совершенно непонятно, чем вообще предполагается создавать объект PDF из объекта картинки. (А главное - зачем, если вы можете пользователю саму картинку отдать, смысла помещать в ее в контейнер PDF нет.)

[ligisayan]

Moskus, как не подключены? а что же тогда справа висит в ресурсах?
так вот я сам не понимаю чем создавать объект pdf
в старой версии использовался метод onrendered, но он почему-то у меня не работает, как скрипт полностью с видео, где показано, что работает (но, не извесна версия библиотек)

onrendered: function (canvas) {
              var img = canvas.toDataURL("image/png");
              var doc = new jsPDF({scale: 1});
              doc.addImage(img, 'JPEG', 20,20);
              doc.save('test.pdf');
           }

а в новой библиотеке сейчас onrendered depricated как я узнал и предлагается заменить на такую конструкцию

html2canvas(document.querySelector("#myDiv")).then(canvas => {
    document.body.appendChild(canvas);
    saveImage();     //or whatever you want to execute
});

вот с помощью ее у меня получается сделать слепок, помещаю его в div,а дальше не могу понять как передать в jsPDF..

[Moskus]

ligisayan, судя по всему, вы не понимаете, что у вас должно быть подключено что-то еще, вроде https://github.com/MrRio/jsPDF

[ligisayan]

так подключено же или мы с вами о разном говорим?