PDF Export Tester

by nilloc

HTML

<script src="https://github.com/devongovett/pdfkit/releases/download/v0.8.0/pdfkit.js"></script>
<script src="https://github.com/devongovett/blob-stream/releases/download/v0.1.3/blob-stream.js"></script>
<h1>JS Create &amp; Download PDF</h1>
<h3>
 Using these:
</h3>
<ul>
  <li>http://pdfkit.org/</li>
  <li>https://github.com/devongovett/blob-stream</li>
</ul>
<a href="#" id="button">Download PDF</a>

JavaScript

// create a document and pipe to a blob
var doc = new PDFDocument();
var stream = doc.pipe(blobStream());
var a = document.getElementById('button');

// draw some text
doc.fontSize(25)
   .text('Here is some vector graphics...', 100, 80);
   
// some vector graphics
doc.save()
   .moveTo(100, 150)
   .lineTo(100, 250)
   .lineTo(200, 250)
   .fill("#FF3300");
   
doc.circle(280, 200, 50)
   .fill("#6600FF");
   
// an SVG path
doc.scale(0.6)
   .translate(470, 130)
   .path('M 250,75 L 323,301 131,161 369,161 177,301 z')
   .fill('red', 'even-odd')
   .restore();
   
// and some justified text wrapped into columns
doc.text('And here is some wrapped text...', 100, 300)
   .font('Times-Roman', 13)
   .moveDown()
   .text("Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).", {
     width: 412,
     align: 'justify',
     indent: 30,
     columns: 2,
     height: 300,
     ellipsis: true
   });
   
// end and display the document in the iframe to the right
doc.end();
stream.on('finish', function() {
  var url = this.toBlobURL('application/pdf');
  
  a.href = url;
  a.download = "pdf-tester.pdf";
});