JavaScript中的HTML图片转PDF转换器

Question

HTML 代码:

<img class="imagepdf "src="www.images.com/someimage" alt="Smiley face" height="42" width="42">

我希望将这张图片转换为pdf格式。我正在使用 jspdf() 进行操作，但是我没有得到想要的输出。有没有人可以在fiddle上给我一个关于chrome pdf转换的实时例子呢？

- Bad Coder

---

为什么不直接阅读文档，它非常简单明了，确保你的控制台已经打开并检查错误。 - adeneo

我已经使用了addimage和addhtml方法，但是我没有得到输出结果？ - Bad Coder

Answer 1

这里是来自它的github网站的代码。

var getImageFromUrl = function(url, callback) {
    var img = new Image();

    img.onError = function() {
        alert('Cannot load image: "'+url+'"');
    };
    img.onload = function() {
        callback(img);
    };
    img.src = url;
}


var createPDF = function(imgData) {
    var doc = new jsPDF();



    doc.addImage(imgData, 'JPEG', 10, 10, 50, 50, 'monkey');
    doc.addImage('monkey', 70, 10, 100, 120); // use the cached 'monkey' image, JPEG is optional regardless



    doc.output('datauri');
}

getImageFromUrl('thinking-monkey.jpg', createPDF);

如果您在使用Chrome时遇到了安全限制，无法从URL加载图片，则只需添加以下行即可解决：
img.crossOrigin = " ";
这对Chrome也有效。

- user3861247

Answer 2

我的回答仅适用于那些需要将HTML中的PNG转换为PDF的人，因为我发现这很有帮助，所以想要发布它。

实际上，我在我的React文件中使用了这个方法（将HTML转换为图像，然后再转换为PDF）。

i used 2 packages : htmlToImage and the above jsPDF

import { jsPDF } from 'jspdf';

  


htmlToImage.toPng(document && document.getElementById('ticket'),
     {     quality: 1, backgroundColor: '#ffffff' })
          .then(function(dataUrl) {
            var doc = new jsPDF();
            doc.addImage(dataUrl, 'PNG', 15, 40, 180, 180);
            doc.save('pension-report' + '.pdf');
          });
    }


Explanation

for my project, I need to convert the set of divs into an image file which I did using htmlToImage
.
htmlToImage gives me in png format as it has a bunch of other different option .toCanvas etc


      

- Akash Pandey