搜索
简帛阁>技术文章>jspdf.js+html2canvas将HTMl导出PDF

jspdf.js+html2canvas将HTMl导出PDF

jspdf.js+html2canvas将HTMl导出PDF


功能:

  1. PDF分页插入页头页尾
  2. 输出A4格式PDF
  3. 支持单页、多页输出

效果预览:
查看演示PDF
demo地址:
demo


需要引入JS的文件:

<script src="https://unpkg.com/jspdf@1.5.3/dist/jspdf.min.js"></script>
<script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table-plugin-export-pdf/fonts/source-han-sans-normal.js"></script>

主要代码如下:

function pdfMap() {
html2canvas(document.querySelector("img")).then(canvas => {
  //console.log(canvas)
  var contentWidth = canvas.width;
  var contentHeight = canvas.height;
  //一页pdf显示html页面生成的canvas高度;
  var pageHeight = contentWidth / 595.28 * 841.89;  
  //console.log(`canvas总高度:${contentHeight}, 一页渲染的高度:${pageHeight}`);

  var ctx = canvas.getContext("2d");
  // 新canvas控件- 保存裁剪后的图片
  var newCanvas = document.createElement("canvas");
  var newCtx = newCanvas.getContext("2d");
  // 定义插入图片的宽高,高度要等比例缩放
  var renderImgWidth = 570.28; // 根据pdf页面宽度决定
  // 固定的图片宽度 除以 渲染的canvas宽度 得出 宽度缩放比例,根据这个比例 乘以 渲染的canvas高度 得出 图片实际的高度
  var renderImgHeight = null; // (renderImgWidth / contentWidth) * pageHeight; 
  // 截取图片高度偏移值
  var positionTop = 0;
  // 渲染pdf start
  var doc = new jsPDF('', 'pt', 'a4');
  // 引用外部字体,解决中文格式问题
  doc.addFont('SourceHanSans-Normal.ttf', 'SourceHanSans-Normal', 'normal');
  doc.setFont('SourceHanSans-Normal');  
  doc.setFontSize(6)
  // 向上取整计算分页数
  var pageSize = Math.ceil(contentHeight / pageHeight)
  //console.log('计算分页数:', pageSize);
  // for循环插入页头页尾,图片
  for (let i = 0; i < pageSize; i++) {
	// 动态识别裁剪后图片高度,防止插入图片时比例失调
	renderImgHeight = (renderImgWidth / contentWidth) * ((contentHeight - positionTop) > pageHeight ? pageHeight : contentHeight - positionTop)
	//console.log('page', i + 1, '/' + pageSize);
	doc.text(10, 8, formatDate())
	doc.text(280, 8, '这是pdf页头xxxxx')
	doc.text(10, 835, '页尾xxxxx')
	doc.addImage(cropCanvas(ctx, newCanvas,newCtx, contentWidth, contentHeight, positionTop, pageHeight), 'JPEG', 10, 10, renderImgWidth, renderImgHeight);
	if (i + 1 < pageSize) {
	  doc.addPage()
	  positionTop += pageHeight
	  // renderImgHeight = (renderImgWidth / contentWidth) * ((contentHeight - positionTop) > pageHeight ? pageHeight : contentHeight - positionTop)
	}
  }
  doc.save("autoprint.pdf")
});
  // 裁剪canvas
function cropCanvas(ctx, newCanvas, newCtx, contentWidth, contentHeight, positionTop, pageHeight) {
	//console.log(contentWidth, contentHeight, positionTop, pageHeight)
	// 裁剪- (获得像素数据)宽度跟原图一致,高度只截取一页pdf的渲染高度
	var imgRgbData = ctx.getImageData(0, positionTop, contentWidth, pageHeight);
	console.log(imgRgbData);
	// 把裁剪后的像素数据渲染到新canvas
	newCanvas.setAttribute("width", contentWidth)
	newCanvas.setAttribute("height", (contentHeight - positionTop) > pageHeight ? pageHeight : contentHeight - positionTop)
	newCtx.putImageData(imgRgbData, 0, 0)
	// 获取裁剪后图片的base64数据
	var imgBase64 = newCanvas.toDataURL("image/jpeg", 1.0)
	//console.log(imgBase64);
	return imgBase64
};
jspdfjs+html2canvasHTMl导出PDF功能:PDF分页插入页头页尾输出A4格式PDF支持单页、多页输出效果预览:查看演示PDFdemo地址:demo需要引入JS的文件:<sc
目录A4尺寸安装插件html2canvasjspdf在项目中引入遇到的问题多行省略号图片跨域Tainedcanvasesmaynotbeexportedbase64DataURLscheme支持的
结合html2canvasjsPDF实现html页面转pdfBy:授客QQ:103355122实践环境win10Vue296axios0180html2canvas100rc3jspdf153安装h
<buttononclickHtmlToPdf()>转储pdf</button><buttononclickHtmlToImage()>转储image</b
html页面转pdf下载两个js文件可供使用,地址如下:https://githubcom/linwalker/renderhtmltopdf唯一的缺点是图片跨页不好解决,最终的pdf文件如下:解决下
jsPdf是一个可以把html转成pdf的插件,有人多人在用。GitHub:https://githubcom/MrRio/jsPDF官方文档:http://rawgithackcom/MrRio/
、需求来源:把可视化展示HTML页面打印成PDF文件报表二、html2canvas+jsPDF导出pdf原理:通过html2canvas遍历页面元素,并渲染生成canvas,然后canvas图片
最近做项目中,🈶️遇到过实现模版打印功能,网上也找到很多资料可以实现,有的方式可以实现分页,但是打印的A4纸上下不能留边距,后来找到一个通过剪裁的方式可以实现左右上下留边距,并且能实现分页;方法如下
ttps://githubcom/niklasvh/html2canvasgit遇到的问题1input框截图不全//不支持input元素通过转换元素解决2backgroundimage:repeat
1、目的:在前段是jQuery库或者VUE库或者两者混合库,html页面和数据转换成PDF格式并下载,支持分页1、项目背景:对客户报修记录进行分类统计,并生成各种饼图、柱状图、线性图。并要求导出wo