forked from Marak/pdf.js
/
index.html
139 lines (108 loc) · 4.25 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<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>
</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">
/* 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');
/* 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.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.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');
</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>
</body>
</html>