Проблема с загрузкой PDF-блоба в JavaScript - PullRequest
Новая
       22

Проблема с загрузкой PDF-блоба в JavaScript

0 голосов
/ 15 октября 2018

Я создал функцию, которая принимает blob и fileName, которая должна загружать этот двоичный объект, реализованный следующим образом: 

const blobToBase64 = (blob, callback) => {
  const reader = new FileReader();
  reader.onloadend = () => {
    const base64 = reader.result;
    console.log({ base64 });
    callback(base64);
  };
  reader.readAsDataURL(blob);
};

const downloadFile = (blob, fileName) => () => {
  const link = document.createElement('a');
  blobToBase64(blob, (base64) => {
    link.href = base64;
    link.download = fileName;
    link.click();
  });
};


downloadFile(myBlob, myFileName);

Чтобы попытаться отладить это, я сделал console.log чтобы выйти из значения base64, созданного reader.result.

Это значение base64 равно data:application/octet-stream;base64,Mzc4MDY4...

Мой файл PDF загружен, но поврежден.Что я делаю неправильно в моей реализации загрузки файлов?

Дайте мне знать, если есть какие-либо дополнительные сведения, которые могут помочь с этим?Я на 100% уверен, что сам BLOB-объект не является поврежденным файлом.

Ответы [ 2 ]

0 голосов
/ 19 июля 2019

Я пытался использовать Fetch API для загрузки PDF-файла с сервера, который дает octet-stream контент в качестве ответа.Таким образом, если вы проверите ответ, вы получите символы, подобные этим %PDF-1.4

Вот решение: 

function download(pdfUrl) {
        fetch(pdfUrl).then(resp => resp.arrayBuffer()).then(resp => {

            // set the blog type to final pdf
            const file = new Blob([resp], {type: 'application/pdf'});

            // process to auto download it
            const fileURL = URL.createObjectURL(file);
            const link = document.createElement('a');
            link.href = window.URL.createObjectURL(fileURL);
            link.download = "FileName" + new Date() + ".pdf";
            link.click();
        });
    }

Вы можете использовать тот же метод и декодировать содержимое октетапоток перед созданием BLOB-объекта.

0 голосов
/ 16 октября 2018

Я не могу точно сказать, почему ваш код не работает, но я могу точно сказать, что то, что вы делаете, в лучшем случае бесполезно.

Не конвертируйте Blob вdataURI , 99% * времени, что вы хотите сделать с этим dataURI, может быть сделано непосредственно с оригинальным BLOB-объектом и BLOBURI.

* Оставшийся 1% - это когда вам нужно создать автономные документы, которые будут включать двоичные данные, это случается, но не так часто.

Здесь, еще раз, что выЖелание сделать (установить привязку, указывающую на данные вашего BLOB-объекта) можно сделать непосредственно с Blob: просто создайте blobURI (который является просто указателем на данные в памяти), вызвав URL.createObjectURL(blob).

const downloadFile = (blob, fileName) => {
  const link = document.createElement('a');
  // create a blobURI pointing to our Blob
  link.href = URL.createObjectURL(blob);
  link.download = fileName;
  // some browser needs the anchor to be in the doc
  document.body.append(link);
  link.click();
  link.remove();
  // in case the Blob uses a lot of memory
  window.addEventListener('focus', e=>URL.revokeObjectURL(link.href), {once:true});
};


downloadFile(new Blob(['random data']), "myfile.txt");
...