Notre problème est que, pour des raisons juridiques, nous ne sommes pas autorisés à stocker temporairement un PDF sur le disque dur . De plus, la page entière ne doit pas être rechargée lors de l'affichage d'un PDF en tant qu'aperçu dans le navigateur.
Nous avons d'abord essayé PDF.jS. Cela a fonctionné avec Base64 dans la visionneuse pour Firefox et Chrome. Cependant, cela a été trop lent pour notre PDF. IE / Edge ne fonctionnait pas du tout.
Nous l'avons donc essayé avec une chaîne Base64 dans une balise d'objet HTML. Cela n'a pas fonctionné à nouveau pour IE / Edge (peut-être le même problème qu'avec PDF.js). Dans Chrome / Firefox / Safari à nouveau, aucun problème. C'est pourquoi nous avons choisi une solution hybride. IE / Edge nous utilisons un IFrame et pour tous les autres navigateurs l'objet-tag.
La solution IFrame fonctionnerait bien sûr également pour Chrome et co. La raison pour laquelle nous n'avons pas utilisé cette solution pour Chrome est que, bien que le PDF s'affiche correctement, Chrome fait une nouvelle demande au serveur dès que vous cliquez sur "télécharger" dans l'aperçu . Le champ PDFHelperTransferData requis (pour envoyer nos données de formulaire nécessaires à la génération du PDF) n'est plus défini car le PDF est affiché dans un IFrame. Pour cette fonctionnalité / bogue, voirChrome envoie deux demandes lors du téléchargement d'un PDF (et annule l'une d'entre elles) .
Maintenant, les enfants problématiques IE9 et IE10 restent. Pour ceux-ci, nous avons renoncé à une solution d'aperçu et envoyons simplement le document en cliquant sur le bouton d'aperçu sous forme de téléchargement à l'utilisateur (au lieu de l'aperçu). Nous avons beaucoup essayé, mais même si nous avions trouvé une solution, l'effort supplémentaire pour cette petite partie des utilisateurs n'en aurait pas valu la peine. Vous pouvez trouver notre solution de téléchargement ici: Téléchargez le PDF sans rafraîchissement avec IFrame .
Notre 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);
}
})
}
Notre 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>
Pour vérifier le type de navigateur pour IE / Edge, voir ici: Comment puis-je détecter Internet Explorer (IE) et Microsoft Edge à l'aide de JavaScript? J'espère que ces résultats feront gagner du temps à quelqu'un d'autre.