jspdf.plugin.addhtml.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. /**
  2. * jsPDF addHTML PlugIn
  3. * Copyright (c) 2014 Diego Casorran
  4. *
  5. * Licensed under the MIT License.
  6. * http://opensource.org/licenses/mit-license
  7. */
  8. (function (jsPDFAPI) {
  9. 'use strict';
  10. /**
  11. * Renders an HTML element to canvas object which added as an image to the PDF
  12. *
  13. * This PlugIn requires html2canvas: https://github.com/niklasvh/html2canvas
  14. * OR rasterizeHTML: https://github.com/cburgmer/rasterizeHTML.js
  15. *
  16. * @public
  17. * @function
  18. * @param element {Mixed} HTML Element, or anything supported by html2canvas.
  19. * @param x {Number} starting X coordinate in jsPDF instance's declared units.
  20. * @param y {Number} starting Y coordinate in jsPDF instance's declared units.
  21. * @param options {Object} Additional options, check the code below.
  22. * @param callback {Function} to call when the rendering has finished.
  23. *
  24. * NOTE: Every parameter is optional except 'element' and 'callback', in such
  25. * case the image is positioned at 0x0 covering the whole PDF document
  26. * size. Ie, to easily take screenshoots of webpages saving them to PDF.
  27. */
  28. jsPDFAPI.addHTML = function (element, x, y, options, callback) {
  29. 'use strict';
  30. if(typeof html2canvas === 'undefined' && typeof rasterizeHTML === 'undefined')
  31. throw new Error('You need either '
  32. +'https://github.com/niklasvh/html2canvas'
  33. +' or https://github.com/cburgmer/rasterizeHTML.js');
  34. if(typeof x !== 'number') {
  35. options = x;
  36. callback = y;
  37. }
  38. if(typeof options === 'function') {
  39. callback = options;
  40. options = null;
  41. }
  42. var I = this.internal, K = I.scaleFactor, W = I.pageSize.width, H = I.pageSize.height;
  43. options = options || {};
  44. options.onrendered = function(obj) {
  45. x = parseInt(x) || 0;
  46. y = parseInt(y) || 0;
  47. var dim = options.dim || {};
  48. var h = dim.h || 0;
  49. var w = dim.w || Math.min(W,obj.width/K) - x;
  50. var format = 'JPEG';
  51. if(options.format)
  52. format = options.format;
  53. if(obj.height > H && options.pagesplit) {
  54. var crop = function() {
  55. var cy = 0;
  56. while(1) {
  57. var canvas = document.createElement('canvas');
  58. canvas.width = Math.min(W*K,obj.width);
  59. canvas.height = Math.min(H*K,obj.height-cy);
  60. var ctx = canvas.getContext('2d');
  61. ctx.drawImage(obj,0,cy,obj.width,canvas.height,0,0,canvas.width,canvas.height);
  62. var args = [canvas, x,cy?0:y,canvas.width/K,canvas.height/K, format,null,'SLOW'];
  63. this.addImage.apply(this, args);
  64. cy += canvas.height;
  65. if(cy >= obj.height) break;
  66. this.addPage();
  67. }
  68. callback(w,cy,null,args);
  69. }.bind(this);
  70. if(obj.nodeName === 'CANVAS') {
  71. var img = new Image();
  72. img.onload = crop;
  73. img.src = obj.toDataURL("image/png");
  74. obj = img;
  75. } else {
  76. crop();
  77. }
  78. } else {
  79. var alias = Math.random().toString(35);
  80. var args = [obj, x,y,w,h, format,alias,'SLOW'];
  81. this.addImage.apply(this, args);
  82. callback(w,h,alias,args);
  83. }
  84. }.bind(this);
  85. if(typeof html2canvas !== 'undefined' && !options.rstz) {
  86. return html2canvas(element, options);
  87. }
  88. if(typeof rasterizeHTML !== 'undefined') {
  89. var meth = 'drawDocument';
  90. if(typeof element === 'string') {
  91. meth = /^http/.test(element) ? 'drawURL' : 'drawHTML';
  92. }
  93. options.width = options.width || (W*K);
  94. return rasterizeHTML[meth](element, void 0, options).then(function(r) {
  95. options.onrendered(r.image);
  96. }, function(e) {
  97. callback(null,e);
  98. });
  99. }
  100. return null;
  101. };
  102. })(jsPDF.API);