JS - 使用jsPDF库生成PDF文件详解4(绘制图形、添加图片)
五、绘制图形、添加图片
1,绘制矩形
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jspdf.min.js" charset="utf-8"></script> <script type="text/javascript"> //页面初始化 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'); } </script> </head> <body onload="init()"> </body> </html>
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)的图片进行绘制。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jspdf.min.js" charset="utf-8"></script> <script type="text/javascript"> //页面初始化 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'); } </script> </head> <body onload="init()"> </body> </html>