7

次のような base64 文字列から PDF を埋め込んでいます。

var pdfData = 'data:application/pdf;filename=MY_CUSTOM_FILENAME.pdf;base64,' +
  'JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog' +
  'IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv' +
  'TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K' +
  'Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg' +
  'L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+' +
  'PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u' +
  'dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq' +
  'Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU' +
  'CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu' +
  'ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g' +
  'CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw' +
  'MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v' +
  'dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G';

function loadPdf() {
  var pdf= document.querySelector('.pdf')

  var pobj = document.createElement('object')
  pobj.className= "pdf_object"
  pobj.setAttribute('data', pdfData)
  pobj.setAttribute('type', 'application/pdf')

  pdf.appendChild(pobj)
} 
.pdf_object {
  width: 100%;
  height: 700px;  
}
<div>
  <button onclick="loadPdf();">
    CLICK TO LOAD BELOW THE PDF
  </button>
</div>
<div class="pdf"></div>

これは、Firefox と Chrome の両方で機能します。

私の問題は、pdf ダウンロード アクションのファイル名をカスタマイズできないことです。filenameパラメーター ( 'data:application/pdf;filename=MY_CUSTOM_FILENAME.pdf;...) を使用していますが、無視されていることに注意してください。

Firefox では、次の警告が表示されます (関連するコードはこちら)。

「getPDFFileNameFromURL: パフォーマンス上の理由から、"data:" URL を無視します。」

また、pdf のファイル名はデフォルトですdocument.pdf。

Chrome では警告は表示されませんが、ファイル名はデフォルトのままですdownload.pdf。

では、どうすればファイル名をカスタマイズできますか? それは可能ですか？

私はこれらの方法を試しましたが、失敗しました:

  • 基本的にこの投稿で行っていることを行うライブラリであるPDFObjectをチェックしました（これを書いているときに発見しました！）が、ファイル名のカスタマイズは許可されていないようです。

  • に pdf を読み込んで、<iframe>そのコンテンツを操作しようとしました。しかし、(少なくとも Firefox では) Cross Origin エラーが発生します

  • Mozilla の PDF ビューアー ( PDF.js ) もContent-Dispositionヘッダーをチェックして、pdf のファイル名を推測しているようです。HTTPリクエストを何らかの方法でシミュレートし（base64文字列を使用しているため、常にブラウザーでローカルに）、それを使用してpdfビューアーをロードすることは可能でしょうか?

PDF.jsを直接使用することで解決できることはわかっていますが、可能であれば、この依存関係を避けたいと思います (また、コーディングも実装が簡単ではないため)。最後に、ファイル名をカスタマイズしたいだけです!

ありがとう！

編集: 以下のコード スニペットは Chrome では機能しません (「data:application/pdf;filename=MY_CUSTOM_FILENAME.pdf;base64,....」をプラグインとして読み込むことができませんでした。プラグインが読み込まれているフレームがサンドボックス化されているためです。 .) ですが、plan .html ファイルを開くと機能します。

編集 2: 解決策を見つけましたが、Firefox でのみ動作します。

ここで説明されbase64ているように文字列をに変換し、これを Url に変換して、この URL にパラメーターを追加します (ここで説明されているように「#」を使用)。Blob Blobfilename

したがって、loadPdf()関数は次のとおりです。

function loadPdf() {
  fetch(pdfData)
    .then(res => res.blob())
    .then(blob => {
      try {
        var blobUrl = URL.createObjectURL(blob)
        // This line makes Chrome crash, we have to remove it there
        // But it works on Firefox
        blobUrl+= '#filename=MY_CUSTOM_FILENAME.pdf'

        var pdf= document.querySelector('.pdf')
        var pobj = document.createElement('object')
        pobj.className= "pdf_object"
        pobj.setAttribute('data', blobUrl)
        pobj.setAttribute('type', 'application/pdf')

        pdf.appendChild(pobj)
      } catch(e) {
        console.error(e)
      }
  })
}

Firefox の Pdf ビューアーからダウンロードすると、MY_CUSTOM_FILENAME.pdf が正常に表示されます。

しかし Chrome では、Blob URL のハッシュが表示されます。と：

この観点からの他のヒントはありますか？

4

0 に答える 0