html导出PDF,截取带滚动条html结构全部目标内容且保留样式

前人的基础上稍加修改优化了一下,解决了html2Canvas只能截取可见html部分问题以及截取全部目标内容后样式失效问题。
具体问题需要具体分析。

exportPDF(){//点击事件
  //imageDom为pdf目标,注意imageDom的样式需要和body平级,注意不要污染全局
  var width = this.$refs.imageDom.style.width
  var cloneDom = this.$refs.imageDom.cloneNode(true)
  cloneDom.style.width = width
  document.body.appendChild(cloneDom)
  html2Canvas(cloneDom,{
	allowTain:true
  }).then(function(canvas){
	let contentWidth = canvas.width;
	let contentHeight = canvas.height;
	let pageHeight = contentWidth / 592.28 * 841.89;
	let leftHeight = contentHeight;
	let position = 0;
	let imgWidth = 592.28;
	let imgHeight = 592.28 / contentWidth * contentHeight;
    let pageData = canvas.toDataURL('image/jpej',1.0);
    let 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;
		if(leftHeight > 0){
	      PDF.addPage();
	    }
	  }
    }
	PDF.save('可以设置成变量.pdf')
  })
  document.body.removeChild(cloneDom)
}

但是还有别的问题:html连续的内容被粗暴截断,后续继续更新,先把基本功能实现


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
如果想要将 HTML 中的 Echart 图表导出PDF,可以使用一些第三方库,比如 jsPDFhtml2canvas。 1. 首先需要下载这两个库,可以在官网上下载,也可以使用 npm 安装。 ```bash npm install jspdf html2canvas --save ``` 2. 在 HTML 中引入这两个库,并且在需要导出的按钮或者其他元素上添加点击事件。 ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Export Echarts to PDF</title> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.7.0/echarts.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> </head> <body> <div id="chart" style="width: 800px; height: 400px;"></div> <button id="exportBtn">Export to PDF</button> <script> var chart = echarts.init(document.getElementById('chart')); var option = { title: { text: 'Echarts Example' }, tooltip: {}, legend: { data:['Sales'] }, xAxis: { data: ["Shirt","Cardign","Chiffon shirt","Pants","Heels","Socks"] }, yAxis: {}, series: [{ name: 'Sales', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; chart.setOption(option); document.getElementById('exportBtn').addEventListener('click', function() { html2canvas(document.getElementById('chart'), { onrendered: function(canvas) { var imgData = canvas.toDataURL('image/png'); var pdf = new jsPDF(); pdf.addImage(imgData, 'PNG', 0, 0); pdf.save('echarts.pdf'); } }); }); </script> </body> </html> ``` 3. 在点击事件中,使用 html2canvas 将 Echart 转换为 Canvas,然后将 Canvas 转换为图片,最后使用 jsPDF 将图片添加到 PDF 中并导出。 注意事项: - 在使用 html2canvas 时,需要将 Echart 的容器元素传入,否则会导致转换失败。 - 在使用 jsPDF 时,需要注意图片的格式,一般情况下使用 PNG 格式即可。 - 使用 jsPDF 导出 PDF 时,需要使用 save 方法将 PDF 文件保存到本地。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值