时间戳

首页 > 解决方案 > html页面截图到pdf使用html2canvas和jspdf

javascript - html页面截图到pdf使用html2canvas和jspdf

问题描述

我正在尝试通过 php 页面的屏幕截图创建收据或发票到 pdf。我在 youtube 上找到了一个源代码并为自己尝试过，但是，它没有保存或下载任何 pdf。

这是代码，我使它尽可能短以便能够重新创建：

<html>
<body>
<div id="test">
<h1> Hello! Screenshot Me!</h1>
</div>
<button onclick="ss()">screenshot</button>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.2.0/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script>
function ss(){
    html2canvas(document.getElementById('test')).then(function(canvas){
        document.body.appendChild(canvas);
        var imgdata = canvas.toDataURL("image/jpg");
        var doc = new jsPDF();
        doc.addImage(imgdata,"JPG",10,10);
        doc.save("sample.pdf");
    });
}
</script>
</html>

在我观看的youtube中，每当他点击按钮时，它都会下载一个sample.pdf，这个没有或者我错过了什么，请帮忙

标签： javascriptphphtml

解决方案

这是 2020 年 12 月 16 日的工作代码

这只是一个问题

  1. 引用旧版本的 html2canvas
  2. 引用旧版jspdf
  3. 对 jspdf 的 API 调用略有错误

干杯

<html>

<body>
    <div id="test">
        <h1> Hello! Screenshot Me!</h1>
    </div>
    <button id="btn">screenshot</button>
</body>
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.7/dist/html2canvas.min.js"></script>
<script>
    window.onload = function () {
        console.log("Window is loaded")
        document.getElementById('btn').addEventListener("click", function () {
            html2canvas(document.getElementById('test')).then(function (canvas) {
                document.body.appendChild(canvas);
                var imgdata = canvas.toDataURL("image/jpg");
                var doc = new jspdf.jsPDF();
                doc.addImage(imgdata, "JPG", 10, 10);
                doc.save("sample.pdf");
            });
        })

    }

</script>

</html>

推荐阅读