hpdf.js - Demo

Simpe Text

var pdf = new HPDF();

var helvetica = pdf.font('Helvetica');

var title = "This is a test!";
var page = pdf.addPage();
page.setFontAndSize(helvetica, 24);
var tw = page.textWidth(title);
page.beginText();
page.moveTextPos( (page.width()-tw)/2, page.height()-50 );
page.showText(title);
page.endText();

window.open( pdf.toDataUri() );

pdf.free();

Page Size

var pdf = new HPDF();

var helvetica = pdf.font('Helvetica');
var title = "This is a test!";
var page = pdf.addPage();
page.setSize('a3', 'l'); // l = landscape
page.setFontAndSize(helvetica, 24);
var tw = page.textWidth(title);
page.beginText();
page.moveTextPos( (page.width()-tw)/2, page.height()-50 );
page.showText(title);
page.endText();

window.open( pdf.toDataUri() );

pdf.free();

Custom TTF fonts

Select a TTF file:

var pdf = new HPDF();

var file = $('#ttf_font')[0].files[0]
if(file.type !== "application/x-font-ttf")
  alert('Please select a .ttf file');

var reader = new FileReader();
reader.onload = function (evt) {
  var file_contents = evt.target.result;

  var customfont = pdf.loadTTFont(file_contents);
  var title = "This is a test!";
  page = pdf.addPage();
  page.setFontAndSize(customfont, 24);
  tw = page.textWidth(title);
  page.beginText();
  page.moveTextPos( (page.width()-tw)/2, page.height()-50 );
  page.showText(title);
  page.endText();

  window.open( pdf.toDataUri() );

  pdf.free();
}
reader.readAsArrayBuffer(file);

Custom remote fonts

Input URL of a TTF file (note same-origin policy!):

var pdf = new HPDF();

var url = $('#ttf_remote_font').val()

var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer';

xhr.onload = function(e) {
  var customfont = pdf.loadTTFont(xhr.response);
  var title = "This is a test!";
  page = pdf.addPage();
  page.setFontAndSize(customfont, 24);
  tw = page.textWidth(title);
  page.beginText();
  page.moveTextPos( (page.width()-tw)/2, page.height()-50 );
  page.showText(title);
  page.endText();

  window.open( pdf.toDataUri() );

  pdf.free();
}
xhr.send();