PDF Загрузка в HREF a-элемента приводит к пустому PDF - PullRequest
Новая
       29

PDF Загрузка в HREF a-элемента приводит к пустому PDF

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

Я использую a-элемент в качестве кнопки загрузки для файлов, которые мне приходилось запрашивать ранее с помощью AJAX, как описано здесь , здесь и здесь .Я поместил файл-данные как Data-URI в a-элемент, чтобы создать кнопку загрузки.К сожалению, я не могу просто указать на файл, но должен сделать это так.С большинством форматов загрузки HTML, CSV это работает так: 

var mimeType = "text/html"; // example. works also with others.
var BOM = '\ufeff';
var url = "data:"+ mimeType +";charset=UTF-8," + BOM + encodeURIComponent(response.data);
var linkElem = document.querySelector("#hiddenDownloadLink");
var link = angular.element(linkElem);
link.prop("href", url);
link.prop("download", 'myFile.' + extension);
linkElem.click();

Хорошо.Это работает.Но не для PDF.

Я создаю PDF в своем бэкэнде (java, с openhtmltopdf, но, думаю, это не имеет значения, поскольку PDF определенно правильный): 

httpOutputMessage.getHeaders().add(HttpHeaders.CONTENT_TYPE, "application/pdf");
httpOutputMessage.getHeaders().add(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"myFile.pdf\"");
makePdf(httpOutputMessage.getBody());

ЕслиЯ запрашиваю бэкэнд напрямую, или даже если я записываю вывод в файл, все в порядке.Но когда я использую свой контроллер загрузки, как описано выше, я получаю PDF с нужным количеством страниц, но полностью пустой! Я думаю, что должна быть проблема с кодировкой.Я пытался с и без спецификации, также с или без encodeURIComponent.

Я также пытался использовать base64-декодирование как.Поскольку window.atob (response.data) завершается неудачей из-за разрывов строк и других, я попытался это преобразование.Результат - сломанный PDF.Результаты в сломанных PDF-файлах.Я не уверен, имеет ли это какой-либо смысл.

Мои PDF-данные начинаются следующим образом, поэтому они не сжимаются и не кодируются так или иначе: 

%PDF-1.4
%����
1 0 obj
<<
/Type /Catalog
/Version /1.7
/Pages 2 0 R
>>
endobj
3 0 obj
<<

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

Любые идеи, почему я получаю пустые PDF-файлы или что здесь может пойти не так и какя могу восстановить ссылку для скачивания?

- Изменить 1

Я также получаю действительный, но пустой PDF при попытке 

var blob = new Blob([response.data], {type: 'application/pdf'});
var url = window.URL.createObjectURL(blob);
link.prop("href", url);

Когда я отправляю response.dataчерез эту функцию я получаю сломанный PDF. 

var utf8_to_b64 = function(str) {
  var unescape = window.unescape || window.decodeURI;
  str = encodeURIComponent(str);
  str = unescape(str);
  str = window.btoa(str);

  return str;
};

1 Ответ

0 голосов
/ 26 ноября 2018

Так что я мог бы полностью воспроизвести вашу ситуацию.Я загрузил и вывел 4-страничный PDF-файл через AJAX-запрос из бэкэнда, и с вашим примером кода получил 4-страничный пустой PDF-файл.

Вот что я сделал после (и получил нужный PDF для загрузки):

Я base64 кодировал выходные данные из бэкэнда.В моем случае я использовал PHP, так что это было примерно так: 

$pdf = file_get_contents('test.pdf');
header('Content-Type: application/pdf');
echo base64_encode($pdf);

Затем во внешнем интерфейсе я изменил только эту строку: 

var url = "data:"+ mimeType +";charset=UTF-8," + BOM + encodeURIComponent(response.data);

на эту: 

var url = "data:"+ mimeType +";base64," + encodeURIComponent(response.data);

Надеюсь, это поможет.

...