Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Ольга Смолянкина - Printing of client side generated content

414 views

Published on

Генерация PDF на стороне клиента. Сравнение библиотек для генерации на стороне сервера и на стороне клиента. Выгрузка отчетности в сфере интернет-магазинов: годовая отчетность, печать флаеров - многие другие примеры использования. Клиентские библиотеки позволяют разгрузить сервер.

Подписывайтесь на нас!

VK: https://vk.com/drupalsib
FB: https://facebook.com/groups/drupalsib
Twitter:
https://twitter.com/SibDrupalCamp
https://twitter.com/DrupalSib
Instagram: https://instagram.com/drupalsib

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Ольга Смолянкина - Printing of client side generated content

  1. 1. Printing of client-side generated content. Ольга Смолянкина - ADCI solutions - Омск
  2. 2. Print not Share this...
  3. 3. Usual methods
  4. 4. Drupal solution
  5. 5. Server-side solution PHP class ● dompdf ● mPDF ● TCPDF ● wk<html>topdf
  6. 6. Server-side solution dompdf https://github.com/ dompdf/dompdf ● open source ● HTML 4 ● HTML 5 (DOMPDF_ENABLE_HTML5PARSER) ● CSS 2.1 ● CSS 3 ● images ● UTF-8 basics mPDF, TCPDF http://www.mpdf1.com http://www.tcpdf.org/ ● open source ● HTML 4 ● HTML 5 ● CSS 2.1 ● CSS 3 ● images ● UTF-8 wk<html>topdf http://wkhtmltopdf.org/ ● command line tool ● QT Webkit rendering engine ● wk<html>toimage
  7. 7. Client-side solution
  8. 8. Client-side solution
  9. 9. Client-side solution Libraries ● jsPDF ● mPDF ● PDFMake
  10. 10. https://github.com/MrRio/jsPDF <script type="text/javascript" src="jquery/jquery-1.7.1.min.js" ></script> <script type="text/javascript" src="jspdf.js" ></script> <script type="text/javascript" src="jspdf.plugin.standard_fonts_metrics.js" ></script> <script type="text/javascript" src="jspdf.plugin.split_text_to_size.js" ></script> <script type="text/javascript" src="jspdf.plugin.from_html.js" ></script> <script> function demoFromHTML() { var doc = new jsPDF(); var specialElementHandlers = { '#bypassme' : function (element, renderer) { return true; } }; doc.fromHTML( $( '#content' ).get(0), // HTML string or DOM elem ref. 0.5 , // x coord 0.5, // y coord { 'width' : 7.5, // max width of content on PDF 'elementHandlers' : specialElementHandlers } ); doc.output( 'dataurl' ); } </script> 1. 2. jsPDF
  11. 11. <a href="javascript:demoFromHTML()" class="button">Run Code</a> <div id="content"> [content here] </div> 3. ● HTML 5 ● CSS 3 ● UTF-8 basics jsPDF
  12. 12. http://www.mpdf1.com include('mpdf.php'); $mpdf = new mPDF('utf-8', 'A4', '8', '', 10, 10, 7, 7, 10, 10); $mpdf->charset_in = 'cp1251'; $stylesheet = file_get_contents('style.css'); $mpdf->WriteHTML($stylesheet, 1); $mpdf->list_indent_first_level = 0; $html = [HTML string via AJAX] $mpdf->WriteHTML($html, 2); $mpdf->Output('example.pdf', 'I'); ● UTF-8 basics ● slow (UTF-8) ● mm dimensions ● inline CSS styles ● positioned blocks mPDF
  13. 13. Headache styles
  14. 14. PDFMake <head> <meta charset='utf-8'> <title>[title here]</title> <script src='pdfmake.min.js'></script> <script src='vfs_fonts.js'></script> </head> document-definition-object PDF open/print/download pdfMake.createPdf(docDefinition).download(); pdfMake.createPdf(docDefinition).open();
  15. 15. PDFMake - Object var docDefinition = { content: [ // paragraph 'This is a standard paragraph, using default style', // paragraph with styling properties { text: 'This paragraph will have a bigger font', fontSize: 15 }, // set of paragraphs { text: [ 'This paragraph is defined as an array of elements', { text: 'restyle part of it and make it bigger ', fontSize: 15 }, 'than the rest.' ] } ] };
  16. 16. PDFMake - Styling var docDefinition = { // content content: [ { text: 'Multiple styles applied', style: [ 'styleOne', 'styleTwo' ] } ], // styles styles: { styleOne: { fontSize: 22, bold: true }, styleTwo: { italic: true, alignment: 'right' } } };
  17. 17. ● Columns ● Lists ● Tables ● Page elements: header, footer, pager, page break, dimensions, orientation, margins ● Images and Backgrounds PDFMake
  18. 18. PDFMake - Dynamic Content var externalDataRetrievedFromServer = []; $('.element').each(function() { var itemData = []; var subElement1 = $(this).find('subElement1').text().trim(); var subElement2 = $(this).find('subElement2').text().trim(); var subElement3 = $(this).find('subElement3').text().trim(); itemData.push({ 'subElement1': subElement1, 'subElement2': subElement2, 'subElement3': subElement3 }); externalDataRetrievedFromServer.push({ 'text': $(this).find('.textContainer').text(), 'data': itemData }); });
  19. 19. PDFMake - Dynamic Content
  20. 20. PDFMake - Images var logoPrint = 'data:image/png;base64,...’ http://dopiaza.org/tools/datauri/index.php function getBase64FromImageUrl(URL) { var dataURL; var img = new Image(); img.src = URL; img.onload = function () { var canvas = document.createElement("canvas"); canvas.width = this.width; canvas.height = this.height; var ctx = canvas.getContext("2d"); ctx.drawImage(this, 0, 0); dataURL = canvas.toDataURL("image/png"); } return dataURL; }
  21. 21. Thank you! Ольга Смолянкина - ADCI solutions - Омск

×