javascript根据当前div样式导出pdf

javascript如何根据当前页面或div样式导出pdf格式，下面web建站小编带大家了解一下pdf格式导出功能！

1、引入2个js文件

https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js
https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js

2、定义一个需要生成pdf的div_id

3、javascript生成下载PDF代码：

function exportData() {
  var targetDom = $("#html2pdf"); //你的目标元素id
  var copyDom = targetDom.clone();
  copyDom.width(targetDom.width() + "px");
  copyDom.height(targetDom.height() + "px");
  $('body').append(copyDom);
  console.log('copyDom', copyDom)
  html2canvas(copyDom, {
  	allowTaint: true,
  	taintTest: false,
  	scale: '2',
  	dpi: '1920', // 设置导出分辨率
  	background: '#050b25', // 设置背景颜色
  	onrendered: function(canvas) {
  	  var contentWidth = canvas.width;
  	  var contentHeight = canvas.height;
	  
  	  var pageHeight = contentWidth / 592.28 * 841.89;
  	  //未生成pdf的html页面高度
  	  var leftHeight = contentHeight;
  	  var position = 0;
  	  //a4纸的尺寸[595.28,841.89]
  	  var imgWidth = 595.28;
  	  var imgHeight = 592.28 / contentWidth * contentHeight;
	  
  	  var pageData = canvas.toDataURL('image/jpeg', 1.0);
	  
  	  var pdf = new jsPDF('', 'pt', 'a4');
	  
  	  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;
  	  	  // position += 841.89;
  	  	  //避免添加空白页
  	  	  if (leftHeight > 0) {
  	  	  	pdf.addPage();
  	  	  }
  	  	}
  	  }
  	  pdf.save('下载.pdf');
  	  copyDom.remove();
  	},
  });
}

纯js根据table页面样式导出excel表格（包括居中，合并，自定义样式）

纯js导出csv格式（根据页面标签格式导出）

利用纯javascript做一个xls导出功能（附代码）

php利用微信小程序实现pdf文件的预览功能

vuejs将网页中指定div转成pdf并下载

标签： pdf, 导出功能

上面是“javascript根据当前div样式导出pdf”的全面内容，想了解更多关于 js 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2665.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！