html页面转PDF的功能-CSDN博客

参考文献：

原理

html转成pdf，是要先通过html2canvas将遍历页面元素，并渲染生成canvas，然后将canvas图片格式添加到jsPDF实例，生成pdf

一、html转为canvas image

引入html2canvas

<script type="text/javascript" src="/js/html2canvas.js"></script>
复制代码

执行代码

html2canvas(document.body, {
	  onrendered:function(canvas) {
			document.body.appendChild(canvas)
	  }
})
复制代码

二、html转为高清图

同时引入Canvas2image

<script type="text/javascript" src="/js/html2canvas.js"></script>
<script type="text/javascript" src="/js/canvas2image.js"></script>
复制代码

执行代码

<script type="text/javascript">
     var dom = dom1; //需要截图的包裹的（原生的）DOM 对象
    var width = dom.offsetWidth;
    var height = dom.offsetHeight;

    var type = "png";
    var scaleBy = 3;  //缩放比例
    var canvas = document.createElement("canvas");
   
    canvas.width = width * scaleBy;
    canvas.height = height * scaleBy; 
    canvas.style.width = width * scaleBy + "px";
    canvas.style.height = height * scaleBy + "px";
    var context = canvas.getContext("2d");
    context.scale(scaleBy, scaleBy);
	// 【重要】关闭抗锯齿
    context.mozImageSmoothingEnabled = false;
    context.webkitImageSmoothingEnabled = false;
    context.msImageSmoothingEnabled = false;
    context.imageSmoothingEnabled = false;
	
	// 获取元素相对于视窗的偏移量
    var rect = dom.getBoundingClientRect(); 
    // 设置context位置, 值为相对于视窗的偏移量的负值, 实现图片复位
    context.translate(-rect.left,-rect.top);

    html2canvas(dom, {
        useCORS:true,   // 【重要】开启跨域配置,
        canvas:canvas,  //自定义 canvas
        onrendered: function (canvas) {
            var img = Canvas2Image.convertToImage(canvas,width* scaleBy,height* scaleBy,type);
            document.body.appendChild(img); // 把生成的图片放在相应位置
            img.style.width = width + "px";
            img.style.height = height  + "px";
            dom1.style.display = "none"; // 隐藏掉原有的模块
        }
    });
</script>
复制代码

三、html2canvas + jsPDF转成PDF

同时引入html2canvas + jsPDF

<script type="text/javascript" src="/js/canvas2image.js"></script>
 <script type="text/javascript" src="/js/jsPdf.debug.js"></script>
复制代码

执行代码：

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

                  var contentWidth = canvas.width;
                  var contentHeight = canvas.height;

                  //一页pdf显示html页面生成的canvas高度;
                  var pageHeight = contentWidth / 592.28 * 841.89;
                  //未生成pdf的html页面高度
                  var leftHeight = contentHeight;
                  //pdf页面偏移
                  var position = 0;
                  //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
                  var imgWidth = 595.28;
                  var imgHeight = 592.28/contentWidth * contentHeight;

                  var pageData = canvas.toDataURL('image/jpeg', 1.0);

                  var pdf = new jsPDF('', 'pt', 'a4');

                  //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                  //当内容未超过pdf一页显示的范围，无需分页
                  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 -= 841.89;
                          //避免添加空白页
                          if(leftHeight > 0) {
                              pdf.addPage();
                          }
                      }
                  }

                  pdf.save('content.pdf');
              }
          })复制代码