html转pdf显示js画的图,JS - 使用jsPDF库生成PDF文件详解4（绘制图形、添加图片）...

五、绘制图形、添加图片

1，绘制矩形

//页面初始化

function init() {

var doc = new jsPDF();

//空矩形

doc.rect(20, 20, 10, 10);

//具有填充色的矩形

doc.rect(40, 20, 10, 10, 'F');

//红色边框的空矩形

doc.setDrawColor(255,0,0);

doc.rect(60, 20, 10, 10);

//有填充色的红色边框矩形

doc.setDrawColor(255,0,0);

doc.rect(80, 20, 10, 10, 'FD');

//没有边框的红色矩形

doc.setDrawColor(0);

doc.setFillColor(255,0,0);

doc.rect(100, 20, 10, 10, 'F');

//黑色边框的红色矩形

doc.setDrawColor(0);

doc.setFillColor(255,0,0);

doc.rect(120, 20, 10, 10, 'FD');

//具有圆角的矩形

doc.setDrawColor(0);

doc.setFillColor(255, 255, 255);

doc.roundedRect(140, 20, 10, 10, 3, 3, 'FD');

doc.save('Test.pdf');

}

2，绘制线条

var doc = new jsPDF();

//绘制一根水平线条

doc.line(20, 20, 60, 20);

//修改线条粗细

doc.setLineWidth(0.5);

doc.line(20, 25, 60, 25);

//修改线条颜色

doc.setDrawColor(255,0,0);

//绘制一根垂直线条

doc.line(100, 20, 100, 60); // vertical line

doc.save('Test.pdf');

3，绘制圆形、椭圆形

var doc = new jsPDF();

//绘制一个空心椭圆形

doc.ellipse(40, 20, 10, 5);

//绘制一个实心椭圆形

doc.setFillColor(0,0,255);

doc.ellipse(80, 20, 10, 5, 'F');

//绘制一个带边框的圆形

doc.setLineWidth(1);

doc.setDrawColor(0);

doc.setFillColor(255,0,0);

doc.circle(120, 20, 5, 'FD');

doc.save('Test.pdf');

4，绘制三角形

var doc = new jsPDF();

//绘制一个三角形

doc.triangle(60, 30, 60, 50, 80, 40, 'FD');

//自定义三角形的边框以及颜色

doc.setLineWidth(1);

doc.setDrawColor(255,0,0);

doc.setFillColor(0,0,255);

doc.triangle(100, 30, 110, 30, 120, 60, 'FD');

doc.save('Test.pdf');

5，绘制图片

(1)直接使用 base64编码的图片数据进行绘制。

var doc = new jsPDF();

var imageData = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM...........';

doc.addImage(imageData, 'PNG', 0, 0, 40, 22);

doc.save('Test.pdf');

(2)使用指定路径(url)的图片进行绘制。

//页面初始化

function init() {

getImageFromUrl('logo.png', createPDF);

}

//通过url获取指定图片

var getImageFromUrl = function(url, callback) {

var img = new Image();

img.onError = function() {

alert('Cannot load image: "'+url+'"');

};

img.onload = function() {

callback(img);

};

img.src = url;

}

//使用指定图片数据生成pdf

var createPDF = function(imgData) {

var doc = new jsPDF();

doc.addImage(imgData, 'PNG', 10, 10, 50, 20, 'hangge'); // 将图片使用别名"hangge"缓存起来

doc.addImage('hangge', 70, 10, 100, 40); // 使用别名为"hangge"的缓存图片

doc.addImage({

imageData : imgData,

angle : -20,

x : 10,

y : 40,

w : 45,

h : 20

});

doc.save('Test.pdf');

}