Nosso problema é que, por razões legais , não temos permissão para armazenar temporariamente um PDF no disco rígido . Além disso, a página inteira não deve ser recarregada ao exibir um PDF como visualização no navegador.
Primeiro, tentamos o PDF.jS. Ele trabalhou com o Base64 no visualizador para Firefox e Chrome. No entanto, era inaceitavelmente lento para o nosso PDF. O IE / Edge não funcionou.
Portanto, tentamos com uma string Base64 em uma tag de objeto HTML. Isso novamente não funcionou para o IE / Edge (talvez o mesmo problema que com o PDF.js). No Chrome / Firefox / Safari novamente, não há problema. Por isso, escolhemos uma solução híbrida. IE / Edge, usamos um IFrame e, para todos os outros navegadores, a tag de objeto.
É claro que a solução IFrame também funcionaria para o Chrome e outras empresas. O motivo pelo qual não usamos essa solução para o Chrome é que, embora o PDF seja exibido corretamente, o Chrome faz uma nova solicitação ao servidor assim que você clica em "baixar" na visualização . O pdfHelperTransferData de campo oculto necessário (para enviar nossos dados de formulário necessários para a geração de PDF) não é mais definido porque o PDF é exibido em um IFrame. Para esse recurso / bug, consulteO Chrome envia duas solicitações ao baixar um PDF (e cancela uma delas) .
Agora, os filhos problemáticos IE9 e IE10 permanecem. Para isso, desistimos de uma solução de visualização e simplesmente enviamos o documento clicando no botão de visualização como um download para o usuário (em vez da visualização). Tentamos muito, mas mesmo se tivéssemos encontrado uma solução, o esforço extra para essa pequena parte dos usuários não teria valido a pena. Você pode encontrar nossa solução para o download aqui: Faça o download do PDF sem atualizar com o IFrame .
Nosso 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);
}
})
}
Nosso 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>
Para verificar o tipo de navegador do IE / Edge, consulte aqui: Como posso detectar o Internet Explorer (IE) e o Microsoft Edge usando JavaScript? Espero que essas descobertas salvem o tempo de outra pessoa.