Clever Geek Handbook

2時間でPDFまたはサービスへのページ

あなたはケシを持っていません、そして再びあなたは着信メッセージにページを見つけましたか？ それらの何が問題になっていますか？

前回、「iPagesの閲覧方法」を徹底的に検索した結果、シンプルでエレガントなソリューションが見つかりました。 そして、心に留めておいてください、これは衛星誘導チェーンソーではありません。







1. .zipの拡張子の名前を変更します

2.結果のアーカイブを開き、その中のpdfファイルを見つけます

3.利益！



これだけでやめたと思いますか？ 私たちは非常に刺激を受けて、自動変換のためにサービスを洗い流したので、 収益化スキームを検討しています。



カットの下に、その仕組みの詳細な説明があります。





実際、MacOSの一部の形式と同様に、.pagesは特別なプレビューデータを.pdf形式で保存します。



バックエンドで処理するのではなく、実装で退屈しないように、jsでマッスルを使用することにしました。

はい、このため、コンバーターはIE10 + で動作しません。 URLサポートがないためです（他のすべてはエミュレートできます）。 ただし、サーバーに何もアップロードする必要はありません。すべてクライアントで動作します。つまり、即座に実行されます（また、安全で、どこにも何も送信しません）。



では、これはどのように機能しますか？



pagesはzipコンテナーです（ちなみに、docx、xslx、その他の新世代のオフィス形式など）。

彼の中には：

-index.xml-メインプレゼンテーションファイル

-buildVersionHistory.plist-メタデータを含むファイル、その機能-名前で理解可能

-QuickLook / Thumbnail.jpg-フォルダー内のプレビュー用のサムネイル画像

-QuickLook / Preview.pdf-プレビューファイル自体。スペースバーを押すとmacOSで開きます。



ドラッグアンドドロップまたは入力を通じてファイルを取得するにはどうすればよいですか-何百回も言われましたが、これは面白くないので、このステップをスキップしましょう。

このファイルを取得しました。ファイルを読み取るには、FileReaderを実行する必要があります。



ファイルを操作するスクリプトの入力形式は異なります。Blobを受け入れる人、バイナリ文字列を受け入れる人がいます。 Googleの簡単なGoogleソリューションの1つであるjs-unzipを使用しました。 シンプルさと明快さを求めました。



入力行が必要なので、FileReaderをreadAsBinaryString形式で実行します。 



if (file.type === "application/x-iwork-pages-sffpages") { var reader = new FileReader(); reader.onload = function (event) { processZip(event.target.result) }; reader.readAsBinaryString(file); }




イベント自体には有用な情報はなく、event.targetは実際にはリーダーを参照しているので、processZip（reader.result）を記述できます。

ブラウザーのほとんどすべての標準は構文が非常に似ており、FileReaderはXMLHttpRequestに注目して行われているため、すべてがかなり馴染みのあるものになります。



また、zipアーカイブの操作もスキップします。このタスク用のネットワーク上には多くのライブラリがあり、それぞれに独自の構文があります。特にこの場合、zipは単なるコンテナであり、メカニズムを解凍する必要さえありません。



一番おもしろいことは最後に起こります（読みやすくするために、このコードはサイトの内容と少し矛盾しています）： 



 var uintArray = new Uint8Array(dataString.length); for (var i = 0; i < dataString.length; i++) { uintArray[i] = dataString.charCodeAt(i) } var blob = new Blob([uintArray], {type: 'application/pdf'}); gotLink(URL.createObjectURL(blob));




ここで何が起こっていますか：

テキスト式のバイナリ文字列には、そのバイトのASCIIコードが格納されます。 同じく0から255の範囲のシングルバイトの符号なし整数から特別な型付き配列（uint8array）を作成し、バイトごとに文字列の文字の数値をそこに転送します。

これは、各数値が1バイトを格納するという事実を考慮してblobオブジェクト（jsのバイナリオブジェクト）を作成するために必要です。そうしないと、文字の解釈が異なり、ファイルが正しく生成されません。

この場合、Blob自体は入力で配列のみを受け入れるため、さらにuintArrayを通常の配列でラップする必要があります。



出力リンクにはフォーマットがないため、blobオブジェクトのMIMEタイプを追加で指定します。

そして、このサイトの最大の魔法は、



URL.createObjectURL（blob）



メモリ内のblobへのリンクを取得します。 つまり、文字通り-親ドキュメントを閉じるとすぐに、リンクは機能しなくなります。

リンクは次のようになります。



blob：http：// localhost：8005 / 4222c9ec-1c66-4143-96a8-4223482148f6



そのため、サーバーからアクセスせずに、アーカイブから別のファイルを取得してクライアントに返すことができます。

残念ながら、URL.createObjectURLからのリンクが必要ない場合-ie9のファイルを読み取るためにサーバーに頼ることができます-Blob.poly.jsが存在し、それを操作できますが、出力のbase64リンクが非常に大きいことが判明しましたブラウザは、単に新しいウィンドウでそれを開きたくないので、ハングしました。



PSバグ（OS、ブラウザーバージョン）を見つけた場合は、PMに書き込みます。 私はすぐにそれを修正することを約束します。



UPDパブリックgithubリポジトリ内のすべてのソース


More articles:


All Articles