Brendan Dahl
11 years ago
16 changed files with 530 additions and 23 deletions
@ -0,0 +1,22 @@
@@ -0,0 +1,22 @@
|
||||
{ |
||||
"locals": { |
||||
"url": "http://localhost:8080", |
||||
"name": "PDF.js Documentation", |
||||
"description": "" |
||||
}, |
||||
"require": { |
||||
"moment": "moment", |
||||
"_": "underscore", |
||||
"typogr": "typogr" |
||||
}, |
||||
"jade": { |
||||
"pretty": true |
||||
}, |
||||
"markdown": { |
||||
"smartLists": true, |
||||
"smartypants": true |
||||
}, |
||||
"plugins": [ |
||||
"./plugins/wintersmith-makerelative.coffee" |
||||
] |
||||
} |
||||
@ -0,0 +1,8 @@
@@ -0,0 +1,8 @@
|
||||
--- |
||||
title: API |
||||
template: layout.jade |
||||
--- |
||||
|
||||
# API |
||||
|
||||
We're currently working on better API docs, but the API is well documented in [api.js](https://github.com/mozilla/pdf.js/blob/master/src/display/api.js). |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,119 @@
@@ -0,0 +1,119 @@
|
||||
body { |
||||
} |
||||
.starter-template { |
||||
padding: 0 15px; |
||||
} |
||||
.navbar-brand { |
||||
padding: 4px 15px; |
||||
} |
||||
.navbar-brand img { |
||||
height: 42px; |
||||
} |
||||
.navbar { |
||||
border-color: #e5e7e8; |
||||
} |
||||
.navbar-default .navbar-nav > .active > a, |
||||
.navbar-default .navbar-nav > .active > a:hover, |
||||
.navbar-default .navbar-nav > .active > a:focus { |
||||
background-color: #fff; |
||||
border: 1px solid #e5e7e8; |
||||
border-width: 0 1px; |
||||
position: relative; |
||||
top: 1px; |
||||
} |
||||
|
||||
footer { |
||||
padding-top: 40px; |
||||
padding-bottom: 40px; |
||||
margin-top: 100px; |
||||
color: #777; |
||||
text-align: center; |
||||
border-top: 1px solid #E5E5E5; |
||||
} |
||||
|
||||
/* code styling */ |
||||
|
||||
code { |
||||
font-family: 'Anonymous Pro', monospace; |
||||
font-size: 0.85em; |
||||
color: #000; |
||||
} |
||||
|
||||
pre code { |
||||
display: block; |
||||
line-height: 1.1; |
||||
} |
||||
|
||||
p code { |
||||
padding: 0.1em 0.3em 0.2em; |
||||
border-radius: 0.3em; |
||||
position: relative; |
||||
top: -0.15em; |
||||
background: #444; |
||||
color: #fff; |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
/* syntax hl stuff */ |
||||
|
||||
code.lang-markdown { |
||||
color: #424242; |
||||
} |
||||
|
||||
code.lang-markdown .header, |
||||
code.lang-markdown .strong { |
||||
font-weight: bold; |
||||
} |
||||
|
||||
code.lang-markdown .emphasis { |
||||
font-style: italic; |
||||
} |
||||
|
||||
code.lang-markdown .horizontal_rule, |
||||
code.lang-markdown .link_label, |
||||
code.lang-markdown .code, |
||||
code.lang-markdown .header, |
||||
code.lang-markdown .link_url { |
||||
color: #555; |
||||
} |
||||
|
||||
code.lang-markdown .blockquote, |
||||
code.lang-markdown .bullet { |
||||
color: #bbb; |
||||
} |
||||
|
||||
/* Tomorrow Theme */ |
||||
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */ |
||||
/* Original theme - https://github.com/chriskempson/tomorrow-theme */ |
||||
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */ |
||||
.tomorrow-comment, pre .comment, pre .title { |
||||
color: #8e908c; |
||||
} |
||||
|
||||
.tomorrow-red, pre .variable, pre .attribute, pre .tag, pre .regexp, pre .ruby .constant, pre .xml .tag .title, pre .xml .pi, pre .xml .doctype, pre .html .doctype, pre .css .id, pre .css .class, pre .css .pseudo { |
||||
color: #c82829; |
||||
} |
||||
|
||||
.tomorrow-orange, pre .number, pre .preprocessor, pre .built_in, pre .literal, pre .params, pre .constant { |
||||
color: #f5871f; |
||||
} |
||||
|
||||
.tomorrow-yellow, pre .class, pre .ruby .class .title, pre .css .rules .attribute { |
||||
color: #eab700; |
||||
} |
||||
|
||||
.tomorrow-green, pre .string, pre .value, pre .inheritance, pre .header, pre .ruby .symbol, pre .xml .cdata { |
||||
color: #718c00; |
||||
} |
||||
|
||||
.tomorrow-aqua, pre .css .hexcolor { |
||||
color: #3e999f; |
||||
} |
||||
|
||||
.tomorrow-blue, pre .function, pre .python .decorator, pre .python .title, pre .ruby .function .title, pre .ruby .title .keyword, pre .perl .sub, pre .javascript .title, pre .coffeescript .title { |
||||
color: #4271ae; |
||||
} |
||||
|
||||
.tomorrow-purple, pre .keyword, pre .javascript .function { |
||||
color: #8959a8; |
||||
} |
||||
@ -0,0 +1,65 @@
@@ -0,0 +1,65 @@
|
||||
--- |
||||
title: Examples |
||||
template: layout.jade |
||||
--- |
||||
|
||||
## Hello World Walkthrough |
||||
|
||||
[Full source](https://github.com/mozilla/pdf.js/tree/master/examples/helloworld) |
||||
|
||||
PDF.js heavily relies on the use of [Promises](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise). If promises are new to you, it's recommended you become familiar with them before continuing on. |
||||
|
||||
### Document |
||||
|
||||
The object structure of PDF.js loosely follows the structure of an actual PDF. At the top level there is a document object. From the document, more information and individual pages can be fetched. To get the document: |
||||
|
||||
```js |
||||
PDFJS.getDocument('helloworld.pdf') |
||||
``` |
||||
|
||||
Remember though that PDF.js uses promises, so the above will return a promise that is resolved with the document object. |
||||
|
||||
```js |
||||
PDFJS.getDocument('helloworld.pdf').then(function(pdf)) { |
||||
// you can now use *pdf* here |
||||
}); |
||||
``` |
||||
|
||||
### Page |
||||
Now that we have the document, we can get a page. Again, this uses promises. |
||||
|
||||
```js |
||||
pdf.getPage(1).then(function(page) { |
||||
// you can now use *page* here |
||||
}); |
||||
``` |
||||
|
||||
### Rendering the Page |
||||
Each PDF page has its own viewport which defines the size in pixels(72DPI) and initial rotation. By default the viewport is scaled to the original size of the PDF, but this can be changed by modifying the viewport. When the viewport is created an initial transformation matrix will also be created that takes into account the desired scale, rotation, and it transforms the coordinate system (the 0,0 point in PDF documents the bottom-left whereas canvas 0,0 is top-left). |
||||
|
||||
```js |
||||
var scale = 1.5; |
||||
var viewport = page.getViewport(scale); |
||||
|
||||
var canvas = document.getElementById('the-canvas'); |
||||
var context = canvas.getContext('2d'); |
||||
canvas.height = viewport.height; |
||||
canvas.width = viewport.width; |
||||
|
||||
var renderContext = { |
||||
canvasContext: context, |
||||
viewport: viewport |
||||
}; |
||||
page.render(renderContext); |
||||
``` |
||||
|
||||
Alternatively, if you want the canvas to render to a certain pixel size you could do the following: |
||||
|
||||
```js |
||||
var desiredWidth = 100; |
||||
var viewport = page.getViewport(1); |
||||
var scale = desiredWidth / viewport.width; |
||||
var scaledViewport = page.getViewport(scale); |
||||
``` |
||||
|
||||
|
||||
|
After Width: | Height: | Size: 32 KiB |
@ -0,0 +1,14 @@
@@ -0,0 +1,14 @@
|
||||
--- |
||||
title: PDF.js |
||||
template: layout.jade |
||||
--- |
||||
|
||||
|
||||
<h1 class="text-center">PDF.js</h1> |
||||
<p class="text-center" style="font-size: 20px">A general-purpose, web standards-based platform for parsing and rendering PDFs. |
||||
</p> |
||||
<p class="text-center"> |
||||
<a type="button" class="btn btn-lg btn-default" href="getting_started/#download">Download</a> |
||||
<a type="button" class="btn btn-lg btn-default" href="web/viewer.html">Demo</a> |
||||
<a type="button" class="btn btn-lg btn-default" href="https://github.com/mozilla/pdf.js">Github Project</a> |
||||
</p> |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,15 @@
@@ -0,0 +1,15 @@
|
||||
module.exports = (env, callback) -> |
||||
count = (string, substr) -> |
||||
num = pos = 0 |
||||
return 1/0 unless substr.length |
||||
num++ while pos = 1 + string.indexOf(substr, pos) |
||||
num |
||||
|
||||
env.helpers.makeRelative = (source, dest) -> |
||||
return dest unless dest.indexOf("/") == 0 |
||||
depth = count(source, '/') # 1 being / |
||||
ret = "" |
||||
ret += "../" while depth = depth - 1 |
||||
ret + dest.substr(1) |
||||
|
||||
callback() |
||||
@ -0,0 +1,52 @@
@@ -0,0 +1,52 @@
|
||||
- makeRelative = env.helpers.makeRelative |
||||
doctype html |
||||
html(lang='en') |
||||
head |
||||
meta(charset='utf-8') |
||||
meta(name='viewport', content='width=device-width, initial-scale=1.0') |
||||
meta(name='description', content='') |
||||
meta(name='author', content='') |
||||
link(rel='shortcut icon', href=makeRelative(page.url, '/images/favicon.ico')) |
||||
title=page.title |
||||
// Bootstrap core CSS |
||||
link(href=makeRelative(page.url, '/css/bootstrap.min.css'), rel='stylesheet') |
||||
// Custom styles for this template |
||||
link(href=makeRelative(page.url, '/css/main.css'), rel='stylesheet') |
||||
|
||||
body |
||||
header.navbar.navbar-default.navbar-static-top |
||||
.container |
||||
.navbar-header |
||||
button.navbar-toggle(type='button', data-toggle='collapse', data-target='.navbar-collapse') |
||||
span.icon-bar |
||||
span.icon-bar |
||||
span.icon-bar |
||||
a.navbar-brand(href='#') |
||||
img(src=makeRelative(page.url, '/images/logo.svg')) |
||||
.collapse.navbar-collapse |
||||
ul.nav.navbar-nav |
||||
li(class=(page.url === '/' ? 'active' : '')) |
||||
a(href=makeRelative(page.url, '/')) Home |
||||
li(class=(page.url === '/getting_started/' ? 'active' : '')) |
||||
a(href=makeRelative(page.url, '/getting_started/')) Getting Started |
||||
li(class=(page.url === '/examples/' ? 'active' : '')) |
||||
a(href=makeRelative(page.url, '/examples/')) Examples |
||||
li |
||||
a(href='https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions') FAQ |
||||
li(class=(page.url === '/api/' ? 'active' : '')) |
||||
a(href=makeRelative(page.url, '/api/')) API |
||||
|
||||
.container |
||||
.starter-template |
||||
section.content!= typogr(page.html).typogrify() |
||||
|
||||
.container |
||||
footer |
||||
p ©Mozilla and individual contributors |
||||
:markdown |
||||
PDF.js is licensed under [Apache](https://github.com/mozilla/pdf.js/blob/master/LICENSE), |
||||
documentation is licensed under [CC BY-SA 2.5](http://creativecommons.org/licenses/by-sa/2.5/) |
||||
|
||||
// Bootstrap core JavaScript |
||||
script(src=makeRelative(page.url, '/js/jquery-2.1.0.min.js')) |
||||
script(src=makeRelative(page.url, '/js/bootstrap.min.js')) |
||||
Loading…
Reference in new issue