在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下载插件？

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));

不，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 ...“

答

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

只适用于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

相关推荐