Question

我使用a元素作为文件的下载按钮，这些文件我必须先按照here，here和here所述通过AJAX查询。我将文件数据作为Data-URI放入一个元素中，以创建一个下载按钮。不幸的是，我不能只指向文件，而必须那样做。对于大多数下载格式的HTML，CSV，它的工作方式如下：

var mimeType = "text/html"; // example. works also with others.
var BOM = '\ufeff';
var url = "data:"+ mimeType +";charset=UTF-8," + BOM + encodeURIComponent(response.data);
var linkElem = document.querySelector("#hiddenDownloadLink");
var link = angular.element(linkElem);
link.prop("href", url);
link.prop("download", 'myFile.' + extension);
linkElem.click();

好的。这样可行。但不适用于PDF。

我在后端创建了一个PDF（java，带有openhtmltopdf，但我猜没关系，因为PDF绝对正确）

httpOutputMessage.getHeaders().add(HttpHeaders.CONTENT_TYPE, "application/pdf");
httpOutputMessage.getHeaders().add(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"myFile.pdf\"");
makePdf(httpOutputMessage.getBody());

如果我直接查询后端，或者即使我将输出记录到文件中，一切都很好。但是，当我如上所述使用我的下载控制器时，我得到的PDF页数正确，但完全空白！，我认为一定存在编码问题。我尝试了有无BOM，也有无encodeURIComponent。

我也尝试使用base64-decoding作为。因为window.atob（response.data）由于换行和其他原因而失败，所以我尝试了this转换。结果是PDF损坏。导致PDF损坏。我不确定这是否有意义。

我的PDF数据是这样开始的，因此无论如何都不压缩或编码：

%PDF-1.4
%����
1 0 obj
<<
/Type /Catalog
/Version /1.7
/Pages 2 0 R
>>
endobj
3 0 obj
<<

我还尝试将字节流转换为blob并按照here或here的描述生成链接，但这会创建损坏的PDF。

任何想法，为什么我会得到空白的PDF或这里可能出什么问题以及如何重新显示下载链接？

- 编辑1

我也获得了有效，但尝试时为空白PDF

var blob = new Blob([response.data], {type: 'application/pdf'});
var url = window.URL.createObjectURL(blob);
link.prop("href", url);

通过此功能通过管道传送response.data时，我得到的PDF损坏。

var utf8_to_b64 = function(str) {
  var unescape = window.unescape || window.decodeURI;
  str = encodeURIComponent(str);
  str = unescape(str);
  str = window.btoa(str);

  return str;
};

Answer 1

因此，我可以完全重述您的情况。我通过后端的AJAX请求加载并输出了4页的PDF文件，并且在您的代码示例中获得了4页的空白PDF。

这就是我所做的事情（并下载了正确的PDF）：

我base64对后端的输出进行了编码。就我而言，我使用的是PHP，所以它是这样的：

$pdf = file_get_contents('test.pdf');
header('Content-Type: application/pdf');
echo base64_encode($pdf);

然后在前端我只更改了这一行：

var url = "data:"+ mimeType +";charset=UTF-8," + BOM + encodeURIComponent(response.data);

对此：

var url = "data:"+ mimeType +";base64," + encodeURIComponent(response.data);

希望这会有所帮助。

PDF在HREF中的a元素下载结果为空PDF

1 个答案: