通过 jQuery 下载时获取空 PDF

Posted 2023-03-22

【中文标题】通过 jQuery 下载时获取空 PDF

【英文标题】：Getting empty PDF while downloading through jQuery

【发布时间】：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 文件也包含图片。

【参考方案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) 
...