生成pdf文件
var downPdf = document.getElementById("renderPdf");
downPdf.crossOrigin = "Anonymous";
downPdf.onclick = function () {
html2canvas(
//转换id为export_content的div中的所有内容为pdf
document.getElementById("export_content"),
{
dpi: 172,//导出pdf清晰度
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;
//pdf页面偏移
var position = 0;
//html页面生成的canvas在pdf中图片的宽高(a4纸的尺寸[595.28,841.89])
var imgWidth = 595.28;
var imgHeight = 592.28 / contentWidth * contentHeight;
console.log(canvas);
var pageData = canvas.toDataURL('image/jpeg', 1.0);
console.log(pageData);
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');
},
//背景设为白色(默认为黑色)
background: "#fff"
})
}
图片转base64方法:
//url转base
function changeUrl(){
//这是网上的一张图片链接
var url="http://localhost:8099/smartsite1_war_exploded/core/shell/images/background.png";
alert(url);
//这是一个异步方法,需要等图片执行完毕才会转换
getBase64(url)
.then(function(base64){
console.log(base64);//处理成功打印在控制台
},function(err){
console.log(err);//打印异常信息
});
}
//传入图片路径,返回base64
function getBase64(img){
function getBase64Image(img,width,height) {//width、height调用时传入具体像素值,控制大小 ,不传则默认图像大小
var canvas = document.createElement("canvas");
canvas.width = width ? width : img.width;
canvas.height = height ? height : img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
var dataURL = canvas.toDataURL();
return dataURL;
}
var image = new Image();
image.crossOrigin = 'Anonymous';
image.src = img;
var deferred=$.Deferred();
if(img){
image.onload =function (){
deferred.resolve(getBase64Image(image));//将base64传给done上传处理
}
return deferred.promise();//问题要让onload完成后再return sessionStorage['imgTest']
}
}
注:
1.导出为pdf文件时表格线没有,可以在下载pdf前按一下Ctrl+0
2.网页上的图片在pdf中没有展示出来,可以在网页加载的时候,将图片转换成base64格式放到src=“”处,这个方法采用的是异步方法,无法实时加载,在进入网页的时候,需要加载一段时间。
代码如下:
function changeUrl1(url){
//这是网上的一张图片链接
// var url="http://localhost:8099/smartsite1_war_exploded/core/shell/images/background.png";
var imgObj1 = [];
getBase64(url)
.then(function(base64){
console.log(base64);//处理成功打印在控制台
将转换完成的图片放到地址上
imgObj1.push('<div class="imgClass"><img style="width:280px;height:300px" src="' + base64 + '"></div>');
var imgStr1 = imgObj1.join("");
//将图片放到id为IMG1的div处
$("#IMG1").html(imgStr1);
},function(err){
console.log(err);//打印异常信息
});
}
3.在转换图片的时候,可能会遇到跨域问题,需要配置服务器的Nginx设置:
http {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
}