Question

所以这里我的问题：我有一个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要求存在扩展但在这种情况下data-URI没有。我坚持这里的原因，如果chrome和safari让它工作，那么必须有一个FF和IE的解决方案

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

那么请聪明的人，是否有可能通过一些黑客或其他JS下载插件？

Answer 1

您应该可以使用

下载文件

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

Answer 2

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

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

其中的 pdfData 是base64编码的PDF等的 “数据：应用/ PDF; BASE64，JVBERi0xLjQKJcOkw7zDtsOfCjIgMCBvYmoKPDwvTGVuZ3RoIDMgMCBSL0ZpbHRlci9GbGF0ZURlY29kZT4 + CnN0cmVhbQp4nO1cyY4ktxG911fUWUC3kjsTaBTQ1Ytg32QN4IPgk23JMDQ2LB / 0 + 2YsZAQzmZk1PSPIEB ...”

Answer 3

我知道这个问题很老，但也想完成这个并且在看的时候遇到它。对于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;

使用链接的文件管理器：

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

Answer 4

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

Answer 5

您将不需要任何库。 JavaScript已经支持此功能。这是我的端到端解决方案。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'your-end-point', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
xhr.responseType = 'blob';
xhr.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
       if (window.navigator.msSaveOrOpenBlob) {
           window.navigator.msSaveBlob(this.response, "fileName.pdf");
        } else {
           const downloadLink = window.document.createElement('a');
           const contentTypeHeader = xhr.getResponseHeader("Content-Type");
           downloadLink.href = window.URL.createObjectURL(new Blob([this.response], { type: contentTypeHeader }));
           downloadLink.download = "fileName.pdf";
           document.body.appendChild(downloadLink);
           downloadLink.click();
           document.body.removeChild(downloadLink);
        }
    }
};
xhr.send(null);

这也适用于 .xls 或 .zip 文件。您只需要将文件名更改为fileName.xls或 fileName.zip 。这取决于您的情况。

Answer 6

您可以使用此功能从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的锚标记并下载文件。如果要使用按钮，则可以在按钮单击时调用单击方法。

我希望这对您有所帮助

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

6 个答案: