Можно ли создавать PDF с помощью jQuery?

Question

Я использую функциональность Ajax для извлечения своего контента, и мне нужно экспортировать PDF в случае успеха jQuery.ajax(), Как я могу это сделать?

Answer 1

jQuery не может (потому что JavaScript не может) создать PDF из данных, нет... он может получить его с вашего сервера (как и любой другой запрос), но он не может его сгенерировать. В JavaScript просто нет механизма (хотя в настоящее время реализуются некоторые опции HTML5) для создания / сохранения файла, который работает в кросс-браузерном режиме, особенно двоичного файла.

Answer 2

Я думаю, что вы можете использовать этот плагин

http://parall.ax/products/jspdf

Answer 3

Если это вообще возможно, серверная сторона - лучший выбор для создания PDF-файлов. Вероятно, это будет быстрее для большинства пользователей, и возврат файла по стандартному HTTP-запросу намного более надежен, чем текущие параметры на стороне клиента.

Тем не менее, эта библиотека будет генерировать PDF на стороне клиента: http://snapshotmedia.co.uk/blog/jspdf

В браузерах, которые поддерживают URI данных, он может возвращать PDF напрямую. В других браузерах вы можете соединить его с компонентом Flash под названием Downloadify, чтобы выполнить то же самое.

Answer 4

Если вы извлекаете данные PDF со своего сервера при успешном выполнении AJAX и вам необходимо вывести их пользователю для загрузки, это может быть достигнуто с помощью небольшого количества кодировки base64. Если я правильно понимаю, у вас, скорее всего, есть сценарий, когда ваш сервер, возможно, возвращает PDF или другой тип данных в случае успеха (например, XML). В этом случае у вас есть два шага для обработки запроса:

1) Определите тип контента через его заголовок. Вот пример разделения вашего обработчика на основе ответа:

$.ajax({

  type: "POST", url: "/test", data: someData, success: function(response, status, xhr){ 
    var ct = xhr.getResponseHeader("content-type") || ""; 
    if (ct.indexOf(‘xml’) > -1) {
      // handle xml here
    }
    if (ct.indexOf(‘pdf’) > -1) {
      // handle pdf here
    }    
  } 
});

2) Получив содержимое PDF, вы можете перенаправить браузер для отображения PDF, используя прием данных base64. Сначала закодируйте содержимое данных в base64. Есть несколько библиотек, которые помогут вам сделать это в Javascript. Затем верните свой контент через document.location.href:

document.location.href = 'data:application/pdf;base64,' + base64PDFData;

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

РЕДАКТИРОВАТЬ:

Следует отметить, что данные URI, к сожалению, не будут работать в IE из-за ограничений безопасности.

Answer 5

Добавьте это к вашему сценарию:

<script src="https://docraptor.com/docraptor-1.0.0.js"></script>

DocRaptor.createAndDownloadDoc("YOUR_API_KEY_HERE", {
    test: false, // test documents are free, but watermarked
    type: "pdf",
    name: planStatus+"_" +assessmentYear+"_"+employeeId+ ".pdf",
    document_content: document.querySelector('#MyDoc').innerHTML, // use this page's HTML
    // document_content: "<h1>Hello world!</h1>",               // or supply HTML directly
    // document_url: "http://example.com/your-page",            // or use a URL
    // javascript: true,                                        // enable JavaScript processing
    // prince_options: {
    //   media: "screen",                                       // use screen styles instead of print styles
    // }
})

Answer 6

Если HTML, с которым вы работаете, является таблицей, вы можете использовать плагин jquery.dataTables с TableTools для генерации PDF. Он использует Flash за кулисами и строго ограничен в форматировании, но он генерирует PDF.

http://datatables.net/extras/tabletools/

Answer 7

Используя приведенный ниже код, мы можем сгенерировать PDF в jquery.

      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script type="text/javascript">
    $("body").on("click", "#btnExport", function () {

        html2canvas($('[id*=table2]')[0], {
            onrendered: function (canvas) {
                var data = canvas.toDataURL();
                var docDefinition = {
                    content: [{
                        image: data,
                        width: 520,
                       
                    }]
                };
                pdfMake.createPdf(docDefinition).download("Paper.pdf");
            }
        });

        function1 () 

            html2canvas($('[id*=tab1]')[0], {
                onrendered: function (canvas) {
                    var data = canvas.toDataURL();
                    var docDefinition = {
                        content: [{
                            image: data,
                            width: 520,

                        }]
                    };
                    pdfMake.createPdf(docDefinition).download("Paper.pdf");
                }
            });
    });
</script>