2012-07-10 34 views
26

Vì vậy, đây là vấn đề của tôi: Tôi có một tệp pdf dưới dạng chuỗi base64 mà tôi nhận được từ máy chủ. Tôi muốn sử dụng chuỗi này để hiển thị tệp PDF trực tiếp cho trình duyệt hoặc cung cấp tùy chọn "Lưu dưới dạng ..." khi nhấp vào liên kết. Ở đây mã tôi đang sử dụng:Lưu chuỗi base64 dưới dạng PDF ở phía máy khách với JavaScript

<!doctype> 
<html> 
<head> 
    <title>jsPDF</title> 
    <script type="text/javascript" src="../libs/base64.js"></script> 
    <script type="text/javascript" src="../libs/sprintf.js"></script> 
    <script type="text/javascript" src="../jspdf.js"></script> 

     <script type="text/javascript"> 

     function demo1() { 
      jsPDF.init(); 
      jsPDF.addPage(); 
      jsPDF.text(20, 20, 'Hello world!'); 
      jsPDF.text(20, 30, 'This is client-side Javascript, pumping out a PDF.'); 

      // Making Data URI 
      var out = jsPDF.output(); 
      var url = 'data:application/pdf;base64,' + Base64.encode(out); 

      document.location.href = url; 
     } 
    </script> 
</head> 
<body> 

<a href="javascript:demo1()">Run Code</a> 

</body> 
</html> 

Làm việc tốt với Chrome và Safari. Firefox không nhận ra pdf nhưng không hiển thị nó như FF yêu cầu các phần mở rộng có mặt nhưng dữ liệu-uri không có trong trường hợp này. Lý do tôi nhấn mạnh ở đây, nếu chrome và safari làm cho nó hoạt động, thì phải có một giải pháp cho FF và IE

Tôi biết có một số câu hỏi liên quan nhưng không thực sự chính xác và bây giờ bit cũ. Tôi biết một workaround sẽ có pdf được tạo ra ở phía máy chủ nhưng tôi muốn tạo ra nó ở phía khách hàng.

Vì vậy, hãy thông minh cho mọi người, có thể thông qua một số hack hoặc bổ sung các plugin tải xuống JS không?

+0

hellow ??? isnt có ai ra Thr người có một số câu trả lời cho THT .. có thể được john resig ;-) – owsata

+0

@owsata, cùng một vấn đề ở đây! Nó chỉ mở cửa sổ! Bạn có tìm thấy giải pháp cho vấn đề của mình không? Xin vui lòng cho chúng tôi biết. Cảm ơn –

+1

@FabioMilheiro Nope không tìm thấy gì hữu ích. Kết quả cuối cùng là bởi vì các trình duyệt xử lý dữ liệu: ý tưởng ứng dụng khác nhau không có nhiều việc sử dụng nó ngay từ đầu. Vì vậy, cuối cùng resort -> gửi một pdf readymade từ máy chủ. – owsata

Trả lời

16

Bạn sẽ có thể tải về các tập tin sử dụng

window.open("data:application/pdf;base64," + Base64.encode(out)); 
+2

Không, Chrome và FF tải xuống trực tiếp nhưng không chỉ định tiện ích. Safari mở tệp PDF và hiển thị nó trong trình duyệt wow. IE mở một tab mới với tiêu đề "ứng dụng/octet-stream" và không có gì khác ... – owsata

8

Bạn có thể tạo một neo như một thể hiện dưới đây để tải về base64 pdf:

<a download=pdfTitle href=pdfData title='Download pdf document' /> 

nơi pdfData là pdf được mã hóa base64 của bạn như "dữ liệu: ứng dụng/pdf; base64, JVBERi0xLjQKJcOkw7zDtsOfCjIgMCBvYmoKPDwvTGVuZ3RoIDMgMCBSL0ZpbHRlci9GbGF0ZURlY29kZT4 + CnN0cmVhbQp4nO1cyY4ktxG911fUWUC3kjsTaBTQ1Ytg32QN4I Pgk23JMDQ2LB/0 + 2YsZAQzmZk1PSPIEB ... "

11

Tôi biết câu hỏi này là cũ, nhưng cũng muốn thực hiện điều này và đi qua nó trong khi tìm kiếm. Đối với internet explorer tôi đã sử dụng mã số từ here để lưu Blob. Để tạo một blob từ chuỗi base64 có rất nhiều kết quả trên trang web này, vì vậy nó không mã của tôi Tôi chỉ không thể nhớ nguồn cụ thể:

function b64toBlob(b64Data, contentType) { 
    contentType = contentType || ''; 
    var sliceSize = 512; 
    b64Data = b64Data.replace(/^[^,]+,/, ''); 
    b64Data = b64Data.replace(/\s/g, ''); 
    var byteCharacters = window.atob(b64Data); 
    var byteArrays = []; 

    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) { 
     var slice = byteCharacters.slice(offset, offset + sliceSize); 

     var byteNumbers = new Array(slice.length); 
     for (var i = 0; i < slice.length; i++) { 
      byteNumbers[i] = slice.charCodeAt(i); 
     } 

     var byteArray = new Uint8Array(byteNumbers); 

     byteArrays.push(byteArray); 
    } 

    var blob = new Blob(byteArrays, {type: contentType}); 
    return blob; 

Sử dụng filesaver liên kết:

if (window.saveAs) { window.saveAs(blob, name); } 
    else { navigator.saveBlob(blob, name); } 
+0

Chỉ hoạt động trên IE> = 10 –

+0

Trình bảo vệ tệp không hoạt động trong Safari: ( – jrhamza

+0

i đăng giải pháp trên liên kết này https://stackoverflow.com/questions/34436133/pdf-is-blank-when-downloading-using-javascript/45669785#45669785 hoạt động tốt trong IE, CHROME, FF. Nếu giải pháp này giúp bạn, hãy thử bỏ phiếu –

Các vấn đề liên quan