使用jsPDF将本地图像打印成PDF

Question

我会在PDF文件中添加一张图片。

const pdf = new jsPDF('l', 'px', 'a4');
const imgData = 'data:image/jpeg;base64,' + btoa(`assets/img/brand/png/Logos.png`);
console.log(imgData);
pdf.addImage(imgData, 'jpeg', 15, 40, 180, 160);
pdf.save(`ind.pdf`);

我遇到了一个错误

 Error: addImage does not support files of type 'UNKNOWN'

我认为错误来自于btoa()，它编码了路径字符串但没有编码文件本身。

我该如何将png图像传递给btoa，而不是路径字符串？

- Hamza Haddad

---

这个问题不应该被标记为 Angular。 - Harry

可能是[使用jspdf添加pdf中的图像]的重复问题(https://dev59.com/LWIk5IYBdhLWcg3wrv24)。 - weegee

@Harry 这可能是一个 Angular 错误，我或许应该给文件取个不同的名字。 - Hamza Haddad

@window.document 在我的例子中，我在输出之前添加了 Image 但是没有起作用。 - Hamza Haddad

Answer 1

当我试图使用图像文件而不是Base64编码的图像时，我遇到了jsPDF版本的问题。在我改用最新版本的jsPDF之后，这个问题得到了解决。

function fnProcess() {

  var img = new Image();
  var src = "https://www.jeffld.com/img/so/testimage001.png";
  img.src = src;

  console.log("Create jsPDF object");
  var pdf = new jsPDF("p", "pt", "letter");

  console.log("Add Image");
  pdf.addImage(img, "png", 10, 10, 150, 150);

  console.log("Save PDF");
  pdf.save("file.pdf");
  console.log("done");
}

<!-- Latest version of jsPDF Version 1.5.3 Built on 2018-12-27T14:11:42.696Z -->
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>

<button onclick="fnProcess()">Process</button>

<p>Image to PDF</p>    
<img id="activityLogo" src="https://www.jeffld.com/img/so/testimage001.png" alt="" />
     

- jeffld

Answer 2

如果您想打印上传的图像。

  let image = new Image();
  let source = URL.createObjectURL(e.target.files[0]); //general case
  image.src = source ;

  let pdf = new jsPDF();
  pdf.addImage(image, "jpeg", 10, 20, 300, 300);

  pdf.save("image.pdf");
}```

- Zahir Masoodi