【解决】jsPDF之长图片生成PDF(分页,失真)
2018-03-17 11:42
465 查看
最近老板疯了,必须要导出pdf 后台导出itext相对比较麻烦而且会出现中文乱码。
网上找了许多jspdf.js导出pdf的资料 当内容过多时会出现黑屏的情况。 以下是解决当前情况的。
$("#downpdf").on("click", function() {
//获取节点高度,后面为克隆节点设置高度。
var height = $(TargetNode).height()
//克隆节点,默认为false,不复制方法属性,为true是全部复制。
var cloneDom = $(TargetNode).clone(true);
//设置克隆节点的css属性,因为之前的层级为0,我们只需要比被克隆的节点层级低即可。
cloneDom.css({
"background-color": "white",
"position": "absolute",
"top": "0px",
"z-index": "-1",
"height": height
});
//将克隆节点动态追加到body后面。
$("body").append(cloneDom);
//插件生成base64img图片。
html2canvas(cloneDom, {
//Whether to allow cross-origin images to taint the canvas
allowTaint: true,
//Whether to test each image if it taints the canvas before drawing them
taintTest: false,
onrendered: 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;
var imgHeight = 592.28 / contentWidth * contentHeight;
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) {
//arg3-->距离左边距;arg4-->距离上边距;arg5-->宽度;arg6-->高度
pdf.addImage(pageData, 'JPEG', 0, position,imgWidth, imgHeight)
leftHeight -= pageHeight;
position -= 841.89; //避免添加空白页
if(leftHeight > 0) {
//注②
pdf.addPage();
}
}
}
pdf.save('name_hos.pdf');
}
});
})
网上找了许多jspdf.js导出pdf的资料 当内容过多时会出现黑屏的情况。 以下是解决当前情况的。
$("#downpdf").on("click", function() {
//获取节点高度,后面为克隆节点设置高度。
var height = $(TargetNode).height()
//克隆节点,默认为false,不复制方法属性,为true是全部复制。
var cloneDom = $(TargetNode).clone(true);
//设置克隆节点的css属性,因为之前的层级为0,我们只需要比被克隆的节点层级低即可。
cloneDom.css({
"background-color": "white",
"position": "absolute",
"top": "0px",
"z-index": "-1",
"height": height
});
//将克隆节点动态追加到body后面。
$("body").append(cloneDom);
//插件生成base64img图片。
html2canvas(cloneDom, {
//Whether to allow cross-origin images to taint the canvas
allowTaint: true,
//Whether to test each image if it taints the canvas before drawing them
taintTest: false,
onrendered: 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;
var imgHeight = 592.28 / contentWidth * contentHeight;
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) {
//arg3-->距离左边距;arg4-->距离上边距;arg5-->宽度;arg6-->高度
pdf.addImage(pageData, 'JPEG', 0, position,imgWidth, imgHeight)
leftHeight -= pageHeight;
position -= 841.89; //避免添加空白页
if(leftHeight > 0) {
//注②
pdf.addPage();
}
}
}
pdf.save('name_hos.pdf');
}
});
})
相关文章推荐
- 【解决】jsPDF之长图片生成PDF(分页,失真)
- js生成pdf文件,支持中文字体,插入图片
- ppt导出pdf后非矢量图图片失真的解决办法
- 解决word转pdf后图片失真
- iText7 生成 PDF 文件,解决各种操作系统中文问题,控制指定位置显示图片、文字、图文混排
- JSPDF运用实例(解决图片跨域问题)
- PPT另存为pdf的图片失真问题解决
- 解决word转pdf后图片失真
- node.js+express 实现CSDN上传头像功能 (包含图片的缩放,生成头像缩略图)
- 详解原生JS根据图片多少自动生成相册_实现焦点或按钮切换图片
- holder.js生成占位图片
- iText 生成pdf分页
- 解决使用CImage类的Draw函数在显示图片时引起的图像失真问题
- ssh三大框架简单整合,struts2整合JasperReport报表、图表,解决HTML显示图片不出来,PDF中文不显示的问题
- android 9patch图片制作详解,解决图片拉伸失真
- PHP合成图片、生成文字、居中对齐、画线、矩形、三角形、多边形、图片抗锯齿、不失真 高性能源码示例
- 【Vegas原创】访问owa,图片和js脚本不能正常显示和使用的解决方法
- 使用jspdf生成pdf报表
- Android 中 WebView 与 js 简单交互实现图文混排效果,解决图片自适应屏幕与查看大图问题
- ireport 3.7.0 浏览中文没问题,生成pdf文档文字是竖着的解决办法