WedX - журнал о программировании и компьютерных науках

jsPDF addHTML получить полное содержимое элемента прокрутки

Как заставить jsPDF создать изображение/pdf из элемента, для которого установлено переполнение, чтобы у него были полосы прокрутки. Следующий пример вставлен на страницу addHTML Have a Play (https://mrrio.github.io/jsPDF/) будет генерировать PDF-файл только для отображаемого раздела div, даже если я выберу «средний» div:

var outer = document.createElement('div');
outer.style.height = "100px";
outer.style.overflow = "scroll";

var middle = document.createElement('div');

for ( var i=0; i<35;i++ ) {
    var inner = document.createElement('div');
    inner.style.border = "thick solid #0000ff";
    inner.style.padding = "10px";

    middle.appendChild(inner);
}

outer.appendChild(middle);
document.body.appendChild(outer);

var pdf = new jsPDF('p','pt','a4');

pdf.addHTML(outer,function() {
    var string = pdf.output('datauristring');
    $('.preview-pane').attr('src', string);
});

(По сути, это создание div с полосой прокрутки, добавление div внутри, затем добавление целой группы div внутри среднего. Их достаточно, чтобы прокручивать экран, поэтому pdf их не подбирает. Я подумал о выскакивает новое окно, но если я это сделаю, мне придется выяснить все различные таблицы стилей, чтобы вытащить их во всплывающее окно.)

javascript jspdf
02.12.2015

Ответы:


1

Взгляните на это обсуждение: https://github.com/MrRio/jsPDF/issues/270< /а>:

Я использую метод addHtml() с html2canvas.js для создания pdf, но для большой таблицы данных он не создает pdf, для короткого контента все в порядке. Пожалуйста, помогите мне, вот мой код

На что Фламенко отвечает:

Я начал работать над возможностью разбивать длинные HTML-страницы.

Попробуйте это: https://rawgit.com/Flamenco/jsPDF/text-html-table-page-break/examples/html2pdf/test-long-html-table.html

Пример кода создает длинную таблицу и создает PDF-файл с ней. Возможно, его установка вам пригодится.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Long Table</title>
    </head>

<script src='../../libs/require/require.js'></script>
<script>
require_baseUrl_override = '../../';
require(['../../libs/require/config'], function(){
require(['jspdf.plugin.canvas', 'libs/html2pdf', 'libs/html2canvas/dist/html2canvas', 'libs/saveas'], function(){

var pdf = new jsPDF('p', 'pt', 'a3');

// Enable auto page wrap (there are still margin-top issues...)
pdf.context2d.pageWrapY = pdf.internal.pageSize.height-20;

// create a long table
var table = document.createElement('table');
for (var i=1; i<1000; i++){
    var tr=document.createElement('tr');
    var td=document.createElement('td');
    td.innerHTML = "Item " + i;
    tr.appendChild(td);
    table.appendChild(tr);
}
document.body.appendChild(table);

// render body to pdf
html2pdf(document.body, pdf, function(){
    pdf.save('Test.pdf');

});

}); // require
}); // require
</script>

    <body>
    </body>
</html>

Код немного корявый, но работает.

22.03.2016
Новые материалы
Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..
Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..
Объяснение документов 02: BERT
BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
Как проанализировать работу вашего классификатора?
Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
Работа с цепями Маркова, часть 4 (Машинное обучение)
Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..
Для любых предложений по сайту: [email protected]