Vấn đề của chúng tôi là vì lý do pháp lý, chúng tôi không được phép lưu trữ tạm thời một tệp PDF trên đĩa cứng . Ngoài ra, không nên tải lại toàn bộ trang khi hiển thị PDF dưới dạng Xem trước trong Trình duyệt.
Đầu tiên chúng tôi đã thử PDF.jS. Nó hoạt động với Base64 trong trình xem cho Firefox và Chrome. Tuy nhiên, nó chậm đến mức không thể chấp nhận được đối với bản PDF của chúng tôi. IE / Edge hoàn toàn không hoạt động.
Do đó, chúng tôi đã thử nó với chuỗi Base64 trong thẻ đối tượng HTML. Điều này một lần nữa không hoạt động đối với IE / Edge (có thể là vấn đề tương tự như với PDF.js). Trong Chrome / Firefox / Safari một lần nữa không có vấn đề. Đó là lý do tại sao chúng tôi chọn một giải pháp lai. IE / Edge chúng tôi sử dụng IFrame và cho tất cả các trình duyệt khác thẻ đối tượng.
Giải pháp IFrame tất nhiên cũng sẽ hoạt động cho Chrome và co. Lý do tại sao chúng tôi không sử dụng giải pháp này cho Chrome là vì mặc dù PDF được hiển thị chính xác, Chrome đưa ra yêu cầu mới cho máy chủ ngay khi bạn nhấp vào "tải xuống" trong bản xem trước . PdfHelperTransferData trường ẩn được yêu cầu (để gửi dữ liệu biểu mẫu của chúng tôi cần để tạo PDF) không còn được đặt vì PDF được hiển thị trong IFrame. Đối với tính năng / lỗi này, xemChrome gửi hai yêu cầu khi tải xuống bản PDF (và hủy một trong số chúng) .
Bây giờ vấn đề trẻ em IE9 và IE10 vẫn còn. Đối với những điều này, chúng tôi đã từ bỏ một giải pháp xem trước và chỉ cần gửi tài liệu bằng cách nhấp vào nút xem trước dưới dạng tải xuống cho người dùng (thay vì xem trước). Chúng tôi đã cố gắng rất nhiều nhưng ngay cả khi chúng tôi đã tìm ra giải pháp, nỗ lực thêm cho phần nhỏ người dùng này sẽ không đáng để nỗ lực. Bạn có thể tìm giải pháp của chúng tôi để tải xuống tại đây: Tải xuống PDF mà không cần làm mới với IFrame .
Javascript của chúng tôi:
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 của chúng tôi:
<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>
Để kiểm tra loại trình duyệt cho IE / Edge xem tại đây: Làm cách nào tôi có thể phát hiện Internet Explorer (IE) và Microsoft Edge bằng JavaScript? Tôi hy vọng những phát hiện này sẽ tiết kiệm thời gian cho người khác.