html2canvas与jspdf生成PDF简易实例页面

效果：

示意布局

《CSS选择器第2版》上架啦

点击这里购买

代码：

CSS代码：

.flex {
    display: inline-flex;    
    border: 1px solid #999;
    padding: 15px;
    align-items: center;
    gap: 8px;
}

HTML代码：

<div id="target" class="flex">
    <img src="book.jpg" width="120" height="146" />
    <div>
        《CSS选择器 第2版》上架啦
        <p>点击<a href="https://item.jd.com/13710339.html" target="_blank">这里</a>购买</p>
    </div>
</div>
<p>
    <button id="button">生成PDF</button>
</p>

JS代码：

<script src="./html2canvas.min.js"></script>
<script src="./jspdf.umd.min.js"></script>
<script>
button.onclick = function () {
    var pdf = new jspdf.jsPDF();
    html2canvas(target).then(function(canvas) {
        pdf.addImage(canvas.toDataURL('image/jpeg'), 10, 10);
        pdf.save('mybook.pdf');
    });
};
</script>