Save html table to pdf

jsPDF + canvas: экспорт в PDF многостраничной таблицы на русском языке

Генерация PDF… Эта тема не нова, однако порой можно столкнуться с некоторыми тонкостями, в итоге став на тернистый путь велосипедостроения. Сегодня я расскажу, как разрабатывал один такой велосипед.

Мне понадобилось сделать генерацию отчетов в PDF. По ряду причин я решил сделать это на стороне клиента. Беглый поиск предоставил мне выбор между jsPDF и pdfmake. Остановился на первом. А теперь подробнее…

Для начала хочу сказать, что хотя jsPDF и великолепная штука, документация этого проекта местами невменяемая,
что у человека психически неподготовленного вызывает желание ругаться нецензурным матом. Вспоминается документация Symfony: ее читаешь, а потом идешь гуглить с вопросом «а как?» (либо идешь в исходники).

Первый подводный камень, брошенный в мою сторону этой библиотекой, было отсутствие поддержки русского языка (и UTF-8 в целом, насколько мне удалось выяснить).

(pdfmake напротив — умеет работать с UTF-8, однако от использования этой библиотеки я вскоре отказался.)

После поиска и экспериментов решил использовать canvas для отрисовки. Однако здесь обнаружился второй подводный камень: canvas захватывает только текущий экран и моя огромная таблица сохранилась, как набор пустых листов ( а че, экономно).

Пришлось разбивать таблицу скриптом, заносить во временный контейнер, делать из него canvas и по новой. Вот, что получилось в итоге:

app.factory("PDF", function() < return < tableToPDF: function() < var pdf = new jsPDF('p', 'pt', 'a4'); var rows = $("table").find("tr"); var pdfContainer = $(".tmp-pdf-container"); var pdfInternals = pdf.internal; var pdfPageSize = pdfInternals.pageSize; var pdfPageWidth = pdfPageSize.width; var pdfPageHeight = pdfPageSize.height; var partialSize = 10; var contentSize = 0; var marginTop = 20; var index = 0; // создаю новую таблицу каждые partialSize строк var generatePartial = function() < var partial = ""; rows.each(function(i, row) < if (i >= index && i "; index++; if (index >= partialSize) < partialSize += 10; return false; >> >); return partial; > var processCanvases = function() < if (index >= rows.length) < pdfContainer.html(""); //pdf.output("datauri"); pdf.save("TEST.pdf"); return; >var partial = generatePartial(); // generate table with that rows var table = $(document.createElement("table")); table.append("" + partial + ""); // insert table to temporary div pdfContainer.html("" + table.html() + ""); // hide unnecessary columns pdfContainer.find(".non-printable").css("display", "none"); // generate canvas from that table html2canvas(pdfContainer, ).then(function(canvas) < // contentSize подбирал экспериментально // на формате а4 у меня умещается несколько partial, // поэтому жду, пока дойдет до конца страницы и только затем создаю новую if (contentSize < 2) < contentSize ++; pdf.addImage(canvas, "jpeg", 20, marginTop, pdfPageWidth-40, 0); // формулу и коэффициент подобрал экспериментально // у меня 0.01 работает, тут 0.05, пока не разобрался, как правильно это вычислить marginTop += canvas.height/ (canvas.width / pdfPageHeight + (pdfPageWidth / pdfPageHeight) - 0.05); >else < pdf.addImage(canvas, "jpeg", 20, marginTop, pdfPageWidth-40, 0); // эта проверка нужна, чтобы не создать лишнюю пустую страницу в конце if (index < rows.length) < pdf.addPage(); >contentSize = 0; marginTop = 0; > // next iteration processCanvases(); >); > processCanvases(); > > >); 

Отдельно хочу упомянуть формат PNG. Штука хорошая (насколько я знаю, он поддерживается старыми браузерами, в отличие от image/jpeg), но PDF утяжеляет в разы. Вдобавок на больших отчетах браузер гарантированно ляжет, конкретно у меня хром выбрасывал окно ошибки, а ФФ вообще укладывал себя и систему, поэтому спасала только кувалда.

Когда стал генерировать в JPEG, у меня получался афро черный фон. Оказалось, что прозрачность JPEG делает афро черным.

также, html2canvas, не умеет генерировать canvas из кода, поэтому нужно создавать какой-нибудь временный элемент. Плюс он не отрисовывает невидимые элементы. Где-то на stackoverflow советовали iframe, лично я добавил div с position:absolute и left:-9999, чтобы не мешал (правда, на планкере не получилось загнать за экран)

Также возникает сложность при нарезке таблицы: колонки разные. Я это вылечил, добавил следующий стиль:

Заключение: писать велосипеды — не всегда плохо. Нередко это помогает узнать что-то новое. Однако это не должно становиться привычкой, поэтому всегда нужно читать доки, хотя бы для того, чтобы слегка попсиховать.

Надеюсь, что эта статья кому-то поможет, а также надеюсь услышать ваши советы и идеи.

Источник

Convert HTML table to PDF

Do you find this tool useful? Then share it with your friends or colleagues. This will help us to make our free web tools better.

This form allows you convert HTML tables to PDF file, paste or upload your HTML file below:

Options

No line breaks in values (Use this to remove line breaks in field values)
Remove HTML tags in values (Use this to prevent seeing HTML tags in your output)
Replace multiple spaces with 1 space in values (Use this if you have too much space in your output)

Result of HTML conversion to PDF

About HTML conversion to PDF

About HTML tables conversion to PDF file

The HTML table to PDF Converter was created for online transform code of HTML tables into PDF(Portable Document Format). It’s very simple and easy way to transform and share HTML to PDF file.

How it Works?

Just paste or upload your HTML data to the textarea above and click to the button «Convert» and you will instantly get PDF preview.

Example of HTML conversion to PDF

   h1 
HTML example!
 
This is a paragraph.
 
 
 
id
 
firstName
 
lastName
 
age
 
 
 
1
 
Kim
 
Kardashian
 
39
 
 
2
 
Ariana
 
Grande
 
26
 
 
3
 
Cristiano
 
Ronaldo
 
35
 
 
  

Did you like this tool? You can donate to us. This will help us improve our free web tools.

Источник

How to Convert HTML Tables into Beautiful PDFs

Web apps that contain tables, charts, and graphs often include an option to export the data as a PDF. Have you ever wondered, as a user, what’s going on under the hood when you click that button?

And as a developer, how do you get the PDF output to look professional? Most free PDF exporters online essentially just convert the HTML content into a PDF without doing any extra formatting, which can make the data hard to read. What if you could also add things like page headers and footers, page numbers, or repeating table column headers? Small touches like these can go a long way toward turning an amateur-looking document into an elegant one.

Recently, I explored several solutions for generating PDFs and built this demo app to showcase the results. All of the code is also available here on Github. Let’s get started!

Overview of the Demo App

Our demo app contains a lengthy styled table and four buttons to export the table as a PDF. The app is built with basic HTML, CSS and vanilla JavaScript, but you could easily create the same output using your UI framework or library of choice.

Each export button generates the PDF using a different approach. Viewing from right to left, the first uses the native browser print functionality. The second uses an open-source library called jsPDF. The third uses another open-source library called pdfmake. And finally, the fourth uses a paid service called DocRaptor.

Let’s dig into each solution one by one.

Native Browser Print Functionality

First off, let’s consider exporting the PDF using the browser’s built-in tools. When viewing any web page, you can easily print the page by right-clicking anywhere and then choosing the Print option from the menu. This opens a dialog for you to choose your print settings. But, you don’t actually have to print the document. The dialog also gives you the option to save the document as a PDF, which is what we’ll do. In JavaScript, the window object exposes a print method, so we can write a simple…

Источник

Конвертировать HTML Таблица в PDF Таблица

Подготовьте код HTML Таблица для преобразования в PDF Таблица. Мы не будем хранить какие-либо ваши данные.

Excel подобный редактору или Builder позволяет легко отредактировать данные HTML Таблица предыдущих данных.

Delete blank rows or columns

Как Конвертировать HTML Таблица в PDF Таблица онлайн?

1. Загрузить или вставить свой HTML Таблица

Просто вставьте (скопируйте исходный код HTML из браузера) или перетащите файл HTML в TextArea of Источник данных, и он немедленно выполнит магию преобразования. Конвертер Table HTML автоматически ищет таблицы из исходного кода HTML, который вы предоставляете.

2. Отредактируйте свой HTML Таблица онлайн, если это необходимо

Вы можете редактировать свои данные онлайн, например, Excel через Редактор таблицы, а изменения будут преобразованы в PDF Таблица в режиме реального времени.

3. Скопируйте преобразованный PDF Таблица

Конвертер PDF по умолчанию сделает красивый стол, давайте скачаем его и посмотреть.

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

Что такое HTML?

.htm

HTML Подписчики для гипертекстового языка разметки. HTML — код, который используется для структурирования веб-страницы и его содержимого, абзацев, списка, изображений и таблиц и т. Д.

Что такое PDF?

.pdf

PDF Стенды для портативного формата документа. PDF — это формат кроссплатформенного файла, разработанный Adobe, и это открытый формат файла, используемый для обмена электронными документами.

Источник

Convert HTML Table to PDF using JavaScript without a Plug-in

Plug-ins are useful. No doubt, a Plug-in can offer easy to use features that will help customize your apps. You can find many plug-in that would convert your HTML table to a PDF document. However, here I’ll show you how it can be done without a plug-in, that is, convert an entire HTML table to a PDF document, along with table style, using plain JavaScript.

You can use JavaScript window object to accomplish this task. It is very simple. Let’s see the example.

<html> <head> <title>Convert Table to PDF using JavaScript</title> <style> table < width: 300px; >table, th, td < border: solid 1px #DDD; border-collapse: collapse; padding: 2px 3px; text-align: center; ></style> </head> <body> <div > <table> <tr> <th>Name</th> <th>Age</th> <th>Job</th> </tr> <tr> <td>Brian</td> <td>41</td> <td>Blogger</td> </tr> <tr> <td>Matt</td> <td>25</td> <td>Programmer</td> </tr> <tr> <td>Arun</td> <td>39</td> <td>Writter</td> </tr> </table> </div> <p> <input type="button" value="Create PDF" onclick="createPDF()" /> </p> </body> <script> function createPDF() < var sTable = document.getElementById('tab').innerHTML; var style ; style = style + "table "; style = style + "table, th, td "; style = style + "</style>"; // CREATE A WINDOW OBJECT. var win = window.open('', '', 'height=700,width=700'); win.document.write('<html><head>'); win.document.write('<title>Profile</title>'); // <title> FOR PDF HEADER. win.document.write(style); // ADD STYLE INSIDE THE HEAD TAG. win.document.write('</head>'); win.document.write('<body>'); win.document.write(sTable); // THE TABLE CONTENTS INSIDE THE BODY TAG. win.document.write('</body></html>'); win.document.close(); // CLOSE THE CURRENT WINDOW. win.print(); // PRINT THE CONTENTS. > </script> </html>

All mordern browsers support the window object. Now, this is good. I am expecting the above methods to work flawlessly in any browser.

First, I am extracting the contents from the HTML table. I have defined the style; it’s the same as the CSS style in the markup section.

💡 Do you know: you can easily print a PDF document directly from your web page using JavaScript? Here’s the method.

Next, I am creating a window’s object. The open() method will open a new window. I am creating a HTML page in the new window and adding the style and table contents to the window. Once the page is created, I’ll close the window and print the contents of the window as it is.

Save the file as PDF . That’s it.

Источник