错误：Blob 对象创建空 PDF 文件

Question

我遇到了一个问题，我从 Java servlet 接收有效的 PDF，但当我在 Javascript 中创建 Blob 对象时，它没有被正确创建。

我收到的数据有这样的方面：

但是PDF文件是这样的：

这就是我在 Java (AEM) 中创建 PDF 二进制链的方式：

private void streamPDF (final SlingHttpServletResponse response, final Resource pdfRes) throws IOException {
        String fileName = pdfRes.getPath().substring(pdfRes.getPath().lastIndexOf("/") + 1);

        response.setContentType("application/pdf");
        response.setHeader("Content-disposition", "attachment; filename=" + fileName);

        Asset asset = pdfRes.adaptTo(Asset.class);
        final InputStream in = asset.getOriginal().getStream();

        final OutputStream out = response.getOutputStream();

        IOUtils.copy(in, out);

        out.close();

        in.close();
    }

我在 Javascript 中是这样读的：

sendServletDownload: function (title, path) {
        let url = "myurl.pdf";
        $.ajax({
           url: url,
           type: 'GET',
           data: {
               path: path
           },
           success: function (data) {
               var blob = new Blob([data], { type: 'application/pdf' });

               // Create an URL object for the Blob
               var url = window.URL.createObjectURL(blob);

               // Configure the download link with the Blob's URL and the filename
               var downloadLink = document.getElementById('downloadLink');
               downloadLink.href = url;

               downloadLink.download = title + '.pdf';

               // Simulate a click in the link to iniciate the download
               downloadLink.click();

               // Free the URL of the object when it's not necessary anymore
               window.URL.revokeObjectURL(url);
           }, error: function (XMLHttpRequest, textStatus, errorThrown) {
              console.log("Error: {}", errorThrown);
           },
            xhrFields: {
                responseType: 'arraybuffer' // Stablish responseType to 'arraybuffer'
            }
       });
    }

我尝试将“数据”的解码从 base64 更改为 ArrayBuffer，但这不是问题。

function base64ToArrayBuffer(data) {
    var binaryString = window.atob(data);
    var binaryLen = binaryString.length;
    var bytes = new Uint8Array(binaryLen);
    for (var i = 0; i < binaryLen; i++) {
        var ascii = binaryString.charCodeAt(i);
        bytes[i] = ascii;
    }
    return bytes;
};

Answer 1

我终于可以解决了！

问题是Ajax调用的responseType不正确。

如果您遇到同样的问题，请尝试将其添加到您的 Ajax 调用中：

xhrFields: {
            responseType: 'arraybuffer' // Stablish responseType to 'arraybuffer'
        }

放入后应该是这样的：

$.ajax({
       url: url,
       type: 'GET',
       data: {
           path: path
       },
       success: function (data) {
           var blob = new Blob([data], { type: 'application/pdf' });

           // Create an URL object for the Blob
           var url = window.URL.createObjectURL(blob);

           // Configure the download link with the Blob's URL and the filename
           var downloadLink = document.getElementById('downloadLink');
           downloadLink.href = url;

           downloadLink.download = title + '.pdf';

           // Simulate a click in the link to iniciate the download
           downloadLink.click();

           // Free the URL of the object when it's not necessary anymore
           window.URL.revokeObjectURL(url);
       }, error: function (XMLHttpRequest, textStatus, errorThrown) {
          console.log("Error: {}", errorThrown);
       },
        xhrFields: {
            responseType: 'arraybuffer' // Stablish responseType to 'arraybuffer'
        }
   });