JavaScript Blob 返回损坏的 PDF答案

【问题标题】：JavaScript Blob returning broken PDFJavaScript Blob 返回损坏的 PDF
【发布时间】：2020-01-01 09:38:35
【问题描述】：

我想使用 JavaScript 并使用 blob 下载 PDF 文档，如 here 所述。如果我在没有 JS 的情况下直接下载我的 PDF，我会收到一个正常工作的 PDF，但如果我使用 blobJavaScript 下载它/em> 我无法打开我的 PDF。我在 Mozilla Firefox 68.0.2 (64-Bit) 和 Google Chrome 76.0.3809.132 (Official Build) (64-Bit) 上对其进行了测试，但没有成功。

我测试了不同的 Content-Type 标头，但无法解决该问题。我测试过：

文本/纯文本
文本/html
数据：附件/文本
申请/pdf

我的测试服务器正在返回这些标头：

HTTP/1.1 200 OK
Content-Disposition: attachment;filename=document.pdf
Content-Type: application/pdf
Content-Length: 577479

我也尝试将编码设置为UTF8，但结果是一样的。

我使用 AJAX 请求它（也许问题出在此处？）并且我正在使用 jQuery v3.3.1。

$.ajax({
    type    : "GET",
    url     : pdfDownloadURL,
    async   : true,
    success : function(blob) {

        var contentType = "attachment/pdf";

        try {
            var blob =  new Blob([blob], {type: contentType});
        } catch (e) {
            // The BlobBuilder API has been deprecated in favour of Blob, but older
            // browsers don't know about the Blob constructor
            // IE10 also supports BlobBuilder, but since the `Blob` constructor
            //  also works, there's no need to add `MSBlobBuilder`.
            var BlobBuilder = window.WebKitBlobBuilder || window.MozBlobBuilder;
            var bb = new BlobBuilder();
            bb.append(blob);
            var blob =  bb.getBlob(contentType);
        }

        var link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.target = "_blank";
        link.style = "display: none";
        link.download = "document2.pdf";
        document.body.appendChild(link);
        link.click();
    },

    // ...

});

document1.pdf（直接下载）

document2.pdf（使用 JavaScript blob 方法下载）

我检查了sniffing tool fiddler 的请求，并且服务器总是返回相同的文档，所以问题一定出在我的 JavaScript 部分。正如您在红色框中看到的那样 - 这些字节是相同的，但是我们有不同的字节，但是我看到服务器在两种情况下都返回了相同的文档，所以这个问题只发生在 客户端.

document1.pdf 的大小（正常）：577.479 字节
document2.pdf 的大小（损坏）：1.034.166 字节

然后我尝试使用 google chrome 76.0.3809.132, 64-Bit 打开 document2.pdf，但失败了。

我的 jQuery 版本（在那个 AJAX 部分）有问题吗？

【问题讨论】：

stackoverflow.com/a/17682424/1561413
@crayze 好的，它有效，谢谢！问题解决了

标签： javascript pdf firefox download blob

【解决方案1】：

这是解决这个问题的方法：Using jQuery's ajax method to retrieve images as a blob

https://stackoverflow.com/a/17682424

jQuery.ajax({
        url:'https://images.unsplash.com/photo-1465101108990-e5eac17cf76d?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ%3D%3D&s=471ae675a6140db97fea32b55781479e',
        cache:false,
        xhr:function(){// Seems like the only way to get access to the xhr object
            var xhr = new XMLHttpRequest();
            xhr.responseType= 'blob'
            return xhr;
        },
        success: function(data){
            var img = document.getElementById('img');
            var url = window.URL || window.webkitURL;
            img.src = url.createObjectURL(data);
        },
        error:function(){

        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<img id="img" width=100%>

【讨论】：