将 html 输出下载为图像答案

【问题标题】：Download html output as an image将 html 输出下载为图像
【发布时间】：2017-07-26 05:37:30
【问题描述】：

我是前端编程的新手，我需要下载/导出 html 输出为图像或 PDF。

假设我有这个代码：

<div class="col-md-6">
    <h3>Front Side</h3>
        <div class="studentcard-frontside">
            <img src="https://dummyimage.com/100x100/000/fff" class="img-responsive"/>
            <div class="student-detail">
                <p>Student Name: <span>Bilal Zafar</span></p>
                <p>Father Name: <span>Zafarullah Khan</span></p>
                <p>Date of Birth: <span>9th March, 1991</span></p>
                <p>Address: <span>House # 12, Street # 43, Islamabad</span></p>
                <p>If Found, <span>Please call +92-333-152</span></p>
            </div>
        </div>
</div>

在这个 div 上做了一些样式后，它看起来像一张学生证，如下所示：

现在我想要的是，我需要两个按钮下载为图像和 PDF 并打印这张特定的卡片。有什么办法可以将此html输出转换为图像和PDF？

我有谷歌，我发现 dataTables jquery，它适用于表格完美但我不知道如何在这种情况下使用它。

我们将不胜感激。

【问题讨论】：

显示你首先尝试了什么以及你在什么时候卡住了。
@BilalZafar 你试过我下面的答案了吗？？？

标签： jquery html pdf datatables export

【解决方案1】：

您可能会在jQuery DataTables and ASP.NET MVC Integration 页面上查看有关jQuery Datatables 的示例用法以及所有部分（从第一部分到第六部分）。希望这会有所帮助...

【讨论】：

【解决方案2】：

您可以使用 html2canvas (https://html2canvas.hertzen.com/) 将 DOM 元素呈现到隐藏的画布上，然后使用：HTML5 canvas to PDF 将其导出到文件中。

【讨论】：