Как сохранить форматирование и абзацы при использовании jsPDF?

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

Во-первых, я не могу, на всю жизнь, заставить таблицу иметь полную ширину в загружаемом PDF-файле. Я прочитал десятки сообщений о jsPDF, и ничто не помогло решить проблему!

Во-вторых, информация в каждой ячейке находится в 3 разных тегах p и, следовательно, должна быть в трех разных строках, но при этом строки смешиваются.

В-третьих, я хотел бы, чтобы ячейки оставались выровненными по центру текста.

jsFiddle ниже показывает, насколько я продвинулся, но эти последние три элемента действительно начинают меня беспокоить, и я безуспешно исследовал это...

http://jsfiddle.net/xzZ7n/695/

function demoFromHTML() {
var pdf = new jsPDF('p', 'pt', 'letter');
source = $('#editor')[0];

specialElementHandlers = {
    // element with id of "bypass" - jQuery style selector
    '#bypassme': function (element, renderer) {
        // true = "handled elsewhere, bypass text extraction"
        return true
    }
};
margins = {
    top: 30,
    bottom: 30,
    left: 40,
    width: '100%'
};

pdf.fromHTML(
source, // HTML string or DOM elem ref.
margins.left, // x coord
margins.top, { // y coord
    'width': margins.width, // max width of content on PDF
    'elementHandlers': specialElementHandlers
},

function (dispose) {

    pdf.save('Test.pdf');
}, margins);
}

pdf html jquery jspdf pdf-generation
person Tom Nolan    schedule 06.09.2014    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Включите html2canvas, а затем используйте pdf.addHTML() вместо pdf.fromHTML(). Это прекрасно работает. Я использовал его, и он сохранил все мои стили со страницы.

Вот мой код:

 var pdf = new jsPDF('p', 'pt', 'letter');
 pdf.addHTML($('#NameOfTheElementYouWantToConvertToPdf')[0], function () {
     pdf.save('Test.pdf');
 });
person adam0101    schedule 08.09.2014
comment
Я добавил его на сервер, но теперь, когда он отображает PDF, он полностью черный. Есть ли способ, которым вы могли бы объяснить этот метод немного больше? - person Tom Nolan; 09.09.2014
comment
Убедитесь, что вы установили цвет фона на белый. - person adam0101; 09.09.2014
comment
Я не знаю, что ты имеешь в виду. Я просматриваю документацию html2canvas и ничего не могу найти - person Tom Nolan; 09.09.2014
comment
Когда я использовал его, я обнаружил, что Bootstrap, CSS-фреймворк, которым я пользуюсь, имеет черный цвет фона и что мне нужно установить белый цвет фона некоторых HTML-тегов. Я надеюсь, что это относится и к вам, потому что иначе я не знаю, что может быть причиной этого. Я обновил свой ответ, включив в него код, который я использую. Ничего особенного я там не делаю. - person adam0101; 09.09.2014
comment
На самом деле это не Bootstrap, который вызывает черный фон. По-видимому, PDF по умолчанию имеет черный фон. Вам нужно явно установить белый фон. По крайней мере, в моем случае. - person Lane Goolsby; 28.04.2015
comment
Убедитесь, что стиль цвета фона раздела установлен на желаемый цвет, чтобы избежать черного фона! - person Richard Nalezynski; 11.11.2016
comment
Он делает только снимок экрана текущего экрана. Он не занимает всю страницу, если на странице присутствует скроллер. - person Ankita; 09.06.2017
comment
@Anky, это полоса прокрутки на элементе, который вы пытаетесь преобразовать в PDF? Если это так, мне интересно, будет ли иметь значение ссылка на элемент внутри контейнера прокрутки. - person adam0101; 09.06.2017
comment
@adam0101 adam0101 на моей странице нет полосы прокрутки, так как я использую модальный из angular 2. - person Ankita; 12.06.2017