Skip to content

Embeded fonts, encoding and image support added #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
stepanini15 wants to merge 13 commits into
base: master
Choose a base branch
from
Open

Embeded fonts, encoding and image support added #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
59043f9
Write function,
stepanini15 Feb 23, 2012
9b03471
New page is added if text in write is too long.
stepanini15 Feb 28, 2012
8a83c34
Demo file updated.
stepanini15 Feb 28, 2012
1b2aa19
Locale encoding support added.
stepanini15 Mar 28, 2012
d2ca24b
External font support added.
stepanini15 Apr 12, 2012
3c0ae45
External font can included into the file.
stepanini15 Apr 12, 2012
2dd1a62
Basic image support added.
stepanini15 Apr 26, 2012
5e254c7
Example and documentation updated.
stepanini15 Apr 26, 2012
673c892
Image supports img or canvas argument.
stepanini15 May 9, 2012
0b8631c
BUGFIX: Font1 errror message.
stepanini15 May 10, 2012
8b11557
Basic table support added.
stepanini15 May 18, 2012
0cb02e1
Table support updated.
stepanini15 May 19, 2012
a6d5121
Demo file updated.
stepanini15 May 20, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
126 changes: 36 additions & 90 deletions Readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,97 +10,43 @@

/* create the PDF document */

var doc = new pdf();
doc.text(20, 20, 'hello, I am PDF.');
doc.text(20, 30, 'i was created in the browser using javascript.');
doc.text(20, 40, 'i can also be created from node.js');

/* Optional - set properties on the document */
doc.setProperties({
title: 'A sample document created by pdf.js',
subject: 'PDFs are kinda cool, i guess',
author: 'Marak Squires',
keywords: 'pdf.js, javascript, Marak, Marak Squires',
creator: 'pdf.js'
});
doc.addPage();

doc.setFontSize(22);
doc.text(20, 20, 'This is a title');

doc.setFontSize(16);
doc.text(20, 30, 'This is some normal sized text underneath.');

doc.drawLine(100, 100, 100, 120, 1.0, 'dashed');
doc.drawLine(100, 100, 120, 100, 1.2, 'dotted');
doc.drawLine(120, 120, 100, 120, 1.4, 'dashed');
doc.drawLine(120, 120, 120, 100, 1.6, 'solid');

doc.drawRect(140, 140, 10, 10, 'solid');

var fileName = "testFile"+new Date().getSeconds()+".pdf";
var pdfAsDataURI = doc.output('datauri', {"fileName":fileName});

/* inject the pdf into the browser */

// inject using an iframe
// this seems to work in FF but not Chrome? try testing some more on your own >.<
//$('#theFrame').attr('src',pdfAsDataURI);

// inject using an object tag
// doesnt really work but it does something interesting
//$('body').append('<object data="'+pdfAsDataURI+'" type="application/pdf"></object>');

// inject changing document.location
// doesn't work in FF, kinda works in Chrome. this method is a bit brutal as the user sees a huge URL
// document.location = pdfAsDataURI;

// create a link
// this seems to always work, except clicking the link destroys my FF instantly
$('#pdfLink').html('<a href = "'+pdfAsDataURI+'">'+fileName+'</a> <span class = "helper">right click and save file as pdf</span');

var doc = new pdf(function(data){
window.open(data, 'doc');
});
/* optional - set properties on the document */
doc.setProperties({
title: 'A sample document created by pdf.js',
subject: 'PDFs are kinda cool, i guess',
author: 'Anonymous',
keywords: 'pdf.js, javascript',
creator: 'pdf.js'
});

doc.text(20, 30, 'You can also override page fonts with text method', 'Times-Roman');
doc.text(20, 40, 'Monaco -This is some normal sized text underneath.', 'Monaco');
doc.text(20, 50, 'Times-Roman - This is some normal sized text underneath.', 'Times-Roman');
doc.text(20, 60, 'Helvetica - This is some normal sized text underneath.', 'Helvetica');
doc.text(20, 70, 'Courier - This is some normal sized text.', 'Courier');
doc.addFont('courcs', '', cour);
doc.setFont('courcs');
doc.text(20, 80, 'Text with some foreign characters: ��������');
doc.drawLine(100, 100, 100, 120, 1.0, 'dashed');
doc.drawLine(100, 100, 120, 100, 1.2, 'dotted');
doc.drawLine(120, 120, 100, 120, 1.4, 'dashed');
doc.drawLine(120, 120, 120, 100, 1.6, 'solid');
doc.image('stekot.jpg', 50, 100);

doc.drawRect(140, 140, 10, 10, 'solid');
doc.addPage();
doc.setFontSize(18);
doc.setFont('Verdana');
doc.write(8, 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Etiam posuere lacus quis dolor. Fusce aliquam vestibulum ipsum. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Etiam egestas wisi a erat. Etiam dictum tincidunt diam. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Integer lacinia. Curabitur bibendum justo non orci. Proin mattis lacinia justo.');
doc.write(8, 'Fusce consectetuer risus a nunc. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Nulla pulvinar eleifend sem. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Aliquam in lorem sit amet leo accumsan lacinia. Mauris metus. Integer malesuada. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Nullam dapibus fermentum ipsum. Sed convallis magna eu sem. Pellentesque pretium lectus id turpis. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Nunc tincidunt ante vitae massa.');

var fileName = "testFile"+new Date().getSeconds()+".pdf";
doc.output('datauri', {"fileName":fileName});
</script>
### node.js -
var sys = require('sys');
var fs = require('fs');
var pdf = require('./lib/pdf').pdf;

/* create the PDF document */

var doc = new pdf();
doc.text(20, 20, 'hello, I am PDF.');
doc.text(20, 30, 'i was created using node.js version: ' + process.version);
doc.text(20, 40, 'i can also be created from the browser');

/* optional - set properties on the document */
doc.setProperties({
title: 'A sample document created by pdf.js',
subject: 'PDFs are kinda cool, i guess',
author: 'Marak Squires',
keywords: 'pdf.js, javascript, Marak, Marak Squires',
creator: 'pdf.js'
});
doc.addPage();

doc.setFontSize(22);
doc.text(20, 20, 'This is a title');

doc.setFontSize(16);
doc.text(20, 30, 'This is some normal sized text underneath.');

doc.drawLine(100, 100, 100, 120, 1.0, 'dashed');
doc.drawLine(100, 100, 120, 100, 1.2, 'dotted');
doc.drawLine(120, 120, 100, 120, 1.4, 'dashed');
doc.drawLine(120, 120, 120, 100, 1.6, 'solid');

doc.drawRect(140, 140, 10, 10, 'solid');

var fileName = "testFile"+new Date().getSeconds()+".pdf";

fs.writeFile(fileName, doc.output(), function(err, data){
sys.puts(fileName +' was created! great success!');
});

## Authors
#### Marak Squires and Matthew Bergman
#### Marak Squires, Matthew Bergman and Stepan Kotek
Heavily inspired by James Hall's jsPDF
214 changes: 106 additions & 108 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,139 +1,137 @@

<html>
<head>
<title>pdf.js - create basic pdf files in the browser and node.js</title>
<style type="text/css">
* { padding: 0; margin: 0; }
body {
padding: 30px;
font-family: Arial, Helvetica, sans-serif;
}
h1 {
margin-bottom: 1em;
border-bottom: 1px solid #ccc;
}

h2 {
margin-bottom: 1em;
border-bottom: 1px solid #ccc;
}

pre {
border: 1px dotted #ccc;
background: #f7f7f7;
padding: 10px;
margin-bottom: 1em;
}

h1 {
margin-bottom: 0.7em;
}

h2 {
margin-top: 1em;
}
.box{ width:100%; height:500px;}
#theCode{}
#theFrame{ display:none;}
</style>
<script type="text/javascript" src="./lib/pdf.js"></script>
<!-- jquery not required, just use this this demo page -->
<script type="text/javascript" src="./vendor/jquery.js"></script>


<script type="text/javascript">

$(document).ready(function(){

$('#run').click(function(e){
// do an eval
eval($('#theCode').val());
});

});

</script>
<title>pdf.js - create basic pdf files in the browser</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}

body {
padding: 30px;
font-family: Arial, Helvetica, sans-serif;
}

h1 {
margin-bottom: 1em;
border-bottom: 1px solid #ccc;
}

h2 {
margin-bottom: 1em;
border-bottom: 1px solid #ccc;
}

pre {
border: 1px dotted #ccc;
background: #f7f7f7;
padding: 10px;
margin-bottom: 1em;
}

h1 {
margin-bottom: 0.7em;
}

h2 {
margin-top: 1em;
}

.box {
width: 100%;
height: 500px;
}

#theCode {

}

#theFrame {
display: none;
}
</style>
<script type="text/javascript" src="./lib/pdf.js"></script>
<!-- font file in Windows-1250 encoding -->
<script type="text/javascript" src="./times.js"></script>
<!-- jquery not required, just use this this demo page -->
<script type="text/javascript" src="./vendor/jquery.js"></script>


<script type="text/javascript">
$(document).ready(
function() {
$('#run').click(
function(e) {
$("body").append(
'<script type="text/javascript">'
+ $('#theCode').text()
+ '<\/script>');
});
});
</script>

</head>

<body>

<h1>pdf.js - create basic pdf files in the browser and node.js</h1>


<h3>demo -
this uses <a href = "http://en.wikipedia.org/wiki/Data_URI_scheme" target = "_blank">dataURIs</a> and they kinda suck. the <a href = "http://github.com/marak/pdf.js">
node.js</a> version is better.</h3><br/>
<form>
<input type = "button" id = "run" name = "run" value = "click here to create example pdf" />
<span id = "pdfLink"></span>
<br/>
<textarea id = "theCode" class = "box">
<h1>pdf.js - create basic pdf files in the browser and node.js</h1>


<h3>
demo - this uses <a
href="http://en.wikipedia.org/wiki/Data_URI_scheme" target="_blank">dataURIs</a>
so IE is not supported. If it throws security error, make sure page is
running on the server.
</h3>
<br />
<form>
<input type="button" id="run" name="run"
value="click here to create example pdf" /> <span id="pdfLink"></span>
<br />
<textarea id="theCode" class="box">
/* create the PDF document */

var doc = new pdf();
doc.text(20, 20, 'hello, I am PDF.');
doc.setFont('Courier');
doc.text(20, 30, 'i was created in the browser using javascript.');
doc.setFont('Times-Roman');
doc.text(20, 40, 'i can also be created from node.js');

var doc = new pdf(function(data){
$('#run').remove();
window.open(data, 'doc');
});
/* optional - set properties on the document */
doc.setProperties({
title: 'A sample document created by pdf.js',
subject: 'PDFs are kinda cool, i guess',
author: 'Marak Squires',
keywords: 'pdf.js, javascript, Marak, Marak Squires',
author: 'Anonymous',
keywords: 'pdf.js, javascript',
creator: 'pdf.js'
});
doc.addPage();

doc.setFontSize(22);
doc.setFont('Verdana');
doc.text(20, 20, 'This is a title');

doc.setFontSize(16);
doc.text(20, 30, 'You can also override page fonts with text method', 'Times-Roman');
doc.text(20, 40, 'Monaco -This is some normal sized text underneath.', 'Monaco');
doc.text(20, 50, 'Times-Roman - This is some normal sized text underneath.', 'Times-Roman');
doc.text(20, 60, 'Helvetica - This is some normal sized text underneath.', 'Helvetica');
doc.text(20, 70, 'Courier - This is some normal sized text.', 'Courier');

doc.addFont('courcs', '', font);
doc.setFont('courcs');
doc.text(20, 80, 'Text with some foreign characters: ��������');
doc.drawLine(100, 100, 100, 120, 1.0, 'dashed');
doc.drawLine(100, 100, 120, 100, 1.2, 'dotted');
doc.drawLine(120, 120, 100, 120, 1.4, 'dashed');
doc.drawLine(120, 120, 120, 100, 1.6, 'solid');
doc.image('stekot.jpg', 50, 100);

doc.drawRect(140, 140, 10, 10, 'solid');

doc.addPage();
doc.setFont('courcs');
doc.setFontSize(18);
doc.write(8, 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Etiam posuere lacus quis dolor. Fusce aliquam vestibulum ipsum. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Etiam egestas wisi a erat. Etiam dictum tincidunt diam. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Integer lacinia. Curabitur bibendum justo non orci. Proin mattis lacinia justo.');
doc.setFontSize(24);
doc.write(8, 'Fusce consectetuer risus a nunc. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Nulla pulvinar eleifend sem. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Aliquam in lorem sit amet leo accumsan lacinia. Mauris metus. Integer malesuada. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Nullam dapibus fermentum ipsum. Sed convallis magna eu sem. Pellentesque pretium lectus id turpis. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Nunc tincidunt ante vitae massa.');

var fileName = "testFile"+new Date().getSeconds()+".pdf";
var pdfAsDataURI = doc.output('datauri', {"fileName":fileName});

/* inject the pdf into the browser */

// inject using an iframe
// this seems to work in FF but not Chrome? try testing some more on your own >.<
//$('#theFrame').attr('src',pdfAsDataURI);

// inject using an object tag
// doesnt really work but it does something interesting
//$('body').append('<object data="'+pdfAsDataURI+'" type="application/pdf"></object>');

// inject changing document.location
// doesn't work in FF, kinda works in Chrome. this method is a bit brutal as the user sees a huge URL
// document.location = pdfAsDataURI;

// create a link
// this seems to always work, except clicking the link destroys my FF instantly
$('#pdfLink').html('<a href = "'+pdfAsDataURI+'">'+fileName+'</a> <span class = "helper">right click and save file as pdf</span');


doc.output('datauri', {"fileName":fileName});


</textarea>
</form>
<iframe id = "theFrame"></iframe>

<a href = "http://github.com/marak/pdf.js/">
<img alt="Fork me on GitHub" src="http://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" style="position: absolute; z-index: 10; top: 0pt; right: 0pt; border: 0pt none;">
</a>
</form>
<iframe id="theFrame"></iframe>
</body>
</html>
Loading