jspdf - 使用 png 直接上传到 s3 的 pdf，png 已损坏

Posted 2023-03-03

【中文标题】jspdf - 使用 png 直接上传到 s3 的 pdf，png 已损坏

【英文标题】：jspdf - pdf uploaded directly to s3 with png, png is corrupt

【发布时间】：2018-07-12 01:59:39

【问题描述】：

我正在使用 jspdf 库和 Angular 5 在客户端生成 PDF。我正在向 pdf 添加一个 png 图像。

我已经使用 dataurl.net 生成了我的 .png 文件。当我将它添加到 pdf 并使用 doc.save() 时，它会在本地下载，并且看起来很棒并且运行良好。但是，我尝试将其直接上传到 s3，改用 doc.output()，当它到达那里时，它看起来像这样：https://imgur.com/a/ZuOd0

我要放入 s3 的代码如下所示：

const headers = new HttpHeaders().set('Content-Type', 'application/pdf')
this.http.put(url, file, headers)

file = doc.output()

有人知道是什么原因造成的吗？

【问题讨论】：

我实际上注意到在本地保存 doc.output() 的结果有同样的问题，所以我怀疑这是 jspdf 库或我调用 doc.output( )，与 angular/s3 或上传过程无关

看起来字符编码或流数据有一些差异，您可以在此处查看差异：quickdiff.net/?unique_id=9084579D-3251-D1F4-F253-FF170459FA69

jsfiddle 的问题：jsfiddle.net/96qcc4bd

看起来数据是一样的，但是因为它之间有二进制流。将其转换为字符串会在这里产生问题。你最好的办法是在这里使用base64数据，然后发送到aws

我也尝试过发送 base64 版本，但亚马逊似乎对此没有做任何事情，因此它保持 base64 编码并导致“损坏的 pdf 文件”

【参考方案1】：

我必须将 ArrayBuffer 传递给 s3 才能使其工作。

所以唯一的代码更改是使用doc.output('arraybuffer')

【参考方案2】：

您需要将 ArrayBuffer 传递给 s3 才能使其工作。

只需要改变 doc.output('arraybuffer')