使用 jsPDF 将本地图像打印为 pdf答案

【问题标题】：print local image to pdf using jsPDF使用 jsPDF 将本地图像打印为 pdf
【发布时间】：2019-09-09 22:15:00
【问题描述】：

我会将图像添加到 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？

【问题讨论】：

这个问题不应该被标记为 Angular
Add image in pdf using jspdf的可能重复
@Harry 可能是角度错误，我可能应该以不同的方式调用文件。
@window.document 在我的示例中，我在输出之前添加了图像但不起作用

标签： javascript html jspdf

【解决方案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="" />

【讨论】：

【解决方案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");
}```

【讨论】：