Tạo và cung cấp PDF Blob đúng cách qua Tệp HTML5 và API URL

Question

Ok, Giả sử tôi có dữ liệu tài liệu được lưu ở đâu đó, hãy tự ý lấy this pdf.

Vấn đề # 1. Những gì tôi muốn làm là thực hiện một cuộc gọi AJAX đến URL này (vì tôi cần phải vượt qua một số tiêu đề xác thực và nó là tên miền chéo). Sau đó lấy dữ liệu được trả về, tạo một blob url cho nó, thêm một iFrame vào DOM và chỉ đạo src đến địa chỉ blob.

Hiện nay mã của tôi trông như thế này:

$.ajax({ 
    url:'http://www.grida.no/climate/ipcc_tar/wg1/pdf/tar-01.pdf' 
}).done(function(data){ 
    var file = new Blob([data], {type:'application/pdf'}), 
     url = URL.createObjectURL(file), 
     _iFrame = document.createElement('iframe'); 
     _iFrame.setAttribute('src', url); 
     _iFrame.setAttribute('style', 'visibility:hidden;'); 
     $('#someDiv').append(_iFrame); 
}); 

Thật không may, tôi nhận được một 'Không thể Render PDF' trong iFrame.

Vấn đề # 2. Tôi muốn điều này dẫn đến lời nhắc tải xuống tệp. Bạn không chắc chắn làm thế nào để đảm bảo điều này cho rằng PDF sẽ tự nhiên chỉ hiển thị trong iFrame.

Answer 1

jQuery.ajax hiện không hỗ trợ các đốm màu, xem này bug report #7248 được đóng dưới dạng wontfix.

Tuy nhiên thật dễ dàng để làm XHR cho các đốm màu không jQuery:

var xhr = new XMLHttpRequest(); 
xhr.open('GET', 'http://www.grida.no/climate/ipcc_tar/wg1/pdf/tar-01.pdf', true); 
xhr.responseType = 'blob'; 

xhr.onload = function(e) { 
    if (this.status == 200) { 
    // Note: .response instead of .responseText 
    var blob = new Blob([this.response], {type: 'application/pdf'}), 
     url = URL.createObjectURL(blob), 
     _iFrame = document.createElement('iframe'); 

    _iFrame.setAttribute('src', url); 
    _iFrame.setAttribute('style', 'visibility:hidden;'); 
    $('#someDiv').append(_iFrame)   
    } 
}; 

xhr.send(); 

không biết xấu hổ sao chép từ HTML5rocks.

Nếu jQuery đã hỗ trợ loại Blob, nó có thể đơn giản như:

$.ajax({ 
    url:'http://www.grida.no/climate/ipcc_tar/wg1/pdf/tar-01.pdf', 
    dataType:'blob' 
})...