通过 jQuery 下载时获取空 PDF答案

【问题标题】：Getting empty PDF while downloading through jQuery通过 jQuery 下载时获取空 PDF
【发布时间】：2021-07-07 11:34:59
【问题描述】：

我正在尝试通过 JavaScript / jQuery 下载 pdf 文件。我的代码是：

function ShouldGeneratePdf() {
            $.ajax({
                url: "/Report/EmployeeReport",
                type: 'POST',
                data: {
                    EmployeeId: $('#EmployeeId').val()
                },
                cache: false,
                async: false,
                success: function (data) {
                    debugger;
                    //Convert the Byte Data to BLOB object.
                    var blob = new Blob([data], { type: "application/pdf" });

                    //Check the Browser type and download the File.
                    var isIE = false || !!document.documentMode;
                    if (isIE) {
                        window.navigator.msSaveBlob(blob, fileName);
                    } else {
                        var url = window.URL || window.webkitURL;
                        link = url.createObjectURL(blob);
                        var a = $("<a />");
                        a.attr("download", "testFile.pdf");
                        a.attr("href", link);
                        $("body").append(a);
                        a[0].click();
                        $("body").remove(a);
                    }
                },
                error: function () {
                    debugger;
                }
            });
        }

上述方法确实下载了pdf，但下载的文件为空。知道我在做什么错吗？任何帮助将不胜感激。

PS：PDF 文件也包含图片。

【问题讨论】：

标签： javascript jquery blob

【解决方案1】：

经过一个非常令人沮丧的一周试图弄清楚如何解决这个问题，我可以建议你检查以下三个基本点：

1.- 如果您使用子域或完全不同的域，请检查服务器的 CORS policy 是否对您的站点请求开放。这取决于您的服务类型（我的是 ASP.NET MVC）。

2.- 我的 Web App 和我的 Web API 有冲突（因为我从一开始就没有使用 ASP.NET Core），所以我不能正常使用我的fetch 函数，但是如果不是您的情况，请尝试使用来自您的客户端 as suggested here 的 fetch API，因为它可以预期 直接来自请求的 blob 类型（您也可以尝试使用 Axios 或XMLHttpRequest 接近）。

3.-（最重要）最终对我有用的是在发送响应文件之前将文件 from the server 转换为 Base64，然后使用函数将 decode it from the client 转换为 Base64。即使我可以从 Safari 检查器预览它并且所有字节都具有完美的 PDF 响应，跳过这一步只会抛出一个空白 PDF，但这还不足以让浏览器正确下载它；所以先尝试编码。

4.- 最后记得在您的请求中定义最适合您需求的数据类型和内容类型。就我而言：

...
dataType: 'text',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
success: function(response) {
...

【讨论】：