返回 导航

其他

hangge.com

JS - 使用jsPDF库生成PDF文件详解4(绘制图形、添加图片)

作者:hangge | 2018-11-14 08:10

五、绘制图形、添加图片

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>
评论

全部评论(0)

回到顶部