jquery ajax沒有提供pdf文件

Question

我想下載一個pdf文件使用jquery，ajax & django。

我的Django的views.py：

if request.POST.get('action') == 'download_labels': 
    order_list = json.loads(request.POST.get('order_dict'), None) 
    PackedOrders(dbname, order_list).downloadLabels() 
    file = open('shipping_labels.pdf','rb') 
    response = HttpResponse(file, content_type='application/pdf') 
    response['Content-Disposition'] = "attachment; filename=shipping_labels.pdf" 
    os.system('rm shipping_labels.pdf') 
    return HttpResponse(response, content_type='application/pdf') 

我的AJAX查詢：

data : {action:'download_labels', 
     order_dict:JSON.stringify($checkedRows)}, 

success : function(response, status, request) { 
    var file = new Blob([response], {type: 'application/pdf'}); 
    var fileURL = window.URL.createObjectURL(file); 
    window.open(fileURL,'_blank'); 
}, 

阿賈克斯返回文件作爲二進制數據的響應，並在新標籤中打開它。但是我在新標籤中看到的所有內容都是空白頁。空白頁面的數量等於原始pdf文件中的頁面數量。

在控制檯中我看到這一點：

Error: Invalid XRef stream header 
... 
Warning: Indexing all PDF objects 
pdf.worker.js (line 235) 
<System> 
PDF 85b859244e496561d60d217869d5d38a [1.3 -/-] (PDF.js: 1.3.76) 
Error: Bad FCHECK in flate stream: 120, 239 
... 

Here是完整的日誌文件。

Answer 1

我不是jQuery專家，但我不認爲jQuery ajax支持blob。在文檔中它只列出這些數據類型：xml，json，script或html。 不過，我能得到這個功能，而無需使用jQuery和使用Ajax和與此代碼普通的JavaScript工作，

我的JavaScript（我也想加入錯誤處理這個）

var xhr = new XMLHttpRequest(); 
xhr.open('GET', '/pdf_test', true); 
xhr.responseType = 'blob'; 

xhr.onload = function(e) { 
    if (this.status == 200) { 
    var blob = new Blob([this.response], {type: 'application/pdf'}), 
    fileURL = URL.createObjectURL(blob); 
    window.open(fileURL,'_blank'); 
    } 
}; 

xhr.send(); 

我的Django的看法（我也想加入錯誤處理這個）

def pdf_test(request): 
    pdf_file = open(r'C:\Pdfs\calculation_of_semiconductor_failure_rates.pdf', 'rb') 
    response = HttpResponse(pdf_file, content_type='application/pdf') 
    response['Content-Disposition'] = 'attachment; filename="shippinglabels.pdf"' 
    return response 

在此之上，如果你不需要在新標籤頁中打開，但只需下載該文件，然後你就可以避免AJAX/JavaScript的全部，只是使用HTML是一種更簡單的方法

<a id="pdf-test" href="/pdf_test">Download PDF</a>

對於信貸和進一步閱讀我使用這些鏈接

jQuery Ajax

StackOverflow question

Introduction to JavaScript Blobs and File Interface