DOMExeption关于在angular 2+中使用jsPDF生成pdf

Question

我有一个简单的typescript函数，可以导出图片和上面的文本。图片在网上，并且有一个有效的url。但我收到了以下错误：

错误DOMException：未能对"XMLHttpRequest"执行"send"：未能加载"https://docs.gimp.org/es/images/tutorials/quickie-jpeg-100.jpg"。

我使用的代码如下：

getPdf () {
const imgData = 'https://docs.gimp.org/es/images/tutorials/quickie-jpeg-100.jpg';
const pdf = new jsPDF();
pdf.addImage(imgData, 'JPG', 15, 40, 100, 100);
pdf.text(30, 30, 'test');
pdf.save('my_pdf.pdf');
}

我看了他们的文档和现场演示。我似乎有相同的代码。你也可以在这里找到一个plunker

如有任何帮助，我们将不胜感激。

Answer 1

这是因为您使用图像url作为数据url。根据JSPDF演示

"您需要将您的图像制作成数据URL">

"使用http://dataurl.net/#dataurlmaker">

您可以在jsPDF网站上查看

所以基本上，在本地系统中下载你的图像，从中生成数据url，用你的url替换它，它就会按预期工作。无需更改任何其他内容。你可以在这里找到相同的plunker

const imgData = 'imageDataUrl Here';