pdf.jsの使用方法[終了]


92

私はpdf.js(Webページにpdfを埋め込むことができるオープンソースツール)の使用を検討しています。使い方のドキュメントはありません。

私がやっていることは、ヘッダーで参照されているスクリプトを使用してhtmlページを作成し、本文にファイル名と場所の配列を含む関数呼び出しを配置することだと思います。誰かがここで私を手伝ってくれる?


1
### Github記事GitHubのプロジェクトWikiのWebサイトで記事Setup PDF.jsを開始しました。###完了のリクエストある程度の経験がある場合は、記事に記入してください。
エドゥアールロペス

おそらく、viewerjs.orgのようなより高レベルなものが望ましいでしょう。
最大

PDFから埋め込みXMLファイルを抽出したいのですが、それを行う方法はありますか?
Ananta Prasad

回答:


33

Googleを試してみる 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)に関するものです。


私はそれを見ましたが、var = filenameの上にあるものについて混乱しています。doc.textにdoc.addPage()が必要で、その上にトリプルdoc.textsが必要ですか?
クリス

別の質問は、私が何を変えなければならないかです。最後の行の最初に変更する必要がある「ファイル名」と、ドキュメントのプロパティを想定しています。それですか?
クリス

25
これは別のpdf.jsではありませんか?
スイス、

@スイス、これは2月からの投票で、回答としてマークされています。これはOPが探していたものだと思います。
James Hill、

14
ええ、それがとても混乱した理由です。opはpdfをhtmlとして表示するためのmozillaプロジェクトを参照しているようですが、リンク先のブログで参照されているプロジェクトは、javascriptを使用してpdfファイルを作成するための別のプロジェクトです。
スイス

50

github readmeにドキュメントがあります。彼らは次のサンプルコードを引用します

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

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

4
github wikiから:「しかしながら、あなたがあなた自身のサイトにビューアーを埋め込むつもりであるかどうか尋ねます、それは単に修正されていないバージョンではないことです。それを再スキンするか、それに基づいて構築してください。」-恐ろしく存在しないapiドキュメントが与えられた場合、このプロジェクトにより、形を保つのに十分なフープを飛び越えることができます:\
Philzen
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.