插入jpg图像并使用jsPDF创建pdf

时间:2017-08-25 10:36:12

标签: javascript jspdf

我想使用jsPDF库在创建pdf文档时插入jpg图像。我试着使用这段代码:

var doc = new jsPDF();

var niceimage = new Image();

niceimage.src = '/resources/images/myimage.jpg';

doc.text(10, 10, 'Hello world!');

doc.addImage(niceimage, 'JPEG', 10, 10, 150, 76);

doc.save('a4.pdf');

我收到消息说它不是jpg图像。有什么想法吗?

1 个答案:

答案 0 :(得分:2)

根据我的研究,似乎文件myimage.jpg不能直接在jsPDF中使用。 应该将图像转换为base64文件,并在jsPDF中使用该方式。我找到了一个很棒的工具,用于将jpg和png文件转换为https://www.base64-image.de/到base64。

由于这些文件非常庞大,它们会增加javascript文件的大小。我找到了一个解决方案,将myimage.jpg文件的内容(base64)放在myimage.js中:

var myImage = 'data:image/jpeg;base64,/9j/4QAYR..very..very....long...string...'

在html文件中包含该文件:

<script type="text/javascript" src="/js/myimage.js"></script>

在您的主要javascript文件中,您可以写:

var doc = new jsPDF();

doc.text(10, 10, 'Hello world!');

doc.addImage(myImage, 'JPEG', 10, 30, 150, 76);

doc.save('a4.pdf');

你最终会得到Hello world!和下面的图像。

如果您是jsPDF新手,可以在https://parall.ax/products/jspdf

了解更多信息

希望有所帮助;)