Как настроить имя файла в браузере встроенный просмотрщик PDF для Base64 PDF - PullRequest
Новая
       33

Как настроить имя файла в браузере встроенный просмотрщик PDF для Base64 PDF

2 голосов
/ 11 марта 2020

Я встраиваю PDF-файлы из строки base64 следующим образом: 

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.

On Chrome, я не получаю предупреждения, но имя файла остается по умолчанию download.pdf.

Итак, как мне настроить имя файла? Это возможно?

Я безуспешно пробовал эти способы:

  • Проверено PDFObject , библиотека, которая делает в основном то, что я делаю в этот пост (обнаружил его во время написания этого!), но, похоже, они не позволяют настраивать имя файла.

  • Я пытался загрузить pdf на <iframe>, а затем манипулировать его содержание. Но я получаю (по крайней мере, в Firefox) ошибку перекрестного источника

  • Похоже, что средство просмотра PDF Mozilla ( PDF. js) также проверяет * Заголовок 1049 * для угадывания имени файла PDF. Можно ли каким-то образом смоделировать HTTP-запрос (всегда локально в браузере, когда я работаю со строками base64) и использовать его для загрузки средства просмотра PDF?

Я знаю, что решение может быть напрямую использовать PDF. js, но, если возможно, я бы хотел избежать этой зависимости (а также кодирования, потому что это не так просто реализовать). В конце я просто хочу настроить имя файла!

Спасибо!

РЕДАКТИРОВАТЬ: приведенный ниже фрагмент кода не работает на Chrome (Не удалось загрузить данные: application / pdf; filename = MY_CUSTOM_FILENAME.pdf; base64, .... 'как плагин, потому что фрейм, в который загружается плагин, помещается в песочницу.), но он работает, если вы открываете план. html файл.

РЕДАКТИРОВАТЬ 2: Я нашел решение, но оно просто работает на Firefox.

Мы преобразуем нашу base64 строку в Blob , как описано здесь преобразуйте этот Blob в Url и добавьте параметр filename к этому URL (используя '#' , как описано здесь ).

Итак, функция 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 мы увидим URL-адрес BLOB-объекта sh. И:

  • кажется невозможным изменить это ха sh
  • , даже если я использую <iframe> (вместо <object>) для загрузить мой встроенный PDF, Chrome будет использовать <embed>. Таким образом, нет никакого способа «взломать» его.

Любой другой совет с этой точки зрения?

...