问题

最开始需要做一个网页的截图，结果发现有滚动条怎么都截取不成功，然后各种百度到了一个办法，就是复制那个节点到body，然后在截取那个复制的节点，小页面实验了一下，成功了好开心，代码是这样的。但是，有但是o(╥﹏╥)o。(最后附完整代码)

方法1（这里示例保存为图片）

这个方法如果你没有echarts图表，是可以实现滚动条完整截图的，测试过没有问题；

	//这个是保存为图片的方法
	 function saveFile(data, filename){
          var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
          save_link.href = data;
          save_link.download = filename;
          var event = document.createEvent('MouseEvents');
          event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
          save_link.dispatchEvent(event);
      };

	  //截图的关键代码
	  let targetDom = document.getElementById('pdfContentsDiv');   //原本需要截图的div
      let clonedNode = targetDom.cloneNode(true); //复制一个
      clonedNode.setAttribute("style",`width: ${targetDom.clientHeight};height: ${targetDom.clientWidth};`);  
      document.body.appendChild(clonedNode); //放到body后面
 
	 html2Canvas(clonedNode, {  
	          allowTaint: true,  
	          taintTest: false,  
	      }).then(function (canvas) {
	      	//这里保存为图片或保存到pdf的代码，这里示例保存为图片
			var pageData = canvas.toDataURL('image/jpeg', 1.0);
            saveFile(pageData.replace("image/jpeg", "image/octet-stream"),new Date().getTime()+".jpeg");
            
			document.body.removeChild(clonedNode);  //最后记得移除截图时添加的
	      })

方法二：解决页面中有echarts图表，复制后图表位置为空

然后，又开始各种尝试，在坑里面走了两天以后，最后终于发现了html2canvas截图成功的一个标准就是，外层div的高度跟里面需要截图的内容的高度一致就能完整的截图，（比如需要截图的外层div是800的高度有滚动条，里面的需要截图的内容是1800的高度，截图的时候就把1800的高度给需要截图的那个div就能完整截图），代码如下:

		//截图的关键代码
		let targetDom = document.getElementById('pdfContentsDiv'); //需要截图的div
		let domScrollHeight=targetDom.scrollHeight;  //获取滚动的高度
		targetDom.setAttribute("style",`height: ${domScrollHeight}px;`);  // 把高度赋值给需要截图的那个div
		
		html2Canvas(targetDom , {  
	          allowTaint: true,  
	          taintTest: false,  
	      }).then(function (canvas) {
	      	//这里是保存为图片或保存到pdf的代码，最后有保存为pdf的完整代码。
			...
			...
			targetDom.setAttribute("style",`height: 800px;`); //截图完成后最后记得把高度恢复
	      })

总结

各种测试发现，截图成功的标准就是，把内层所有div的高度加起来（scrollHeight高度），给外层那个截图的div，就能把有滚动条的完整截图了。

完整步骤代码

安装html2canvas和jspdf

npm install html2canvas jspdf --save

<template>
  <div>
    <el-button type="primary" icon="el-icon-download"  @click="reportPdf()"
          >导出2</el-button>
    <div id="pdfContentsDiv">
      <div style="width:100%;height:600px;background:red"></div>
      <div style="width:100%;height:800px;background:green"></div>
      <div style="width:100%;height:400px;background:yellow"></div>
    </div>
  </div>
</template>

<script>
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
  data() {
    return {}
  },
  created() {},
  methods: {
    reportPdf() {
      let targetDom = document.getElementById('pdfContentsDiv');  
      let domScrollHeight=targetDom.scrollHeight;
      targetDom.setAttribute("style",`height: ${domScrollHeight}px;`);
      html2Canvas(targetDom, {  
          allowTaint: true,  
          taintTest: false,  
      }).then(function (canvas) { 
        let contentWidth = canvas.width;
        let contentHeight = canvas.height;
        let a4Height = 841.89;
        let a4Width = 595.28;
        let per = (contentWidth / a4Width) * 0.75; //这个主要是为了防止宽度不够的
        //一页pdf显示html页面生成的canvas高度;
        let pageHeight = (contentWidth / a4Width) * a4Height;
        //未生成pdf的html页面高度
        let leftHeight = contentHeight;
        //一页pdf显示html页面生成的canvas高度;
        var a4HeightRef = Math.floor((canvas.width / a4Width) * a4Height);
        //页面偏移
        let position = 0;
        //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        let imgWidth = a4Width;
        let imgHeight = (a4Width / contentWidth) * contentHeight;
        let pageData = canvas.toDataURL("image/jpeg", 1.0);
        let pdf = new JsPDF("", "pt", [a4Width, a4Height]); //不分页    
        if (leftHeight < pageHeight) {
            pdf.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
        } else {
            while (leftHeight > 0) {
                pdf.addImage(
                    pageData,
                    "JPEG",
                    0,
                    position,
                    imgWidth,
                    imgHeight
                );
                leftHeight -= pageHeight;
                position -= a4Height;
                //避免添加空白页
                if (leftHeight > 0) {
                    pdf.addPage();
                }
            }
        }

        pdf.save('title');
        targetDom.setAttribute("style",`height: 800px;`);
      });
    }, 
  },
};
</script>

<style scoped>
  #pdfContentsDiv{
    overflow:auto;
    width:100%;
    height:800px;
  }
</style>

最后的最后，如果有帮助到大家的话，可以给我留言或者点赞哦，感觉有帮助到别人，我也会很开心~~~