Introduction

We will be using jspdf.debug.js, html2canvas.min.js, and canvg.min.js in this article to build a perfect PDF of my HTML page with CSS and SVG, as we see in the charts that give an SVG object.
Step 1 - Create a HTML page
Create a new HTML page. Define the HTML body to contain two division tags, displaying different information on the screen.
  1. <html>
  2. <head>
  3. <style>
  4. #customers {
  5. font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  6. border-collapse: collapse;
  7. width: 100%;
  8. }
  10. #customers td, #customers th {
  11. border: 1px solid #ddd;
  12. padding: 8px;
  13. }
  15. #customers tr:nth-child(even){background-color: #f2f2f2;}
  17. #customers tr:hover {background-color: #ddd;}
  19. #customers th {
  20. padding-top: 12px;
  21. padding-bottom: 12px;
  22. text-align: left;
  23. background-color: #4CAF50;
  24. color: white;
  25. }
  26. </style>
  27. </head>
  29. <body>
  30. <input type="button" id="btnDownload" value="download" /> Please click on this button to get chart with html content on pdf
  31. <div class="white-back row" style="padding: 1.5rem;" id="tvgMainCnt">
  32. <div id="top-content">
  33. <div>
  34. <div>
  35. <img src="https://miro.medium.com/max/1198/1*n-Q2XBz6CFC1MgMpdab4xQ.jpeg" style="height: 100px;" />
  36. </div>
  37. </div>
  38. <div style="margin-top: 1rem;">
  39. <p style="color:green">
  40. Dear members,
  41. </p>
  42. </div>
  43. <div>
  44. Added some fake text: Please ignore this is test text, Please ignore this is test text, Please ignore this is test text.
  45. </div>
  46. <br />
  47. <table id="customers" class="table table-striped" width="100%">
  49. <thead width="100%" width="100%">
  50. <tr class='warning' >
  51. <th>No.</th>
  52. <th>Country</th>
  53. <th>Population</th>
  54. <th>Date</th>
  55. <th>Age</th>
  56. </tr>
  57. </thead>
  58. <tbody width="100%">
  59. <tr>
  60. <td>1</td>
  61. <td>Chinna</td>
  62. <td>1,363,480,000 000 000</td>
  63. <td>March 24, 2014</td>
  64. <td>19.1</td>
  65. </tr>
  66. <tr>
  67. <td>2</td>
  68. <td>India</td>
  69. <td>1,241,900,000</td>
  70. <td>March 24, 2014</td>
  71. <td>17.4</td>
  72. </tr>
  73. <tr>
  74. <td>3</td>
  75. <td>United States</td>
  76. <td>317,746,000</td>
  77. <td>March 24, 2014</td>
  78. <td>4.44</td>
  79. </tr>
  80. <tr>
  81. <td>4</td>
  82. <td>Indonesia</td>
  83. <td>249,866,000</td>
  84. <td>July 1, 2013</td>
  85. <td>3.49</td>
  86. </tr>
  87. <tr>
  88. <td>5</td>
  89. <td>Brazil</td>
  90. <td>201,032,714</td>
  91. <td>July 1, 2013</td>
  92. <td>2.81</td>
  93. </tr>
  94. </tbody>
  95. </table>
  96. <div style="margin-top: 1rem;">
  97. <p>
  98. Download of chart with html content should work on all browser but not working in Microsoft edge.
  99. </p>
  100. </div>
  101. </div>
  103. <div id="testchart"></div>
  104. </div>
  105. <div id="bottom-content">
  106. <p>Thanks for looking into this issue, struggling to fix this for last 2 days.
  107. UPDATE: Finally able to fix it. Cheers!!</p>
  108. <p>this demo develop by Bhavdip Talaviya</p>
  109. </div>
  110. </div>
  111. </body>
  112. </html>

Step 2 - Copy all CDN links into your HTML page

Now, you need to copy all the CDN (JS) links into your HTML page. Here, in the sample code, we have used the CDN URLs.
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  3. <!-- Required to convert named colors to RGB -->
  4. <script src="https://cdnjs.cloudflare.com/ajax/libs/canvg/1.4/rgbcolor.min.js"></script>
  6. <!-- Optional if you want blur -->
  7. <script src="https://cdn.jsdelivr.net/npm/stackblur-canvas@^1/dist/stackblur.min.js"></script>
  9. <script src="https://cdn.jsdelivr.net/npm/canvg/dist/browser/canvg.min.js"></script>
  10. <script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.7/highcharts.js"></script>
  11. <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.debug.js"></script>
  12. <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
Paste the above code below the closing of body tag (</body>).
Step 3 - Write jQuery to generate the PDF file
Now you need to create a jQuery logic to generate the PDF file so you can add logic for the Download button and make jQuery in this same page in the script tag.
  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3. Highcharts.chart('testchart', {
  5. title: {
  6. text: 'Solar Employment Growth by Sector, 2010-2016'
  7. },
  9. subtitle: {
  10. text: 'Source: thesolarfoundation.com'
  11. },
  13. yAxis: {
  14. title: {
  15. text: 'Number of Employees'
  16. }
  17. },
  18. legend: {
  19. layout: 'vertical',
  20. align: 'right',
  21. verticalAlign: 'middle'
  22. },
  24. plotOptions: {
  25. series: {
  26. label: {
  27. connectorAllowed: false
  28. },
  29. pointStart: 2010
  30. }
  31. },
  33. series: [{
  34. name: 'Installation',
  35. data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
  36. }, {
  37. name: 'Manufacturing',
  38. data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
  39. }, {
  40. name: 'Sales & Distribution',
  41. data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
  42. }, {
  43. name: 'Project Development',
  44. data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
  45. }, {
  46. name: 'Other',
  47. data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
  48. }],
  50. responsive: {
  51. rules: [{
  52. condition: {
  53. maxWidth: 500
  54. },
  55. chartOptions: {
  56. legend: {
  57. layout: 'horizontal',
  58. align: 'center',
  59. verticalAlign: 'bottom'
  60. }
  61. }
  62. }]
  63. }
  65. });
  66. });
  67. $("#btnDownload").click(function(){
  68. var doc = new jsPDF('portrait', 'pt', 'a4', true);
  69. var elementHandler = {
  70. '#ignorePDF': function(element, renderer) {
  71. return true;
  72. }
  73. };
  75. var source = document.getElementById("top-content");
  76. doc.fromHTML(source, 15, 15, {
  77. 'width': 560,
  78. 'elementHandlers': elementHandler
  79. });
  81. var svg = document.querySelector('svg');
  82. var canvas = document.createElement('canvas');
  83. var canvasIE = document.createElement('canvas');
  84. var context = canvas.getContext('2d');
  89. var data = (new XMLSerializer()).serializeToString(svg);
  90. canvg(canvas, data);
  91. var svgBlob = new Blob([data], {
  92. type: 'image/svg+xml;charset=utf-8'
  93. });
  95. var url = canvas.toDataURL(svgBlob);//DOMURL.createObjectURL(svgBlob);
  97. var img = new Image();
  98. img.onload = function() {
  99. context.canvas.width = $('#testchart').find('svg').width();;
  100. context.canvas.height = $('#testchart').find('svg').height();;
  101. context.drawImage(img, 0, 0);
  102. // freeing up the memory as image is drawn to canvas
  103. //DOMURL.revokeObjectURL(url);
  105. var dataUrl;
  106. if (isIEBrowser()) { // Check of IE browser
  107. var svg = $('#testchart').highcharts().container.innerHTML;
  108. canvg(canvasIE, svg);
  109. dataUrl = canvasIE.toDataURL('image/JPEG');
  110. } else {
  111. dataUrl = canvas.toDataURL('image/jpeg');
  112. }
  113. doc.addImage(dataUrl, 'JPEG', 20, 365, 560, 350); // 365 is top
  115. var bottomContent = document.getElementById("bottom-content");
  116. doc.fromHTML(bottomContent, 15, 750, { //700 is bottom content top if you increate this then you should increase above 365
  117. 'width': 560,
  118. 'elementHandlers': elementHandler
  119. });
  121. setTimeout(function() {
  122. doc.save('HTML-To-PDF-Dvlpby-Bhavdip.pdf');
  123. }, 2000);
  124. };
  125. img.src = url;
  126. });
  127. function isIEBrowser() {
  128. var ieBrowser;
  129. var ua = window.navigator.userAgent;
  130. var msie = ua.indexOf("MSIE ");
  132. if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // Internet Explorer
  133. {
  134. ieBrowser = true;
  135. } else //Other browser
  136. {
  137. console.log('Other Browser');
  138. ieBrowser = false;
  139. }
  141. return ieBrowser;
  142. };
  143. </script>
You can set the height and width based on your HTML page, so now I put height and width based on my HTML page.
Full page code is mentioned here.
  1. <html>
  2. <head>
  3. <style>
  4. #customers {
  5. font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  6. border-collapse: collapse;
  7. width: 100%;
  8. }
  10. #customers td, #customers th {
  11. border: 1px solid #ddd;
  12. padding: 8px;
  13. }
  15. #customers tr:nth-child(even){background-color: #f2f2f2;}
  17. #customers tr:hover {background-color: #ddd;}
  19. #customers th {
  20. padding-top: 12px;
  21. padding-bottom: 12px;
  22. text-align: left;
  23. background-color: #4CAF50;
  24. color: white;
  25. }
  26. </style>
  27. </head>
  29. <body>
  30. <input type="button" id="btnDownload" value="download" /> Please click on this button to get chart with html content on pdf
  31. <div class="white-back row" style="padding: 1.5rem;" id="tvgMainCnt">
  32. <div id="top-content">
  33. <div>
  34. <div>
  35. <img src="https://miro.medium.com/max/1198/1*n-Q2XBz6CFC1MgMpdab4xQ.jpeg" style="height: 100px;" />
  36. </div>
  37. </div>
  38. <div style="margin-top: 1rem;">
  39. <p style="color:green">
  40. Dear members,
  41. </p>
  42. </div>
  43. <div>
  44. Added some fake text: Please ignore this is test text, Please ignore this is test text, Please ignore this is test text.
  45. </div>
  46. <br />
  47. <table id="customers" class="table table-striped" width="100%">
  49. <thead width="100%" width="100%">
  50. <tr class='warning' >
  51. <th>No.</th>
  52. <th>Country</th>
  53. <th>Population</th>
  54. <th>Date</th>
  55. <th>Age</th>
  56. </tr>
  57. </thead>
  58. <tbody width="100%">
  59. <tr>
  60. <td>1</td>
  61. <td>Chinna</td>
  62. <td>1,363,480,000 000 000</td>
  63. <td>March 24, 2014</td>
  64. <td>19.1</td>
  65. </tr>
  66. <tr>
  67. <td>2</td>
  68. <td>India</td>
  69. <td>1,241,900,000</td>
  70. <td>March 24, 2014</td>
  71. <td>17.4</td>
  72. </tr>
  73. <tr>
  74. <td>3</td>
  75. <td>United States</td>
  76. <td>317,746,000</td>
  77. <td>March 24, 2014</td>
  78. <td>4.44</td>
  79. </tr>
  80. <tr>
  81. <td>4</td>
  82. <td>Indonesia</td>
  83. <td>249,866,000</td>
  84. <td>July 1, 2013</td>
  85. <td>3.49</td>
  86. </tr>
  87. <tr>
  88. <td>5</td>
  89. <td>Brazil</td>
  90. <td>201,032,714</td>
  91. <td>July 1, 2013</td>
  92. <td>2.81</td>
  93. </tr>
  94. </tbody>
  95. </table>
  96. <div style="margin-top: 1rem;">
  97. <p>
  98. Download of chart with html content should work on all browser but not working in Microsoft edge.
  99. </p>
  100. </div>
  101. </div>
  103. <div id="testchart"></div>
  104. </div>
  105. <div id="bottom-content">
  106. <p>Thanks for looking into this issue, struggling to fix this for last 2 days..
  107. UPDATE: Finally able to fix it. Cheers!!</p>
  108. </div>
  109. </div>
  110. </body>
  111. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  113. <!-- Required to convert named colors to RGB -->
  114. <script src="https://cdnjs.cloudflare.com/ajax/libs/canvg/1.4/rgbcolor.min.js"></script>
  116. <!-- Optional if you want blur -->
  117. <script src="https://cdn.jsdelivr.net/npm/stackblur-canvas@^1/dist/stackblur.min.js"></script>
  119. <script src="https://cdn.jsdelivr.net/npm/canvg/dist/browser/canvg.min.js"></script>
  120. <script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.7/highcharts.js"></script>
  121. <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.debug.js"></script>
  122. <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
  124. <script type="text/javascript">
  125. $(document).ready(function() {
  126. Highcharts.chart('testchart', {
  128. title: {
  129. text: 'Solar Employment Growth by Sector, 2010-2016'
  130. },
  132. subtitle: {
  133. text: 'Source: thesolarfoundation.com'
  134. },
  136. yAxis: {
  137. title: {
  138. text: 'Number of Employees'
  139. }
  140. },
  141. legend: {
  142. layout: 'vertical',
  143. align: 'right',
  144. verticalAlign: 'middle'
  145. },
  147. plotOptions: {
  148. series: {
  149. label: {
  150. connectorAllowed: false
  151. },
  152. pointStart: 2010
  153. }
  154. },
  156. series: [{
  157. name: 'Installation',
  158. data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
  159. }, {
  160. name: 'Manufacturing',
  161. data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
  162. }, {
  163. name: 'Sales & Distribution',
  164. data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
  165. }, {
  166. name: 'Project Development',
  167. data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
  168. }, {
  169. name: 'Other',
  170. data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
  171. }],
  173. responsive: {
  174. rules: [{
  175. condition: {
  176. maxWidth: 500
  177. },
  178. chartOptions: {
  179. legend: {
  180. layout: 'horizontal',
  181. align: 'center',
  182. verticalAlign: 'bottom'
  183. }
  184. }
  185. }]
  186. }
  188. });
  189. });
  190. $("#btnDownload").click(function(){
  191. var doc = new jsPDF('portrait', 'pt', 'a4', true);
  192. var elementHandler = {
  193. '#ignorePDF': function(element, renderer) {
  194. return true;
  195. }
  196. };
  198. var source = document.getElementById("top-content");
  199. doc.fromHTML(source, 15, 15, {
  200. 'width': 560,
  201. 'elementHandlers': elementHandler
  202. });
  204. var svg = document.querySelector('svg');
  205. var canvas = document.createElement('canvas');
  206. var canvasIE = document.createElement('canvas');
  207. var context = canvas.getContext('2d');
  212. var data = (new XMLSerializer()).serializeToString(svg);
  213. canvg(canvas, data);
  214. var svgBlob = new Blob([data], {
  215. type: 'image/svg+xml;charset=utf-8'
  216. });
  218. var url = canvas.toDataURL(svgBlob);//DOMURL.createObjectURL(svgBlob);
  220. var img = new Image();
  221. img.onload = function() {
  222. context.canvas.width = $('#testchart').find('svg').width();;
  223. context.canvas.height = $('#testchart').find('svg').height();;
  224. context.drawImage(img, 0, 0);
  225. // freeing up the memory as image is drawn to canvas
  226. //DOMURL.revokeObjectURL(url);
  228. var dataUrl;
  229. if (isIEBrowser()) { // Check of IE browser
  230. var svg = $('#testchart').highcharts().container.innerHTML;
  231. canvg(canvasIE, svg);
  232. dataUrl = canvasIE.toDataURL('image/JPEG');
  233. } else {
  234. dataUrl = canvas.toDataURL('image/jpeg');
  235. }
  236. doc.addImage(dataUrl, 'JPEG', 20, 365, 560, 350); // 365 is top
  238. var bottomContent = document.getElementById("bottom-content");
  239. doc.fromHTML(bottomContent, 15, 750, { //700 is bottom content top if you increate this then you should increase above 365
  240. 'width': 560,
  241. 'elementHandlers': elementHandler
  242. });
  244. setTimeout(function() {
  245. doc.save('HTML-To-PDF-Dvlpby-Bhavdip.pdf');
  246. }, 2000);
  247. };
  248. img.src = url;
  249. });
  250. function isIEBrowser() {
  251. var ieBrowser;
  252. var ua = window.navigator.userAgent;
  253. var msie = ua.indexOf("MSIE ");
  255. if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // Internet Explorer
  256. {
  257. ieBrowser = true;
  258. } else //Other browser
  259. {
  260. console.log('Other Browser');
  261. ieBrowser = false;
  262. }
  264. return ieBrowser;
  265. };
  266. </script>
  267. </html>
Please see below a live example of the above code.