Наша проблема в том, что по юридическим причинам нам не разрешено временно хранить PDF на жестком диске. Кроме того, вся страница не должна перезагружаться при отображении PDF в качестве предварительного просмотра в браузере.
Сначала мы попробовали PDF.jS. Он работал с Base64 в средстве просмотра для Firefox и Chrome. Однако это было недопустимо медленно для нашего PDF. IE / Edge вообще не работал.
Поэтому мы попробовали это со строкой Base64 в теге объекта HTML. Это опять не работает для IE / Edge (возможно, та же проблема, что и с PDF.js). В Chrome / Firefox / Safari опять нет проблем.
Вот почему мы выбрали гибридное решение. В IE / Edge мы используем IFrame, а для всех других браузеров - тег объекта.
Конечно, решение IFrame также подойдет для Chrome и co. Причина, по которой мы не использовали это решение для Chrome, заключается в том, что, хотя PDF отображается правильно, Chrome отправляет новый запрос на сервер, как только вы нажимаете «скачать» в окне предварительного просмотра . Обязательное скрытое поле pdfHelperTransferData (для отправки данных нашей формы, необходимых для генерации PDF) больше не устанавливается, поскольку PDF отображается в IFrame. Об этой функции / ошибке см. Chrome отправляет два запроса при загрузке PDF (и отменяет один из них) .
Теперь проблемные дети IE9 и IE10 остаются. Для этого мы отказались от решения для предварительного просмотра и просто отправили документ, нажав кнопку предварительного просмотра для загрузки пользователю (вместо предварительного просмотра). Мы много пытались, но даже если бы мы нашли решение, дополнительные усилия для этой крошечной части пользователей не стоили бы усилий. Вы можете найти наше решение для загрузки здесь: Скачать PDF без обновления с IFrame .
Наш Javascript
var transferData = getFormAsJson()
if (isMicrosoftBrowser()) {
// Case IE / Edge (because doesn't recoginzie Pdf-Base64 use Iframe)
var form = document.getElementById('pdf-helper-form');
$("#pdfHelperTransferData").val(transferData);
form.target = "iframe-pdf-shower";
form.action = "serverSideFunctonWhichWritesPdfinResponse";
form.submit();
} else {
// Case non IE use Object tag instead of iframe
$.ajax({
url: "serverSideFunctonWhichRetrivesPdfAsBase64",
type: "post",
data: { downloadHelperTransferData: transferData },
success: function (result) {
$("#object-pdf-shower").attr("data", result);
}
})
}
Наш HTML
<div id="pdf-helper-hidden-container" style="display:none">
<form id="pdf-helper-form" method="post">
<input type="hidden" name="pdfHelperTransferData" id="pdfHelperTransferData" />
</form>
</div>
<div id="pdf-wrapper" class="modal-content">
<iframe id="iframe-pdf-shower" name="iframe-pdf-shower"></iframe>
<object id="object-pdf-shower" type="application/pdf"></object>
</div>
Чтобы проверить тип браузера для IE / Edge, см. Здесь: Как я могу обнаружить Internet Explorer (IE) и Microsoft Edge с помощью JavaScript? Я надеюсь, что эти результаты сэкономят кому-то еще время.