使用html2canvas对当前页面进行生成图片

最新推荐文章于 2025-07-11 16:09:48 发布

夏微凉秋微暖

最新推荐文章于 2025-07-11 16:09:48 发布

阅读量3.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：其他技术前端技术文章标签： html jquery

本文链接：https://blog.youkuaiyun.com/pengbin790000/article/details/78523085

其他技术同时被 2 个专栏收录

53 篇文章

订阅专栏

前端技术

28 篇文章

订阅专栏

本文介绍如何利用html2canvas库将网页内容转换为图片，并进一步生成PDF文件的方法。通过两个示例函数down和down2展示了不同的配置选项，如设置高度、缩放比例等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.需要导入jquery

2.导入（html2canvas.min.js）

代码如下：

function down(){
  //l:横向， p：纵向； 单位： in:英寸，mm毫米；px：像素；  画布大小：默认是A4纸大小  
   // var pdf = new jsPDF('p', 'mm', [230, 250]); //230 x 250  
    html2canvas($("#example-2"),{  
        height: 12000,   
        onrendered:function(canvas){  
            var imgData=canvas.toDataURL();  
           // pdf.addImage(imgData, 'JPEG', 5, 5, 225 , 235); //第3、4个参数是位置（x,y），第5、6个参数是宽，高    
           // pdf.save(new Date().getTime()+'.pdf');  
        }  
    }); 

}

function down2(){
   var str = $('#example-2');  
//console.log(str);  
html2canvas([str.get(0)], {
    scale: 2,
    onrendered: function (canvas) {  
        var image = canvas.toDataURL("image/png");  
        console.log(image);
        var pHtml = "<img src="+image+" />";  
        $('#pic').html(pHtml);  
    }  
});  


//配合着vueJs
<button v-on:click="greet">Greet</button>
<button onclick="down2()">ok</button>

<div id="pic">
图片
</div>