2012-02-17 5 views
80

Rozważam użycie narzędzia pdf.js (narzędzia open source, które umożliwia osadzanie pliku PDF na stronie). Nie ma żadnej dokumentacji, jak z niego korzystać.Jak korzystać z pdf.js

Zakładam, że robię stronę html ze skryptem, do którego odwołuję się w nagłówku, a następnie w treści, umieszczam jakieś wywołanie funkcji z tablicą nazwy pliku i lokalizacji. Czy ktoś może mi pomóc?

+0

### GitHub art Właśnie rozpoczął artykuł [PDF.js konfiguracji na stronie internetowej] (https://github.com/mozilla/pdf.js/wiki/Setup-PDF .js-in-a-website) na wiki projektu na GitHub. ### Wniosek o wypełnienie Jeśli masz jakieś doświadczenie, proszę uzupełnij artykuł. –

+6

Szukałem tego samego. Uważam, że jest to najdokładniejsze przejście do konfiguracji pdf.js, od początku do końca. Powodzenia! http://www.worldwidewhat.net/2011/08/render-pdf-files-with-html5/ – Raj

+0

Coś bardziej wysokiego poziomu, jak http://viewerjs.org/, jest prawdopodobnie tym, czego potrzebujesz. – max

Odpowiedz

32

Spróbuj Google'ing pdf.js documentation

/* 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.'); 

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

UWAGA: z "PDF.js" projekt wspomniano tutaj jest https://github.com/Marak/pdf.js i została zaniechana, ponieważ ta odpowiedź została wysłana. @ Odpowiedź Treffynnona dotyczy wciąż aktywnego projektu Mozilla (https://github.com/mozilla/pdf.js), którego większość wyszukiwarek będzie szukała.

+0

Widziałem, ale jestem zdezorientowany co do rzeczy powyżej var = filename. Czy potrzebuję któregokolwiek z tych dokumentów doc.addPage() do doc.text, a hte potrójne doc.texts powyżej? – Chris

+0

Kolejne pytanie to, co muszę zmienić. Zakładam, że "nazwa pliku" ostatniej linii, którą muszę zmienić, oraz właściwości dokumentu. Czy to to? – Chris

+19

Czy to nie jest inny plik pdf.js? – Swiss

47

Dostępna jest dokumentacja dotycząca ich github readme. Oni przytoczyć following example code:

/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */ 
/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */ 

// 
// See README for overview 
// 

'use strict'; 

// 
// Fetch the PDF document from the URL using promises 
// 
PDFJS.getDocument('helloworld.pdf').then(function(pdf) { 
    // Using promise to fetch the page 
    pdf.getPage(1).then(function(page) { 
    var scale = 1.5; 
    var viewport = page.getViewport(scale); 

    // 
    // Prepare canvas using PDF page dimensions 
    // 
    var canvas = document.getElementById('the-canvas'); 
    var context = canvas.getContext('2d'); 
    canvas.height = viewport.height; 
    canvas.width = viewport.width; 

    // 
    // Render PDF page into canvas context 
    // 
    var renderContext = { 
     canvasContext: context, 
     viewport: viewport 
    }; 
    page.render(renderContext); 
    }); 
}); 
+14

To nie jest dobrze udokumentowane, ale wyodrębniasz plik pdf.js i pozostawiasz jego strukturę katalogową nietkniętą. Następnie, aby wyświetlić plik PDF, po prostu przejdź do pliku viewer.html (przez przeglądarkę) z dołączonym plikiem na końcu. Dawny. yoursite.com/directory_that_viewer_._html_is_in/viewer.html?file=somepdfthatyouhave.pdf Lokalizacja pdf jest po prostu przekazywana jako zmienna GET do pliku viewer.html. –

+1

Z [github wiki] (https://github.com/mozilla/pdf.js/wiki/Setup-PDF.js-in-a-website): * "Pytamy jednak, czy masz zamiar osadzić w swojej własnej witrynie, że nie jest to tylko niezmodyfikowana wersja, proszę ponownie ją skalować lub zbudować na niej. "* - biorąc pod uwagę ich ohydnie nieistniejącą dokumentację [api] (http://mozilla.github.io/pdf .js/api /) ten projekt pozwala przeskoczyć wystarczająco dużo kół, aby pozostać w formie: \ – Philzen