Hiển thị các tệp PDF tức là bên trong trình duyệt

Question

Tôi đã xem rất nhiều bài đăng SO khác nhau về điều này ngay hôm nay.

Tôi có một ứng dụng cần hiển thị tài liệu PDF bên trong trình duyệt. Ứng dụng này cũng cần chạy trong IE (11+).

Đây là điều: một iframe với một src hoạt động tốt. Một cái gì đó như:

<iframe src="www.myurl.com/thedocument"></iframe> 

Tuy nhiên, www.myurl.com/thedocument hiện được bảo vệ bởi oAuth. Điều này có nghĩa là tôi cần phải yêu cầu www.myurl.com/thedocument bằng thông tin đăng nhập ủy quyền thích hợp.

Điều này có nghĩa là (tôi nghĩ), rằng tôi phải yêu cầu www.myurl.com/thedocument qua ajax. Yêu cầu ajax trả về base64 hoặc một byte [] chứa tài liệu.

IE không hỗ trợ URI dữ liệu để hiển thị tệp PDF, vì vậy tôi không thể chỉ chia phản hồi từ yêu cầu ajax của tôi vào khung nội tuyến.

Vì vậy, bây giờ tôi đang bị kẹt.

Bất kỳ ý tưởng nào?

Cảm ơn

Answer 1

Một lựa chọn sẽ được sử dụng PDF.js, thư viện javascript để render các file PDF thành một canvas HTML5 với support for IE10+. Thư viện hỗ trợ tải dữ liệu PDF từ TypedArray (ví dụ: Uint8Array), có thể được tạo ra từ kết quả của yêu cầu ajax.

Tôi đã chuẩn bị một ví dụ ngắn here hiển thị một trang PDF được lưu trữ trong mã nhị phân được mã hóa base64. Để tránh thực hiện việc chuyển đổi base64, một TypedArray cũng có thể được lấy trực tiếp từ một phản ứng XMLHttpRequest:

function reqListener() { 
    var byteArray = new Uint8Array(this.response); 
    PDFJS.getDocument(byteArray).then(function(page) { 
     // .... 
    }); 
} 

var req = new XMLHttpRequest(); 
req.addEventListener("load", reqListener); 
req.responseType = "arraybuffer"; 
req.open("GET", "http://www.example.com/example.pdf"); 
req.send(); 

Để hỗ trợ các tính năng mà bạn mong đợi ở một trình xem pdf mẹ đẻ (in, vv) thư viện bao gồm một example viewer rằng bạn có thể thích ứng với mục đích của riêng bạn.