Cách hiển thị luồng PDF trong trình duyệt bằng cách sử dụng javascript

Question

Tôi đang truy cập dịch vụ web WCF hiện có (trả về PDF dưới dạng luồng byte) bằng các phương pháp ajax của jquery.

Khi cuộc gọi đến dịch vụ hoàn tất, tôi kết thúc bằng biến javascript chứa PDF (biến có dữ liệu nhị phân, bắt đầu từ "% PDF-1.4 ...").

Tôi muốn hiển thị tệp PDF này trong cửa sổ trình duyệt mới, nhưng tôi đang gặp khó khăn khi đạt được điều này.

Nghiên cứu của tôi cho đến nay cho thấy rằng tôi có thể có thể đạt được những gì tôi muốn sử dụng một dữ liệu: uri, do đó, mã của tôi đó là gọi khi cuộc gọi ajax hoàn thành được như sau:

function GotPDF(data) 
{ 
    // Here, data contains "%PDF-1.4 ..." etc. 
    var datauri = 'data:application/pdf;base64,' + Base64.encode(data); 
    var win = window.open("", "Your PDF", "width=1024,height=768,resizable=yes,scrollbars=yes,toolbar=no,location=no,directories=no,status=no,menubar=no,copyhistory=no"); 
    win.document.location.href = datauri; 
} 

này gây ra mới cửa sổ trình duyệt mở, nhưng nội dung trống.

Điều thú vị là, nếu tôi trỏ trình duyệt của mình (IE9) vào một tệp hiện có trên đĩa cục bộ bằng cách sử dụng tệp: uri, chẳng hạn như tệp: // c: /tmp/example.pdf, sau đó tôi nhận được kết quả tương tự , tức là một cửa sổ trống.

Có cách nào để tôi có thể hiển thị dữ liệu PDF này không?

Answer 1

Mã bạn viết không hiển thị gì, chỉ cần mở một cửa sổ trống (location.href là một băm cho lịch sử duyệt web, không phải nội dung của trang).

Để hiển thị một file PDF mà bạn có, ít nhất, tùy chọn sau:

× Nhúng người xem PDF trực tiếp trên thẻ embed hay object. Nó có thể không đơn giản như bạn có thể tưởng tượng, hãy xem this post để biết mã mẫu. Trong ngắn nó phải là một cái gì đó như thế này:

<object data="your_url_to_pdf" type="application/pdf"> 
    <embed src="your_url_to_pdf" type="application/pdf" /> 
</object> 

Đó là mã cơ bản nhưng tôi khuyên bạn nên làm theo những gì tôi nói trong bài liên kết nếu bạn cần khả năng tương thích trình duyệt cao hơn.

× Tải tập tin vào máy tính cục bộ (chỉ cần thêm URL đầy đủ của phương pháp dịch vụ web của bạn mà tạo ra các tập tin, đừng quên để thêm thích hợp Content-Disposition trong tiêu đề).

× Mở tệp vào cửa sổ trình duyệt mới. Tạo một thẻ bình thườnga khi bạn trỏ đến tệp PDF trực tuyến mà bạn muốn hiển thị trong cửa sổ mới. Thay đổi href thành javascript:functionName và trong hàm đó tạo ra URI bạn sẽ sử dụng để gọi phương thức dịch vụ web. Bất cứ điều gì bạn sẽ làm, đừng quên đặt kiểu MIME thích hợp trong phản hồi của bạn hơn nữa phương pháp của bạn không nên trả về một luồng byte (ngay cả khi được mã hóa) mà là một phản hồi hợp lệ cho trình duyệt web của bạn.

Answer 2

Nếu bạn đang sử dụng <embed> hoặc <object> tag để hiển thị một file stream PDF (hoặc các loại tập tin khác) từ một máy chủ như trong:

<object data="SomeServlet?do=get_doc&id=6" type="application/pdf" width="800" height="400"> 

chắc chắn rằng máy chủ gửi giá trị http content-disposition thích hợp, mà trong trường hợp này sẽ là inline.