项目中遇到在线生成获奖证书，并支持在线下载，刚开始直接通过html2canvas把证书所在 div 的内容转成图片，提供下载，后来看到也可以生成 PDF 文件提供下载，就研究了一下，使用html2canvas+jsPdf来把证书生成 PDF 文件，共用户下载。

1.需要引入的 js 文件：

html2canvas.js、 jsPdf.debug.js、 jquery.js

html2canvas：https://www.bootcdn.cn/html2canvas/

<script src=”https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js”></script>

<script src=”https://cdn.bootcdn.net/ajax/libs/html2canvas/0.4.1/html2canvas.min.js”></script>

jsPdf.debug：https://www.bootcdn.cn/jspdf/

<script src=”https://cdn.bootcdn.net/ajax/libs/jspdf/1.5.3/jspdf.debug.js”></script>

<script src=”https://cdn.bootcdn.net/ajax/libs/jspdf/1.5.3/jspdf.min.js”></script>

jquery：https://www.bootcdn.cn/jquery/

<script src=”https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js”></script>

2.实现代码：

方式一：

function downloadcertpdf(id) {
	html2canvas($('.cert-content'), {
		onrendered: function (canvas) {
			var imgData = canvas.toDataURL();
			var doc = new jsPDF('p', 'px', 'a4');
			//第一列 左右边距  第二列上下边距  第三列是图片左右拉伸  第四列 图片上下拉伸  
			doc.addImage(imgData, 'jpg', 2, 30, 0, 0);
			doc.save('cert_' + id + ".pdf");
		}
	});
}

方式二：（导出为横向 pdf）

function downloadcertpdf(id) {
	if (!!window.ActiveXObject || "ActiveXObject" in window) { alert('请使用 chorme 或 360 等浏览器！！！'); return false; }
	html2canvas($('.cert-content'), {
		onrendered: function (canvas) {
			//渲染完成时调用的
			var contentWidth = canvas.width * 0.5;
			var contentHeight = canvas.height * 0.5;
			//一页 pdf 显示 html 页面生成的 canvas 高度;
			var pageHeight = contentWidth / 592.28 * 841.89;
			//未生成 pdf 的 html 页面高度
			var leftHeight = contentHeight;
			//页面偏移
			var position = 0;
			//a4 纸的尺寸[595.28,841.89]，html 页面生成的 canvas 在 pdf 中图片的宽高
			var imgWidth = 841.89;
			var imgHeight = 841.89 / contentWidth * contentHeight;

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

			var pdf = new jsPDF('l', 'pt', 'a4');  //l：横向  p：纵向

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

	});
}

解决下载的图片会模糊和偏移的问题：

<script src="https://cdn.bootcdn.net/ajax/libs/bluebird/3.7.2/bluebird.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script>
$(function() {
	
	$("#download").click(function(){  
	    var copyDom = $("#first");// 这个 dom 元素是要导出 pdf 的 div 容器
	    var width = copyDom.width();//dom 宽
	    var height = copyDom.height();//dom 高
	    var scale = 2;//放大倍数
	    var canvas = document.createElement('canvas');
	    canvas.width = width*scale;//canvas 宽度
	    canvas.height = height*scale;//canvas 高度
	    var content = canvas.getContext("2d");
	    content.scale(scale,scale);
	    var rect = copyDom.get(0).getBoundingClientRect();//获取元素相对于视察的偏移量
	    content.translate(-rect.left,-rect.top-36);//设置 context 位置，值为相对于视窗的偏移量负值，让图片复位
	    html2canvas(copyDom, {
	        dpi: window.devicePixelRatio*2,
	        scale:scale,
	        canvas:canvas,
	        width:width,
	        heigth:height,
	    }).then(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;
	        //页面偏移
	        var position = 0;
	        //a4 纸的尺寸[595.28,595.28]，html 页面生成的 canvas 在 pdf 中图片的宽高
	        var imgWidth = 595.28;
	        var imgHeight = 592.28/contentWidth * contentHeight;
	        var pageData = canvas.toDataURL('image/jpeg', 1.0);
	        //element.append(canvas)
	        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('cert_' + id + ".pdf");
	 
	    });
	      
	})