2012-07-10 47 views
26

所以在这里我的问题:我有一个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下载插件?

+0

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

+0

@owsata,同样的问题在这里!它只是打开窗户!你有没有找到解决你的问题?请告诉我们。谢谢 – 2012-12-13 18:09:49

+1

@FabioMilheiro Nope没有发现任何有用的东西。最终的结果是,因为浏览器以不同的方式处理数据:应用程序的想法,所以一开始就没有多少使用它。所以最后的手段 - >从服务器发送现成的pdf。 – owsata 2012-12-20 13:06:44

回答

16

您应该能够下载使用

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

不,Chrome和FF直接下载它,但不要分配扩展名。 Safari打开PDF并在浏览器中显示它。 IE打开一个标题为“application/octet-stream”的新选项卡,没有别的... – owsata 2012-07-10 15:00:10

8

您可以创建一个锚的文件,如一个显示下方下载的base64 PDF:

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

其中pdfData是您的base64编码pdf,如“data:application/pdf; base64,JVBERi0xLjQKJcOkw7zDtsOfCjIgMCBvYmoKPDwvTGVuZ3RoIDMgMCBSL0ZpbHRlci9GbGF0ZURlY29kZT4 + CnN0cmVhbQp4nO1cyY4ktxG911fUWUC3kjsTaBTQ1Ytg32QN4I Pgk23JMDQ2LB/0 + 2YsZAQzmZk1PSPIEB ...“

11

我知道这个问题已经过时了,但也想完成这个并且在看过程中碰到它。对于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); } 
+0

只适用于IE> = 10 – 2015-07-10 05:54:06

+0

文件浏览器在Safari中失败:( – jrhamza 2015-12-08 07:48:56

+0

我在此链接上发布了解决方案 https:/ /stackoverflow.com/questions/34436133/pdf-is-blank-when-downloading-using-javascript/45669785#45669785 它在IE,CHROME,FF中工作正常。 如果此解决方案可以帮助您,请尝试投票 – 2017-08-14 07:53:54

相关问题