html页面使用jspdf导出pdf（不会只截取当前显示内容和黑边）

ShyTan

已于 2022-06-23 15:22:21 修改

阅读量1.3k

点赞数 1

分类专栏： Web 文章标签： javascript html html5

于 2022-06-14 18:44:29 首次发布

本文链接：https://blog.csdn.net/ShyTan/article/details/125283972

版权

Web 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

本文提供了一种使用JavaScript将HTML内容转换为PDF并进行导出的方法。通过结合jspdf.debug.js和html2canvas.min.js库，实现了按钮点击后将指定div的内容克隆并转换为清晰的PDF文件，支持页面分页和保存功能。

摘要由CSDN通过智能技术生成

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Demo</title>
</head>
<body>
    <button id="export" onclick="exportPdf()">导出PDF</button>
    <div id="detailData" class="detailData">
        测试demo
    </div>
</body>
<script src="./jspdf.debug.js"></script>
<script src="./html2canvas.min.js"></script> 
</html>

js文件

//detailData可以替换成你需要打印的div
//导出pdf
function exportPdf() {
	//克隆节点，默认为false，不复制方法属性，为true是所有复制。
	var height = $("#detailData").height();
	var width = $("#detailData").width();
	var cloneDom = $("#detailData").clone(true);

	//设置克隆节点的css属性，由于以前的层级为0，咱们只须要比被克隆的节点层级低便可。

	cloneDom.css({
	"background-color": "white",
	//"position": "fixed",	
	//"top": "0",
	//"left": "0",
	"opacity": "0",
	"z-index": "-999",
	"height": height,
	"width": width
	});

	//将克隆节点动态追加到body后面。
	
	$("body").append(cloneDom);

	html2canvas(
    cloneDom,
    {
      dpi: 172,//导出pdf清晰度
      useCORS:true,
      allowTaint: true,
			taintTest: false,
      //height:document.getElementById("detailData").scrollHeight,
      //windowHeight:document.getElementById("detailData").scrollHeight,
      //width:document.getElementById("detailData").scrollWidth,  
      //背景设为白色（默认为黑色）
      background: "#FFFFFF",
      onrendered: function (canvas) {

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

				
        //一页pdf显示html页面生成的canvas高度;
        var pageHeight = contentWidth / 595.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 = 595.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', 30, 0, imgWidth, imgHeight );
        } else {
            while(leftHeight > 0) {
                pdf.addImage(pageData, 'JPEG', 30, position, imgWidth, imgHeight)
                leftHeight -= pageHeight;
                position -= 841.89;
                //避免添加空白页
                if(leftHeight > 0) {
                    pdf.addPage();
                }
            }
        }
        var d = new Date();
        var month = d.getMonth();
        month = month+1 >12 ? 1:month+1;
        var time = ""+d.getFullYear()+(("0"+month).slice(-2))+d.getDate()+(("0"+d.getHours()).slice(-2))+(("0"+d.getMinutes()).slice(-2))+(("0"+d.getSeconds()).slice(-2));
        pdf.save(time+'.pdf');
	  } 
    }
  )
}

下面附带两个文件，是需要使用的js文件，也可去github下载包

jspdf.debug.js文件与html2canvas.min.js文件，引用后可直接导出pdf-Javascript文档类资源-CSDN下载以下这两个<scriptsrc="https://cdn.bootcss.com/更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/ShyTan/85641053