培森的Blog 未分类 Jquery前台导出PDF

Jquery前台导出PDF

$.getScript(“https://cdn.bootcss.com/jspdf/1.3.4/…

$.getScript(“https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js”); //加载js文件

$.getScript(“https://lib.baomitu.com/html2canvas/0.5.0-beta4/html2canvas.js”); //加载js文件

function check() {
	var element = $("#centercontent"); // 这个dom元素是要导出pdf的div容器,即要生成PDF的div
	var w; // 获得该容器的宽
	var h; // 获得该容器的高
	debugger;
	w = element.outerWidth() h = element.outerHeight() var offsetTop = element.offset().top; // 获得该容器到文档顶部的距离
	var offsetLeft = element.offset().left; // 获得该容器到文档最左的距离
	var canvas = document.createElement("canvas");
	canvas.width = w * 2; // 将画布宽&&高放大两倍
	canvas.height = h * 2;
	var context = canvas.getContext("2d");
	var scale = 2;
	context.scale(2, 2);
	context.translate( - offsetLeft, -offsetTop);

	var opts = {
		scale: scale,
		canvas: canvas,
		width: w,
		height: h,
		useCORS: true,
		background: '#ffffff'
	}

	html2canvas(element, opts).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,841.89],html页面生成的canvas在pdf中图片的宽高
		var imgWidth = 595.28 * 1.01;
		var imgHeight = 592.28 / contentWidth * contentHeight * 1.01;

		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');
	});
}

check();

成功生成文件

本文来自网络,不代表培森的Blog立场,转载请注明出处:https://blog.xupeisen.com/archives/438

作者: 培森

联系我们

联系我们

13262951234

在线咨询: QQ交谈

邮箱: admin@xupeisen.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部