2011 09-pdfjs
0 likes732 views
pdf.js is a JavaScript library for rendering PDF files in HTML5. It parses PDF files without using native code by building an internal representation of drawing commands, fonts, images, and other objects. These objects are loaded and the commands are executed to render pages onto a canvas using HTML5 technologies. Key challenges include accurately rendering complex fonts, improving performance, and supporting more advanced PDF features like forms and printing. The library is open source and the developer is working on improving font handling, speed, and test coverage.
![How PDF is structured
Header PDF version
sequence of objets
Body
[Objects] fonts, drawing cmds, images,
words, bookmarks, form fields
xRef Table mapping objID byte offset
Trailer root objID, xRef byte offset
PDF file root obj = ref to pages catalog](https://image.slidesharecdn.com/2011-09-pdfjs-111003142632-phpapp01/85/2011-09-pdfjs-4-320.jpg)
![1. page=PDFDoc.getPage(2) 5 0 obj
stream maybe
➟ obj#3 << encoded!
/Length 8 0 R
2. page.startRendering(...) >>
➟ obj#4, obj#5 stream
/GS1 gs
/F0 12 Tf
3 0 obj BT
<< 100 700 Td
/Type /Page (Hello World!) Tj
/MediaBox
0 612 792]
[0 ET
/Resources
4 0 R 50 600 m
/Parent
2 0 R 400 600 l
/Contents
5 0 R S
>> endstream
endobj endobj](https://image.slidesharecdn.com/2011-09-pdfjs-111003142632-phpapp01/85/2011-09-pdfjs-6-320.jpg)
![xRef, catalog, IR
5 0 obj + resources PartialEvaluator Form
<<
/Length 8 0 R
>> setGState:
[ LW: 10 ]
stream dependency:
[ font0 ]
/GS1 gs setFont:
font0, 12
/F0 12 Tf beginText
BT moveText:
100, 700
100 700 Td showText:
“Hello World!”
(Hello World!) Tj endText
ET moveTo:
50, 600
50 600 m lineTo:
400, 600
400 600 l stroke
S
endstream
endobj CanvasGraphics](https://image.slidesharecdn.com/2011-09-pdfjs-111003142632-phpapp01/85/2011-09-pdfjs-7-320.jpg)
2011 09-pdfjs
- 1. pdf.js Julian Viereck @jviereck
- 2. Overview • What is pdf.js • How PDF is structured • Processing in pdf.js • Images & Fonts • Problems • Todo • Demo
- 3. What is pdf.js • building faithful & efficient PDF renderer • HTML5 technology experiment • no native code • secure (web sandbox) • Mozilla Labs Project - Open Source
- 4. How PDF is structured Header PDF version sequence of objets Body [Objects] fonts, drawing cmds, images, words, bookmarks, form fields xRef Table mapping objID byte offset Trailer root objID, xRef byte offset PDF file root obj = ref to pages catalog
- 5. Processing in pdf.js • get plain Uint8Array via XHR2, build Stream • new PDFDoc(stream): read xRef, root object • page = PDFDoc.getPage(N) Internal • page.startRendering(graphics) Representation • read & convert all PDF cmds ➟ IR PartialEvaluator • load required objects (fonts, images) • graphics.executeIR(IR) CanvasGraphics
- 6. 1. page=PDFDoc.getPage(2) 5 0 obj stream maybe ➟ obj#3 << encoded! /Length 8 0 R 2. page.startRendering(...) >> ➟ obj#4, obj#5 stream /GS1 gs /F0 12 Tf 3 0 obj BT << 100 700 Td /Type /Page (Hello World!) Tj /MediaBox 0 612 792] [0 ET /Resources 4 0 R 50 600 m /Parent 2 0 R 400 600 l /Contents 5 0 R S >> endstream endobj endobj
- 7. xRef, catalog, IR 5 0 obj + resources PartialEvaluator Form << /Length 8 0 R >> setGState: [ LW: 10 ] stream dependency: [ font0 ] /GS1 gs setFont: font0, 12 /F0 12 Tf beginText BT moveText: 100, 700 100 700 Td showText: “Hello World!” (Hello World!) Tj endText ET moveTo: 50, 600 50 600 m lineTo: 400, 600 400 600 l stroke S endstream endobj CanvasGraphics
- 8. Images • JPEG streams: • DOMImg.src = 'data:image/jpeg;base64,' + window.btoa(bytesToString(bytes)); • If not JPEG stream: • read bytes, convert to colorspace • imgData = canvas.getImageData() • fillWithPixelData(bytes, imgData) • canvas.putImageData(imgData)
- 9. Fonts • There are lots of different font formats! • fonts are converted to OpenType • use CSS: @font-face { font-family:'font0'; src:url (data:font/opentype;base64, ...) • some fonts can’t be converted :( • use drawing commands?
- 10. Problems platform = browser + OS • No way to detect font is loaded (hacks) • Font width (wrong on some platforms) • Subpixel font size depending on platform • Text selection • Printing • Speed • use workers (postMessage lose shape) • partial rendering
- 11. Todo • more font work, printing, speed • support more rendering spec • explore using SVG • PDF forms, “advanced PDF features” • infrastructure: automated testing, requireJS • test more PDF (need your help!)
- 12. Demo
- 13. Contact Github: https://github.com/andreasgal/pdf.js Mailing list: https://groups.google.com/group/ mozilla.dev.pdf-js/topics IRC: irc.mozilla.org #pdfjs