使用 JavaScript 在客户端将 base64 字符串保存为 PDF

IT技术 javascript internet-explorer firefox pdf base64
2021-03-10 14:03:27

所以这里是我的问题：我有一个 pdf 文件作为我从服务器获取的 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 没有。我在这里坚持的原因，如果 chrome 和 safari 让它工作，那么必须有一个 FF 和 IE 的解决方案

我知道有一些相关的问题，但不是真正的确切问题，现在也有点旧。我知道一种解决方法是在服务器端生成 pdf，但我想在客户端生成它。

所以请聪明的人，是否有可能通过一些黑客或额外的 JS 下载插件？

6个回答

您可以创建一个如下所示的锚点来下载base64 pdf：

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

其中pdfData是您的base64编码的PDF像“数据：应用程序/ PDF格式; BASE64，JVBERi0xLjQKJcOkw7zDtsOfCjIgMCBvYmoKPDwvTGVuZ3RoIDMgMCBSL0ZpbHRlci9GbGF0ZURlY29kZT4 + CnN0cmVhbQp4nO1cyY4ktxG911fUWUC3kjsTaBTQ1Ytg32QN4IPgk23JMDQ2LB / 0 + 2YsZAQzmZk1PSPIEB ......”

@OssSilva 很高兴听到这个消息！
2021-04-16 14:03:27
你的这些信息帮助我在 Salesforce Lightning 中完成了它，使用这个字符串你可以点击按钮下载文件
2021-04-18 14:03:27
在 C# 中，当您返回 FileContentResult 时，它会保留以 base64 编码的文件，但是没有指示它并且没有 MIME 类型..所以为了在客户端正确实现它，我必须附加数据：application/pdf;base64在字符串前面，它起作用了！
2021-05-07 14:03:27
这帮助我避免为了下载文件而创建额外的后端端点，谢谢！！
2021-05-13 14:03:27

您可以使用此功能从 base64 下载文件。 

function downloadPDF(pdf) {
const linkSource = `data:application/pdf;base64,${pdf}`;
const downloadLink = document.createElement("a");
const fileName = "abc.pdf";
downloadLink.href = linkSource;
downloadLink.download = fileName;
downloadLink.click();}

此代码将使用 href 和下载文件制作一个锚标记。如果要使用按钮，则可以在单击按钮时调用 click 方法。

我希望这会帮助你谢谢

您应该能够使用下载文件

window.open("data:application/pdf;base64," + Base64.encode(out));
不，Chrome 和 FF 直接下载它但不分配扩展名。Safari 打开 PDF 并将其显示在浏览器中。IE 打开一个标题为“application/octet-stream”的新标签页，没有别的...
2021-04-24 14:03:27
我使用数据结构进行了直接重定向，但是它需要一个容器或一种机制来将数据解析为可用格式（例如：iFrame）。然而，我没有按照规定测试这个机制。
2021-05-05 14:03:27

我知道这个问题很老，但也想完成这个并且在看的时候遇到了它。对于 Internet Explorer，我使用这里的代码来保存 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;

使用链接的文件保护程序：

if (window.saveAs) { window.saveAs(blob, name); }
    else { navigator.saveBlob(blob, name); }
文件保护程序在 Safari 中也失败 :(
2021-05-08 14:03:27
我在此链接stackoverflow.com/questions/34436133/...上发布了解决方案， 它在 IE、CHROME、FF 中运行良好。如果此解决方案对您有帮助，请尝试投票
2021-05-16 14:03:27 

dataURItoBlob(dataURI) {
      const byteString = window.atob(dataURI);
      const arrayBuffer = new ArrayBuffer(byteString.length);
      const int8Array = new Uint8Array(arrayBuffer);
      for (let i = 0; i < byteString.length; i++) {
        int8Array[i] = byteString.charCodeAt(i);
      }
      const blob = new Blob([int8Array], { type: 'application/pdf'});
      return blob;
    }

// data should be your response data in base64 format

const blob = this.dataURItoBlob(data);
const url = URL.createObjectURL(blob);

// to open the PDF in a new window
window.open(url, '_blank');

我很高兴@RicardoLerma。
2021-04-18 14:03:27
我在互联网上寻找了几种解决方案，这是唯一对我有用的方法，谢谢 Manas Sahu 先生
2021-05-14 14:03:27
其它你可能感兴趣的问题
上一篇将数组转换为对象键 下一篇如何使用 Node.js 将 base64 编码的图像（字符串）直接上传到 Google Cloud Storage 存储桶？