使用 javascript 将 html 页面转换为 pdf 时，我无法看到图像答案

【问题标题】：I was not able to see images while converting html page to pdf using javascript使用 javascript 将 html 页面转换为 pdf 时，我无法看到图像
【发布时间】：2021-07-28 19:04:05
【问题描述】：

这是我的代码，而我下载 html 的 pdf 图像属性缺失。假设在生成发票等情况下，我们应该打印包含详细信息和徽标的表格。但使用此代码下载的 pdf 中未显示图像。请提供可能的分辨率和原因。提前感谢

$(document).on('click', '#btn', function() {
  let pdf = new jsPDF();
  let section = $('body');
  let page = function() {
    pdf.save('pagename.pdf');
  };
  pdf.addHTML(section, page);

})

html,
body {
  overflow-x: hidden;
}

#btn {
  padding: 10px;
  border: 0px;
  margin: 50px;
  cursor: pointer;
}

<!DOCTYPE html>
<html>

<head>
  <title>HTML with Image</title>
  <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
  <style type="text/css">

  </style>
</head>

<body>
  <button id="btn">Convert to PDF</button>
  <div id="text">

    <h2>HTML Page with Image to PDF</h2>
    <img src="http://photojournal.jpl.nasa.gov/jpeg/PIA17555.jpg" width="300px">

  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
  <script src="custom.js"></script>
  <script type="text/javascript">
  </script>
</body>

</html>

除了 images 之外，所有的 html 元素都可以正常工作。请帮我解决这个问题。

【问题讨论】：

标签： javascript html2canvas html2pdf

【解决方案1】：

jsPdf 不支持以您尝试添加图像的方式添加图像，因为 addtHtml 函数使用 html2canvas 模块将您的 Html 转换为画布，因此 jsPdf 可以将其渲染为 pdf。请检查下面的链接。

https://weihui-guo.medium.com/save-html-page-and-online-images-as-a-pdf-attachment-with-one-click-from-client-side-21d65656e764

【讨论】：