在JavaScript客戶端保存base64字符串作爲PDF

所以在這裏我的問題：我有一個pdf文件作爲我從服務器獲取的base64字符串。我希望使用此字符串將PDF直接顯示到瀏覽器，或者在單擊鏈接時爲其提供「另存爲...」選項。這裏我正在使用的代碼：在JavaScript客戶端保存base64字符串作爲PDF

<!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>

它與Chrome和Safari的工作正常。 Firefox確認PDF但不顯示它，因爲FF要求存在擴展名，但在這種情況下數據URI沒有。我堅持這裏的原因，如果鉻和Safari瀏覽器得到它的工作，那麼必須有一個FF和IE的解決方案

我知道有一些相關的問題，但不是確切的一個，現在也是一個有點舊的。我知道一個解決方法是在服務器端生成pdf，但我想在客戶端生成它。

那麼請聰明的人，是否有可能通過一些黑客或額外的JS下載插件？

來源

2012-07-10 owsata

hellow ???沒有任何人有一些答案的th thr ..可能是約翰resig ;-) – owsata 2012-07-11 07:56:06

@owsata，同樣的問題在這裏！它只是打開窗戶！你有沒有找到解決你的問題？請告訴我們。謝謝 – 2012-12-13 18:09:49

@FabioMilheiro Nope沒有發現任何有用的東西。最終的結果是，因爲瀏覽器以不同的方式處理數據：應用程序的想法，所以一開始就沒有多少使用它。所以最後的手段 - >從服務器發送現成的pdf。 – owsata 2012-12-20 13:06:44

您應該能夠下載使用

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

來源

2012-07-10 14:51:40

不，Chrome和FF直接下載它，但不要分配擴展名。 Safari打開PDF並在瀏覽器中顯示它。 IE打開一個標題爲「application/octet-stream」的新選項卡，沒有別的... – owsata 2012-07-10 15:00:10

您可以創建一個錨的文件，如一個顯示下方下載的base64 PDF：

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

其中pdfData是您的base64編碼pdf，如「data：application/pdf; base64，JVBERi0xLjQKJcOkw7zDtsOfCjIgMCBvYmoKPDwvTGVuZ3RoIDMgMCBSL0ZpbHRlci9GbGF0ZURlY29kZT4 + CnN0cmVhbQp4nO1cyY4ktxG911fUWUC3kjsTaBTQ1Ytg32QN4I Pgk23JMDQ2LB/0 + 2YsZAQzmZk1PSPIEB ...「

來源

2014-01-24 15:55:36 Gabriel

我知道這個問題已經過時了，但也想完成這個並且在看過程中碰到它。對於Internet Explorer，我使用here的代碼來保存Blob。要創建一個從字符串的base64一個blob有這個網站的許多成果，所以它不是我的代碼，我只是不記得具體來源：

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;

使用鏈接filesaver：

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

來源

2015-02-17 10:18:04 Ka0s

只適用於IE> = 10 – 2015-07-10 05:54:06

文件瀏覽器在Safari中失敗:( – jrhamza 2015-12-08 07:48:56

我在此鏈接上發佈瞭解決方案 https：/ /stackoverflow.com/questions/34436133/pdf-is-blank-when-downloading-using-javascript/45669785#45669785 它在IE，CHROME，FF中工作正常。如果此解決方案可以幫助您，請嘗試投票 – 2017-08-14 07:53:54

在JavaScript客戶端保存base64字符串作爲PDF

回答

相關問題