首先安装html2canvas,canvas2image npm i html2canvas npm i canvas2image 复制代码 引用 import html2canvas from 'html2canvas'; import canvas2image from 'canvas2image'; .... var box = document.getElementById("box"); //生成的DOM元素 var img = document.getElementById("img"); //需要展示的图片 //生成canvas html2canvas(box).then(function(canvas) { //生成图片 let url = canvas2image.saveAsPNG(canvas,true).getAttribute('src'); img.src = url; }); 复制代码 注意项 页面中如果引用跨域的资源图片,最终生成的图片会漏掉这些资源。建议使用同源资源 或者使用 html2canvas 的配置项 allowTaint; 页面中不要使用 css translate 属性,可能会丢失偏移的部分位置; 复制代码 html2canvas配置项 转载于:https://juejin.im/post/5c4f0aa06fb9a049f5718a58