原生js将html页面变成pdf文件（html2canvas+jsPDF ）

一、html2canvas – 将dom变成图片：

下载或者安装html2canvas：官网

1、将文档放在本地，用原生js进行引用和使用。

① 新建一个名为 html2canvas.min.js 的文件，并且将线上的内容进行复制。
② 引入 js 文件：

// js直接引入 -- 未尝试
<script type="text/javascript" src="XXX/html2canvas.js"></script>


// layui使用
// 首先在html2canvas.js文件中添加exports
layui.define([],function(exports){
    // 复制的内容...
    exports('html2canvas',html2canvas);
})
// 其次进行自定义插件的引入
layui.define(['appsmenu'],function (exports) {
	exports("conf", {
	    // 第三方扩展
		extend: {
			// 引入html转图片的插件
			html2canvas: "lay/extends/html2canvas.min",
		}
	}
})

2、使用 npm 进行安装使用：

待续。。。

二、jsPDF – 将图片变成pdf：

下载或者安装jsPDF ：

• github
• 中文网站
• CDN
  • Jspdf.es.js：ES 2015 模块格式。
  • Jspdf.umd.js：UMD模块格式，用于 AMD 或脚本标签加载。
  • Jspdf.polyfills.js：Internet Explorer等旧浏览器所需的兼容文件。

1、将文档放在本地，用原生js进行引用和使用。

① 新建一个名为 jsPDF.min.js 的文件，并且将线上（我找到的都不能用）或者资源 的内容进行复制。
② 引入 js 文件：

// js直接引入 -- 未尝试
<script type="text/javascript" src="XXX/jsPDF.js"></script>
// CDN引入 -- 未尝试
<script type="text/javascript" src="https://cdn.staticfile.org/jspdf/2.5.1/jspdf.umd.min.js"></script>


// layui使用
// 首先在jsPDF.min.js文件中添加exports
layui.define([],function(exports){
    exports('jsPDF',jsPDF);
})
// 其次进行自定义插件的引入
layui.define(['appsmenu'],function (exports) {
	exports("conf", {
	    // 第三方扩展
		extend: {
			// 引入图片转pdf的插件
			jsPDF: "lay/extends/jsPDF.min",
		}
	}
})

2、使用 npm 进行安装使用：

待续。。。

三、使用：

1、 layui 或者原生js使用：

// html:
<div id="box">
    <button id="btn">下载为pdf</button>
    内容....
</div>
// js:
// layui引入：
layui.define(['html2canvas', 'jsPDF'], function (exports) {
	var html2canvas = layui.html2canvas; // 引入html转图片
	var jsPDF = layui.jsPDF; // 引入图片转pdf
	// 初始化
	var init = function() {
		// 点击下载按钮
		document.getElementById("btn").onclick=function(){
				html2canvas(document.getElementById("box"),{
					allowTaint: false, // 是否允许跨域图像。会污染画布，导致无法使用canvas.toDataURL 方法
					backgroundColor: '#fff', // 画布背景色（如果未在DOM中指定）。设置null为透明
					useCORS: true, // 是否尝试使用CORS从服务器加载图像
					dpi: 192, // 导出pdf清晰度
					scale: 2, // 用于渲染的比例。默认为浏览器设备像素比率。
				}).then(canvas => {
					// html生成图片的数据
					var imageData = canvas.toDataURL('image/jpeg', 1.0);
					// 原本的html页面的宽高
					const canvasWidth = canvas.width;
					const canvasHeight = canvas.height;
					// 当分辨率是72像素/英寸时，A4纸像素长宽分别是842×595
					var a4Width = 595; // A4 宽度
					var a4Height = (595 / canvasWidth) * canvasHeight; // A4总高度
					// 生成pdf的一页显示html的高度
					let pageHeight = canvasWidth / 595 * 842;
					// 未生成pdf的html页面高度，最初是整体的高度
					let restHeight = canvasHeight;
					// 页面上下偏移的大小
					var position = 0;
					/**
					 * 参数1：方向：l：横向  p：纵向
					 * 参数2：单位："pt"、"mm"、"cm"、"m"、"in"、"px"
					 * 参数3：格式：默认为a4
					*/
					var pdf = new jsPDF('p', 'pt', 'a4');
					// 当内容未超过pdf一页显示的范围，无需分页
					if (restHeight < pageHeight) {
						/**
						 * 将图像添加到PDF中
						 * 参数1：图片的url
						 * 参数2：图片的格式
						 * 参数3：图片上下偏移的大小
						 * 参数4：原始宽度
						 * 参数5：原始高度
						*/ 
						pdf.addImage(imageData, 'JPEG', 0, position, a4Width, a4Height );
					} else {
						while(restHeight > 0) {
							pdf.addImage(imageData, 'JPEG',0, position, a4Width, a4Height)
							restHeight -= pageHeight;
							position -= 842;
							if(restHeight > 0) {
								// 在PDF文档中添加新页面
								pdf.addPage();
							}
						}
					}
					// 保存为pdf格式的文件
					pdf.save('生成的pdf文件.pdf')
				})
			}
	}
	
	var Class = {
		init: function (options) {
			init();
			return this;
		}
	}
	exports('XXX', Class);
)}

2、 vue/react 框架进行使用：

待续。。。