下载html输出作为图像

Question

我是前端编程的新手，我需要下载/导出 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 ，它适用于完美的表格但是我不知道如何在这种情况下使用它。

任何帮助都将受到高度赞赏。

Answer 1

您可以使用html2canvas（https://html2canvas.hertzen.com/）将DOM元素渲染到隐藏的画布，然后使用它：HTML5 canvas to PDF将其导出到文件中。

Answer 2

您可以查看jQuery Datatables页面jQuery DataTables and ASP.NET MVC Integration上包含所有部分（从第I部分到第VI部分）的示例用法。希望这会有所帮助...