JavaScript を使用してサーバーに .png ファイルをダウンロードし、別のファイル拡張子 (.pdf) を持つ新しいファイルを作成します。

Question

<p>私のウェブサイトのコードは、非常に扱いにくく、安っぽいバックエンドに保存されています。残念ながら、コンテンツ ヘッダーは非常に厳重にロックされており、<strong>.pdf</strong> で終わるファイル リンクには UI ダウンロード プロンプト経由でのみアクセスでき、ブラウザの表示</ で <strong> を許可することはできません。強力な>PDFファイル。 私の現在の考えは、ファイルをサーバーにアップロードして、ファイル名を file.pdf.png に変更できるのではないかということです (これは、サーバーのコンテンツヘッダー条件を満たして .png ファイルタイプのように見せることで許可されるようです)ファイルを メモリ にコピーします)。次に、ファイルをダウンロード可能 (<strong>メモリ内</strong>) にして、JavaScript で新しいファイルを作成できるようにしたいと考えています。他の場所で提案されているアプローチの 1 つは、破損した .png ファイルのコンテンツを Base64 でエンコードし、デコードされた Base64 コンテンツに基づいて JavaScript で新しいファイルを作成し、それに <strong>.pdf</strong> という拡張子名を付けるというものです。 PDF ファイルとして機能し、メモリに保存されるため、ユーザーはデバイスに何もダウンロードする必要がありません。最終的な目標は、メモリ内のファイルを (ユーザーのバックエンドから) 取得し、ブラウザーの組み込み PDF ビューアを使用して表示することです。 </p> <p>//サーバーにはファイルをアップロードするオプションがあります //アップロードするものは実際には PDF ファイルですが、末尾に .png 拡張子が追加されていると仮定すると、 //したがって、これらのファイルへのリンクは https://the-website.com/file.pdf.png</p> のようになります。 <p>//次に、このファイルをバックグラウンドで取得できるようにする必要があります。できればユーザーが UI ダウンロード ポップアップを操作する必要がないように、ファイルをメモリ内に保持できるようにする必要があります。 </p> <p>//次に、何らかの方法でファイルの内容 (file.pdf.png) を抽出し、疑似ファイル拡張子を持つファイルに基づいて有効な PDF ファイルを作成する必要があります。結果のファイルは file.pdf になるはずです。 。 <embed /> や <object> など、さまざまなブラウザで PDF を表示するのに最適なものを使用して Web ページで表示できるように、このファイルをメモリに保存する必要がありますが、強制することはできませんユーザーは UI ポップアップを入力するか、デバイスにダウンロードします (メモリ内でのみ作業したいのですが)。 <p><br /></p></object></p>

Answer 1

ファイル拡張子は実際にはこれとはあまり関係ありません... Content-Typeヘッダーは関係します。

あなたの説明に基づくと、PDF ファイルを取得するときに、サーバーは応答で正しいタイプを使用せず、代わりに application/octet-stream または他のタイプとして送信していると推測します。 (これは一般的なタイプであり、ブラウザはデフォルトでダウンロードします。)

この問題を解決するにはいくつかの方法があります。 1 つの方法は、ServiceWorker を使用して、必要に応じて Content-Type ヘッダーをオーバーライドすることです。ただし、これが常に機能するとは限りません。ページが強制的にリロードされたとき、またはプライバシー モードが有効になっているとき、ブラウザは Service Worker を無効にすることがよくあります。

あなたが提案したものに近い別のアプローチは、JavaScript でメモリ内の PDF を取得することです。これは、Fetch API を使用して実行し、Blob URL を作成してブラウザーにダウンロードさせることができます。まだテストされていませんが、おおよそ次のとおりです:

リーリー

これは、特に大きなドキュメントの場合は機能しない可能性があることに注意してください。小さな書類でも問題ありません。

また、すべてのブラウザが PDF を表示できるわけではなく、すべてのシステムがブラウザ自体で PDF を表示できるように構成されているわけではないことにも注意してください。