Как правильно использовать библиотеку jsPDF

87

Я хочу преобразовать некоторые из моих div в PDF, и я пробовал библиотеку jsPDF, но безуспешно. Кажется, я не понимаю, что мне нужно импортировать, чтобы библиотека работала. Я просмотрел примеры и до сих пор не могу понять. Я пробовал следующее:

<script type="text/javascript" src="js/jspdf.min.js"></script>

После jQuery и:

$("#html2pdf").on('click', function(){
    var doc = new jsPDF();
    doc.fromHTML($('body').get(0), 15, 15, {
        'width': 170
    });
    console.log(doc);
});

в целях тестирования, но я получаю:

"Cannot read property '#smdadminbar' of undefined"

где #smdadminbarпервый div из тела.

Даниэла Костина Вадува
источник
тот, который работал у меня github.com/devrajatverma/jsPdfExample
Rajat
1
Примечание для всех, кто пытается понять fromHTMLили почему это не задокументировано в документации jsPDF: « Мы закрываем эту проблему, потому что мы больше не будем поддерживать fromHTML и addHTML. » ( Из выпуска № 516 )
toraritte

Ответы:

137

вы можете использовать pdf из html следующим образом:

Шаг 1. Добавьте в заголовок следующий скрипт

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>

или скачать локально

Шаг 2. Добавьте HTML-скрипт для выполнения кода jsPDF.

Настройте это так, чтобы передать идентификатор, или просто измените #content на нужный вам идентификатор.

 <script>
    function demoFromHTML() {
        var pdf = new jsPDF('p', 'pt', 'letter');
        // source can be HTML-formatted string, or a reference
        // to an actual DOM element from which the text will be scraped.
        source = $('#content')[0];

        // we support special element handlers. Register them with jQuery-style 
        // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
        // There is no support for any other type of selectors 
        // (class, of compound) at this time.
        specialElementHandlers = {
            // element with id of "bypass" - jQuery style selector
            '#bypassme': function (element, renderer) {
                // true = "handled elsewhere, bypass text extraction"
                return true
            }
        };
        margins = {
            top: 80,
            bottom: 60,
            left: 40,
            width: 522
        };
        // all coords and widths are in jsPDF instance's declared units
        // 'inches' in this case
        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) {
                // dispose: object with X, Y of the last line add to the PDF 
                //          this allow the insertion of new lines after html
                pdf.save('Test.pdf');
            }, margins
        );
    }
</script>

Шаг 3. Добавьте содержимое своего тела

<a href="javascript:demoFromHTML()" class="button">Run Code</a>
<div id="content">
    <h1>  
        We support special element handlers. Register them with jQuery-style.
    </h1>
</div>

Обратитесь к оригинальному руководству

Увидеть рабочую скрипку

Доброжелатель
источник
4
Спасибо за публикацию, но я попробовал точный код выше (локально), и он генерирует пустой документ pdf. Он вообще не работает с jquery 1.11.0, поэтому я использовал ту же версию jquery, что и на github.com/MrRio/jsPDF/blob/master/examples/js/jquery/…
user1063287
1
Да, это действительно хорошо ,,, Но вывод JSPdf перекрывается с другими элементами моих элементов таблицы, как я могу это решить? .... Я изменил размер шрифтов и сделал его в ландшафтном режиме, я попробовал большинство модификаций, но ничего не работает
Судхир Белагали
1
Мне удалось заставить этот пример работать только с помощью CDN CloudFlare: <script src = " cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/… > или <script src =" cdnjs.cloudflare.com /ajax/libs/jspdf/1.2.61/… > Но я согласен, документация и общие варианты исходного кода усложняют использование этого плагина. Даже эти CDN (которые использует JSfiddle) отличаются от ссылки «загрузить локально» @Well wisher ссылки выше.
Скотт
1
@Scott, они удалили ссылку
Wisher
1
как мне заставить это печатать мои стили CSS?
Mwas
17

Вам нужна только эта ссылка jspdf.min.js

В нем есть все.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
user890332
источник
2
Спасибо, это сводило меня с ума! Использование отладочной версии jspdf работало, тогда как другие версии в любой конфигурации не работали. Может минификация как-то ломает? или я делаю не так.
jookyone
Это мне действительно помогло. Я использовал исходный файл jspdf.js, но он не работал. Использование jspdf.debug.js сделало свою работу.
Франсиско Кинтеро,
Интересно, почему производственная версия не работает ... Я включил все плагины в html-страницу, но помогла только эта отладочная версия.
ilter
Привет, я пробовал это, но получаю ошибку Error in function FileSaver@http://mrrio.github.io/jsPDF/dist/jspdf.debug.js:5875:18: get_URL(...).createObjectURL is not a function, то же самое, если я использую версию bower. Есть подсказка?
dbr 06
1
@omegastripes Похоже, они обновили исходный код; https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js
Ахмет Гокдайи
9

Это, наконец, то, что сделало это для меня (и вызывает диспозицию):

function onClick() {
  var pdf = new jsPDF('p', 'pt', 'letter');
  pdf.canvas.height = 72 * 11;
  pdf.canvas.width = 72 * 8.5;

  pdf.fromHTML(document.body);

  pdf.save('test.pdf');
};

var element = document.getElementById("clickbind");
element.addEventListener("click", onClick);
<h1>Dsdas</h1>

<a id="clickbind" href="#">Click</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>

А для тех, кто склонен к KnockoutJS, небольшая привязка:

ko.bindingHandlers.generatePDF = {
    init: function(element) {

        function onClick() {
            var pdf = new jsPDF('p', 'pt', 'letter');
            pdf.canvas.height = 72 * 11;
            pdf.canvas.width = 72 * 8.5;

            pdf.fromHTML(document.body);

            pdf.save('test.pdf');                    
        };

        element.addEventListener("click", onClick);
    }
};
сутенер
источник
Есть ли что-то еще в этом фрагменте? Когда я пытаюсь запустить это, я получаю сообщение об ошибке, указывающее, что «pdf.canvas» не определен. «Uncaught TypeError: Невозможно установить для свойства 'height' значение undefined»
Райан Гиббс
Не уверен, что вы имеете в виду? Фрагмент выполняется с использованием того же кода. Так что, возможно, что-то не так в вашей реализации. Можете ли вы console.log (pdf) и поделиться выводом.
pim
Должно быть, это была проблема с кешированием или что-то в этом роде, когда я только что попытался это сделать с помощью console.log () там, код выполнился правильно. У меня все еще возникает проблема с пустой страницей, но это другая история. Благодарю.
Райан Гиббс
также у меня есть ошибка «Не могу прочитать свойство addEventListener»
Манджита Тешара
Мне нравится эта библиотека jsPDF (). Кстати, если кто-то еще найдет это полезным, я только что выяснил синтаксис для присоединения обратного вызова для запуска после создания PDF-файла:pdf.save("myfile.pdf", function(){ alert("pdf generation/save finished!"); });
Кристофер Д. Эмерсон
5

Согласно последней версии (1.5.3) fromHTML()метода больше нет. Вместо этого вы должны использовать плагин jsPDF HTML, см. Https://rawgit.com/MrRio/jsPDF/master/docs/module-html.html#~html

Вам также необходимо добавить библиотеку html2canvas, чтобы она работала правильно: https://github.com/niklasvh/html2canvas

JS (из документации API):

var doc = new jsPDF();   

doc.html(document.body, {
   callback: function (doc) {
     doc.save();
   }
});

Вы также можете предоставить строку HTML вместо ссылки на элемент DOM.

Виталий Чмовж
источник
Кажется, тоже больше не работает - исключение jQuery.Deferred: doc.html не является функцией TypeError: doc.html не является функцией
DropHit
3

Разве вы не должны также использовать библиотеку jspdf.plugin.from_html.js? Помимо основной библиотеки (jspdf.js), вы должны использовать другие библиотеки для «специальных операций» (например, jspdf.plugin.addimage.js для использования изображений). Проверьте https://github.com/MrRio/jsPDF .

Педро Алмейда
источник
3
Кажется, что jspdf.source.js включает в себя все другие библиотеки.
whossname
3

Во-первых, вам нужно создать обработчик.

var specialElementHandlers = {
    '#editor': function(element, renderer){
        return true;
    }
};

затем напишите этот код в событии щелчка:

doc.fromHTML($('body').get(0), 15, 15, {
    'width': 170, 
    'elementHandlers': specialElementHandlers
        });

var pdfOutput = doc.output();
            console.log(">>>"+pdfOutput );

предполагая, что вы уже объявили переменную документа. И затем вы сохранили этот PDF-файл с помощью File-Plugin.

Акшай Тяги
источник
1

как насчет vuejs, как это применимо?

function onClick() {
  var pdf = new jsPDF('p', 'pt', 'letter');
  pdf.canvas.height = 72 * 11;
  pdf.canvas.width = 72 * 8.5;

  pdf.fromHTML(document.body);

  pdf.save('test.pdf');
};

var element = document.getElementById("clickbind");
element.addEventListener("click", onClick);
<h1>Dsdas</h1>

<a id="clickbind" href="#">Click</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>

Antwnina
источник
Спасибо, что разместили пример использования jdpsf на vuejs
Шейн Джи