Использование html2canvas с jsPDF для сохранения PDF-файла страницы

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

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

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 
    }); 
} 

}());

источник

2016-01-01 L84

@ Кайдо - Даже если я определяю ориентацию, это не решает проблему. – L84

не может воспроизвести: http://jsfiddle.net/qzLwh2bb/ – Kaiido

@Kaiido - Это что-то в моем CSS. Я удаляю таблицу стилей, и она работает. Добавьте его назад, он ломается. – L84

Как я уже сказал в комментарии, удаляя мой 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, я могу просто переопределить использование встроенных стилей, и он отлично работает!

источник

2016-01-01 05:01:22 L84

Использование html2canvas с jsPDF для сохранения PDF-файла страницы

ответ

Смежные вопросы