2012-02-17 69 views
80

私はpdf.js(ウェブページにpdfを埋め込むオープンソースのツール)の使用を検討しています。それを使用する方法に関するドキュメントはありません。pdf.jsの使い方

ヘッダーで参照されているスクリプトを使ってhtmlページを作成し、本文にファイル名と場所の配列を使用して関数呼び出しを行います。誰でもここで私を助けることができますか?

+0

### Githubの記事を私はちょうど記事[サイト内のセットアップPDF.js](https://github.com/mozilla/pdf.js/wiki/Setup-PDFを開始しました.js-in-a-website)をGitHubのプロジェクトwikiに追加してください。 ###完了のリクエスト経験がある場合は、記事を完成させてください。 –

+6

私は同じことを探していた。私はこれがpdf.jsを設定するための最も詳細なウォークスルーであることがわかりました。がんばろう! http://www.worldwidewhat.net/2011/08/render-pdf-files-with-html5/ – Raj

+0

http://viewerjs.org/のようなより高度なものは、おそらくあなたが望むものです。 – max

答えて

32

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}); 

注:ここに記載 "pdf.js" プロジェクトはhttps://github.com/Marak/pdf.jsであり、この答えが投稿されたため廃止されました。 @ Treffynnonの答えは、ほとんどの検索者が探しているまだアクティブなMozillaプロジェクト(https://github.com/mozilla/pdf.js)についてです。

+0

私はそれを見ましたが、私はvar = filenameの上のものについて混乱しています。 doc.textにそのdo​​c.addPage()が必要ですか?その上に3つのdoc.textがありますか? – Chris

+0

別の質問は、私は何を変えなければならないのでしょうか。私は変更しなければならない最後の行の最初の "ファイル名"とdocプロパティを仮定します。それですか? – Chris

+19

これは別のpdf.jsですか? – Swiss

47

github readmeのドキュメントがあります。彼らは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

それは十分に文書化されていませんが、pdf.js zipを抽出して、そのディレクトリ構造はそのままです。次にpdfを見るには、ファイルを最後に追加してviewer.htmlファイル(ブラウザ経由)に移動します。 E。 yoursite.com/directory_that_viewer_._html_is_in/viewer.html?file=somepdfthatyouhave.pdf pdfの場所は、GET変数としてviewer.htmlファイルに渡されただけです。 –

+1

[github wiki](https://github.com/mozilla/pdf.js/wiki/Setup-PDF.js-in-a-website)から:* "しかし、あなたがあなた自身のサイトのビューアで、変更されていないだけのものではないことを覚えておいてください。 .js/api /)このプロジェクトは、あなたが形にとどまるのに十分なフープを飛び越えるようにします:\ – Philzen