jspdf - 将PDF直接上传到S3与PNG一起，但PNG文件损坏。

Question

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

我使用dataurl.net生成了我的.png文件。当我将它添加到pdf并使用doc.save()时，它可以完美下载并且看起来很棒。然而，我正在尝试直接使用doc.output()将其上传到s3，但是当它到达那里时，它看起来像这样：https://imgur.com/a/ZuOd0

我用于PUT到s3的代码如下：

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

使用 file = doc.output()

有人知道这可能是什么原因吗？

- Westwick

---

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

似乎流数据的字符编码或其他方面存在差异，您可以在此处查看差异：https://quickdiff.net/?unique_id=9084579D-3251-D1F4-F253-FF170459FA69 - Westwick

看起来数据是相同的，但由于其中有二进制流。将其转换为字符串会在这里创建问题。你最好使用base64数据，然后将其发送到aws。 - Tarun Lalwani

我按照原始问题中的要求进行了PUT操作，尝试以原始数据或b64编码数据的不同方式传递它。当我对数据进行b64解码时，它仍然存在相同的问题，正如你所提到的，我认为这是将其转换为字符串的问题。 - Westwick

是的，我也尝试过那个方法，以及与 new Buffer()、.toString('ascii')、.toString('binary') 等结合使用，但都没有起作用 :( - Westwick

Answer 1

我必须将ArrayBuffer传递给S3才能使其正常工作。

因此，唯一的代码更改是使用doc.output('arraybuffer')

- Westwick

Answer 2

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

只需更改doc.output('arraybuffer')。

- Peter Horton

Answer 3

当我尝试将ArrayBuffer传递给s3时，遇到了问题。相反，我可以将jspdf ArrayBuffer转换为缓冲区，并将其作为内容发送到s3，如下所示：

const arrayBuffer = doc.output('arraybuffer');
doc.close();

// convert to Buffer
const pdfBuffer = Buffer.from(new Uint8Array(arrayBuffer));

- Kyle B