Используйте html2canvas с jsPDF, чтобы сохранить страницу в формате PDF.

Я хочу создать PDF из содержимого div. Я использую jsPDF. Проблема в том, что ни один из моих стилей не передается, поэтому PDF выглядит не так. Затем я наткнулся на статью, в которой использует html2canvas, чтобы сделать скриншот страницы.

Когда я пробую приведенный пример, он дает мне эту ошибку:

uncaught exception: Invalid orientation: [object object] <unknown>

Как решить эту проблему?

Вот JS, который я использую:

(function(){
var content = $('#content'),
    cache_width = content.width(),
    a4  =[ 595.28,  841.89];  // for a4 size paper width and height

$('#pdf').on('click',function(){
    $('body').scrollTop(0);
    createPDF();
});
//create pdf
function createPDF(){
    getCanvas().then(function(canvas){
        var 
        img = canvas.toDataURL("image/png"),
        doc = new jsPDF({
          unit:'px', 
          format:'a4'
        });     
        doc.addImage(img, 'JPEG', 20, 20);
        doc.save("{{this.['Student Last Name']}}-{{this.['Student Name']}}-umpire-incident-report.pdf");
        content.width(cache_width);
    });
}

// create canvas object
function getCanvas(){
    content.width((a4[0]*1.33333) -80).css('max-width','none');
    return html2canvas(content,{
        imageTimeout:2000,
        removeContainer:true
    }); 
}

}());

javascript jspdf html2canvas
person L84    schedule 01.01.2016    source источник
comment
@Kaiido - даже если я определю ориентацию, это не решит проблему.   -  person L84    schedule 01.01.2016
comment
не может воспроизвести: jsfiddle.net/qzLwh2bb   -  person Kaiido    schedule 01.01.2016
comment
@Kaiido - это что-то в моем CSS. Я удаляю таблицу стилей, и она работает. Добавьте его обратно, он ломается.   -  person L84    schedule 01.01.2016
comment
некоторые css не были реализованы в html2canvas, не могли бы вы проверить ширину/высоту холста перед использованием метода addImage()? Также может помочь живой пример.   -  person Kaiido    schedule 01.01.2016
comment
@Kaiido - Нашел проблему. Смотрите мой ответ на то, что происходит. Спасибо за помощь!   -  person L84    schedule 01.01.2016
comment
если вы хотите сохранить эти градиенты, вы можете сделать их сплошным фоновым изображением с холстом перед вызовом html2canvas. Тем не менее странно, что выдает ошибку.   -  person Kaiido    schedule 01.01.2016
comment
@Kaiido - Спасибо за совет. Для этих градиентов это не имеет большого значения, поэтому я просто переключаю их обратно на сплошной цвет.   -  person L84    schedule 01.01.2016
comment
Ps, по-прежнему не могу воспроизвести на самом деле: jsfiddle.net/qzLwh2bb/1   -  person Kaiido    schedule 01.01.2016
comment
@Kaiido - это увлекательно и очень любопытно, почему у меня это ломается, а не на скрипке.   -  person L84    schedule 01.01.2016

Ответы (1)


arrow_upward
0
arrow_downward

Как я уже сказал в комментарии, удаление моего CSS решает проблему. Как отметил @Kaiido, html2canvas не реализовал некоторые CSS.

У меня есть следующий CSS в моей таблице стилей:

hr{
    border: 0;
    height: 1px;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(50%,rgba(0,0,0,0.75)), color-stop(100%,rgba(0,0,0,0)));
    background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 50%,rgba(0,0,0,0) 100%);
    background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 50%,rgba(0,0,0,0) 100%);
    margin:1rem 0;
    padding:0 !important;
}

Когда я удаляю градиенты, все работает отлично. Вместо того, чтобы удалять этот код из моего CSS, я могу просто переопределить его, используя встроенные стили, и он отлично работает!

person L84    schedule 01.01.2016