数時間でPDFビューアーを作成

長い間、彼らはQtについて書いていませんでした。そのため、シンプルだが強力なことをします。 このフレームワークは10年以上前に作成されましたが(20すぐ)、Qtコミュニティの努力のおかげで、引き続き喜ばれ、驚かされます。



デスクトップアプリケーションとWebプログラミングを作成するための技術の接点で、少し努力してアプリケーション開発の例を示したいと思います。



数週間前、私は将来の自動化とスクリプト作成の可能性を考慮して、特定のPDFドキュメントを画像に変換する方法を探していました。 もちろん、古いタイマー-変換ユーティリティを備えたImageMagicパッケージもありますが、残念ながら、このツールがこれらのファイルで期待したほど良くないという事実に遭遇しました。



私は他のツールを探し始めました。多くのさまざまなユーティリティがありますが、それぞれに独自の特性があるため、どのツールを使用するかはまだ選択していません。



代わりに、かなり成熟したテクノロジーとしてQtが役立ちますか? Qtでは、QPrinterを使用してPDFドキュメントを作成するのは非常に簡単ですが、逆の機能(PDFページから画像を作成する)はどうですか? しかし、よく開発された別のテクノロジーがあります-PDF.js。



これらの2つの技術を組み合わせることができますか? もちろん! QtにはQWebEngineViewコンポーネントがあります。 コードで示す:



QMainWindowに基づいて高速で:



m_webView = new QWebEngineView(this); m_webView->load(url); setCentralWidget(m_webView);
      
      





結果は、Webページが内部にあるウィンドウになります。 現在はPDF.jsです。 プロジェクトにはかなり大量のコードがありますが、Webサイトに簡単に統合できるコンパクトな(縮小された)バージョンを構築することは可能です。 組み立て例:



 $ git clone git://github.com/mozilla/pdf.js.git $ cd pdf.js $ brew install npm $ npm install -g gulp-cli $ npm install $ gulp minified
      
      





その結果、build / minifiedフォルダーにpdf.jsの「コンパイル済み」バージョンが作成され、プロジェクトにコピーされます。 開始URLをローカルファイルminified / web / viewer.htmlに設定します



 auto url = QUrl::fromLocalFile(app_path+"/minified/web/viewer.html");
      
      





ビルドして実行:

画像

うまく機能し、アプローチは正しいですが、デフォルトのPDFファイルが表示されます。 javascriptにファイル名を渡すにはどうすればよいですか? このため、Qtには別の優れたQWebChannelモジュールがあります。 これは、C ++ / Qt側でQWebChannelオブジェクトが作成され、ロードされたWebページのチャネルによって設定されるという考え方です。 このチャネルを使用すると、JavaScriptコード内ですでに使用可能なオブジェクトを登録できます。 JavaScriptから、Q_PROPERTYプロパティが表示されます。



 auto url = QUrl::fromLocalFile(app_path+"/minified/web/viewer.html"); m_communicator = new Communicator(this); m_communicator->setUrl(pdf_path); m_webView = new QWebEngineView(this); QWebChannel * channel = new QWebChannel(this); channel->registerObject(QStringLiteral("communicator"), m_communicator); m_webView->page()->setWebChannel(channel); m_webView->load(url); setCentralWidget(m_webView);
      
      





上記のコードにより、JavaScriptからコミュニケーターオブジェクトにアクセスできます。 次に、viewer.html / viewer.jsに変更を加える必要があります。標準のqwebchannel.jsを追加して、コミュニケーションを機能させます-それは非常に簡単です:



viewer.htmlの場合、qwebchannel.jsを含めるだけで追加できます。 viewer.jsの場合、QWebChannelの初期化を追加し、デフォルトファイルの代わりに使用されるチャネルからファイル名を取得します。



コード:



 var DEFAULT_URL = 'compressed.tracemonkey-pldi-09.pdf'; new QWebChannel(qt.webChannelTransport ,function(channel) { var comm = channel.objects.communicator; DEFAULT_URL = comm.url; ...
      
      





仕組みは次のとおりです。ページがロードされる前に、Webチャネルが接続され、コミュニケーターオブジェクトが登録されます。 その後、viewer.htmlが初めてロードされると、QWebChannel JSクラスが定義されます。 DEFAULT_URLを定義した後、JS QWebChannelオブジェクトが作成され、通信が確立されるとすぐに、コミュニケーターオブジェクトからURLを読み取る添付されたjs関数が呼び出されます。 サンプルファイルの代わりに新しいURLが使用されます。 同様に、レンダリングされたページをJavaScriptから画像としてアプリケーションのC ++ / Qt部分に転送できます。



PDF.jsの変更が完了したら、縮小したものを再構築します。



 $ gulp minified
      
      





縮小版をプロジェクトフォルダーにコピーします。 コマンドライン引数などからファイルのリストを取得してみましょう。

画像

完了、数時間で機能するデスクトップPDFビューアーアプリケーション。



GitHub



All Articles