将Bootstrap页面转换为PDF?

时间:2018-06-26 20:05:26

标签: html5 pdf twitter-bootstrap-3

我正在寻找一种将使用Bootstrap设计的页面转换为PDF的方法。我一直在玩jsPDF,并且能够将内容另存为pdf,但是我不确定如何将设计也转换为pdf。

以前有人做过吗,或者有人有建议吗?

1 个答案:

答案 0 :(得分:-1)

我的解决方法是使用html2canvas创建网页图像,然后使用jsPDF将图像另存为pdf。

<!-- jsPDF -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.debug.js" integrity="sha384-THVO/sM0mFD9h7dfSndI6TS0PgAGavwKvB5hAxRRvc0o9cPLohB0wb/PTA7LdUHs" crossorigin="anonymous"></script>
</html>

<!-- html2canvas -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

<script>
    html2canvas(document.body,
    {
        onrendered:function(canvas)
        {

            //create image from web page
            var img = canvas.toDataURL("image/png");

            //create pdf object and add image to it, and then save
            var doc = new jsPDF('landscape');
            doc.addImage(img,'JPEG',5,5);
            doc.output('save', 'path/and/filename');

        }
    });
</script>