質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

2354閲覧

PDF.jsでPDFViewerApplication is not definedが出力される

jesuissuyaa

総合スコア18

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/07/04 08:02

PDF.jsで自作のPDFあのテーターを作成しています。
https://github.com/mozilla/pdf.jsの
https://mozilla.github.io/pdf.js/build/pdf.js
https://mozilla.github.io/pdf.js/build/pdf.worker.js
を直接ローカルに落としてスクリプトを書いています。

選択されたテキストを取得するために、以下のコードを追加したのですが、PDFViewerApplicationが定義されていないと出力されました。

javascript

1function getHightlightCoords() { 2var pageIndex = PDFViewerApplication.pdfViewer.currentPageNumber - 1; 3var page = PDFViewerApplication.pdfViewer.getPageView(pageIndex); 4var pageRect = page.canvas.getClientRects()[0]; 5var selectionRects = window.getSelection().getRangeAt(0).getClientRects(); 6var viewport = page.viewport; 7var selected = selectionRects.map(function (r) { 8 return viewport.convertToPdfPoint(r.left - pageRect.x, r.top - pageRect.y).concat( 9 viewport.convertToPdfPoint(r.right - pageRect.x, r.bottom - pageRect.y)); 10}); 11return {page: pageIndex, coords: selected}; 12} 13 14function showHighlight(selected) { 15var pageIndex = selected.page; 16var page = PDFViewerApplication.pdfViewer.getPageView(pageIndex); 17var pageElement = page.canvas.parentElement; 18var viewport = page.viewport; 19selected.coords.forEach(function (rect) { 20 var bounds = viewport.convertToViewportRectangle(rect); 21 var el = document.createElement('div'); 22 el.setAttribute('style', 'position: absolute; background-color: pink;' + 23 'left:' + Math.min(bounds[0], bounds[2]) + 'px; top:' + Math.min(bounds[1], bounds[3]) + 'px;' + 24 'width:' + Math.abs(bounds[0] - bounds[2]) + 'px; height:' + Math.abs(bounds[1] - bounds[3]) + 'px;'); 25 pageElement.appendChild(el); 26}); 27}

####やってみたこと
"PDFViewerApplication"をリポジトリ内で検索
https://github.com/mozilla/pdf.js/search?q=pdfviewerapplication&unscoped_q=pdfviewerapplication

web/app.jsをダウンロード、
import { PDFViewerApplication } from './app';
を追記
→ { でシンタックスエラーが出る

####知りたいこと

  • どうしたらエラーが治り、PDFViewerApplicationが使えるようになるのか
  • 一般的に、pdf.jsのようにいくつものコンポーネントに分かれているとき、どうしたらモジュールを個別に使えるのか
  • そもそもモジュールが何なのかよくわからない(調べましたがよくわかりませんでした)

よろしくお願いします。

PDFViewerApplicationがどこで定義されているのかをリポジトリ内で検索したところ、

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問