jsPDF Tutorial – jsPDF Image from File – Harshad Chopra

jsPDF Tutorial – jsPDF Image from File – Harshad Chopra

Hello friends today in this post we will be making a app which allow users to upload image on the server and then actually you can download the image as a pdf with the help of the library called as jsPDF in Javascript. Let’s start the tutorial follow the steps and also copy the source code which is given below understand it and also extend it with your own code. The screenshot of the application is given below.

Source Code

index.html

<script type="text/javascript" src="https://cdn.rawgit.com/MrRio/jsPDF/master/dist/jspdf.min.js"></script> <script type="text/javascript" src="https://cdn.rawgit.com/MrRio/jsPDF/master/plugins/addimage.js"></script> <script type="text/javascript" src="https://cdn.rawgit.com/MrRio/jsPDF/master/plugins/png_support.js"></script> <script src="https://cdn.rawgit.com/MrRio/jsPDF/master/libs/png_support/png.js"></script> <script src="https://cdn.rawgit.com/MrRio/jsPDF/master/libs/png_support/zlib.js"></script>

<input id="inp" type='file'>
<p id="b64"></p>
<img id="img" height="150">

<button id="btnDownload">Download PDF</button>

script.js

// Options
/*
var textArray = ["2mm", "3mm", "4mm", "5mm", "6mm", "7mm", "8mm", "8mm", "10mm", "10mm"];
var widthArray = [2, 3, 4, 5, 6, 7, 8, 8, 10, 10];
var titleString = "M3 Nylon (7mm)";
*/
/* 3mm standoffs
var textArray = ["5mm", "10mm", "15mm", "20mm", "Nut", "5mm", "10mm", "15mm", "20mm", "6mm"];
var widthArray = [5, 10, 15, 20, 0, 5, 10, 15, 20, 6];
var titleString = "M3 MM/MF Standoff";
*/
/* M3 x 7mm spacers
var textArray = ["5mm", "10mm", "15mm", "20mm", "Nut", "5mm", "10mm", "15mm", "20mm", "6mm"];
var widthArray = [5, 10, 15, 20, 0, 5, 10, 15, 20, 6];
var titleString = "M3 MF/FF Standoff";
*/
/* 3mm Nylon standoffs
var textArray = ["6mm", "8mm", "10mm", "12mm", "15mm", "Nut", "Nut", "20mm", "Screw", "Screw"];
var widthArray = [6, 8, 10, 12, 15, 0, 0, 20, 6, 6];
var titleString = "M3 MF Nylon";
*/
/* 
var titleString = "M3 Flathead Hex";
var textArray = ["10mm", "10mm", "6mm", "12mm", "12mm", "16mm", "16mm", "8mm", "20mm", "20mm"];
var widthArray = [10, 10, 6, 12, 12, 16, 16, 8, 20, 20];
*/
/* 
var titleString = "M4 Button Hex";
var textArray = ["6mm", "8mm", "12mm", "16mm", "16mm", "20mm", "20mm", "Nut", "25mm", "25mm"];
var widthArray = [6, 8, 12, 16, 16, 20, 20, 0, 25, 25];
*/
/* 
var titleString = "M3 SHCS";
var textArray = ["Washer", "", "Nut", "", "12mm", "4mm", "5mm", "6mm", "8mm", "10mm"];
var widthArray = [0, 0, 0, 0, 12, 4, 5, 6, 8, 10];
*/
/* 
var titleString = "M3 Button Hex";
var textArray = ["8mm", "", "6mm", "", "16mm", "12mm", "", "4mm", "", "20mm"];
var widthArray = [8, 0, 6, 0, 16, 12, 0, 4, 0, 20];
*/
/* 
var titleString = "Metric Flat Washers";
var textArray = ["M1.6", "M2", "M2.5", "M3", "M4", "M5", "", "", "", ""];
var widthArray = [1.6, 2, 2.5, 3, 4, 5, 0, 0, 0, 0];
*/
///* 
var titleString = "";
var textArray = ["", "", "", "", "", "", "", "", "", ""];
var widthArray = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
//*/

var drawCellOutlines = false;
var rowToDraw = 1;

function mmToPt(mm) {
  return mm * 2.83465;
}

function readFile() {
  
  if (this.files && this.files[0]) {
    
    var FR= new FileReader();
    
    FR.addEventListener("load", function(e) {
      document.getElementById("img").src       = e.target.result;
      document.getElementById("b64").innerHTML = e.target.result;
    }); 
    
    FR.readAsDataURL( this.files[0] );
  }
}

document.getElementById("inp").addEventListener("change", readFile);



var button = document.getElementById('btnDownload');

function generatePDF(){
  var doc = new jsPDF("portrait", "pt", "letter");

  var pageMarginX = 13.5;
  var pageMarginY = 36;
  var defaultLineWidth = 0.200025;

  var printSafetyMargin = mmToPt(1.5);
  
  var cellMarginX = 9;
  var cellMarginY = 0;
  var cellWidth = 189;
  var cellHeight = 72;
  
  var iconMargin = 1;
  var iconHeight = cellHeight/2 - iconMargin/2 - printSafetyMargin;
  var iconWidth = iconHeight;
  //var iconWidth = iconHeight*100/52;
  
  var titleFontSize = 18;
  var titleFontPointsBelowLine = 4;
  var titleTextMargin = 3; // distance between icon and title
  
  var binFontSize = 10;
  var binFontSizePointsBelowLine = 2;
  
  var measureLineMargin = 2;
  var measureLineWidth = 1;

  function fitTextInsideBox(textString, x0, y0, x1, y1, fontSizeMax, fontSizeMin) {
    doc.setFontSize(fontSizeMax);
    
    var fontSize = fontSizeMax;

    while(doc.getTextWidth(titleString) > (x1-x0)) {
      doc.setFontSize(--fontSize);
    }

    doc.text(titleString, x0, y0);
  }

  // if an image was loaded, set the iconWidth to be proportional
  if(img.src) {
    iconWidth = (img.clientWidth * iconHeight) / img.clientHeight;
  }

  var i, j;
  for(j=0; j<10; j++) {
    for(i=0; i<3; i++) {
      if(j==rowToDraw) {
        if(drawCellOutlines == true) {
          doc.roundedRect(pageMarginX + (cellWidth + cellMarginX)*i, pageMarginY + (cellHeight + cellMarginY)*j, cellWidth, cellHeight, 2.5, 2.5, 'S'); 
        }

        if(i==0) {
          var iconCenterX, iconCenterY;
          iconCenterX = pageMarginX + printSafetyMargin + iconWidth/2;
          iconCenterY = pageMarginY + (cellHeight + cellMarginY)*j + printSafetyMargin + iconHeight/2;

          //doc.rect(iconCenterX - iconWidth/2, iconCenterY - iconHeight/2, iconWidth, iconHeight, 'S');

          var titleLeftX = pageMarginX + printSafetyMargin;

          if(img.src) {
            doc.addImage(img, 'PNG', iconCenterX - iconWidth/2, iconCenterY - iconHeight/2, iconWidth, iconHeight);
            iconCenterY = pageMarginY + (cellHeight + cellMarginY)*j + cellHeight - (printSafetyMargin + iconHeight/2);
  //        doc.rect(iconCenterX - iconWidth/2, iconCenterY - iconHeight/2, iconWidth, iconHeight, 'S');
            doc.addImage(img, 'PNG', iconCenterX - iconWidth/2, iconCenterY - iconHeight/2, iconWidth, iconHeight);

            // move the title to make room for the icon
            titleLeftX = pageMarginX + printSafetyMargin + iconWidth + titleTextMargin;
          }

          var titleCenterY;

          titleRightX = pageMarginX + cellWidth - printSafetyMargin;
          titleCenterY = pageMarginY + (cellHeight + cellMarginY)*j + cellHeight/2/2;

          fitTextInsideBox(titleString, titleLeftX, titleCenterY + titleFontSize/2 - titleFontPointsBelowLine, titleRightX, 0, titleFontSize);
          titleCenterY = pageMarginY + (cellHeight + cellMarginY)*j + cellHeight - (cellHeight/2/2);
          fitTextInsideBox(titleString, titleLeftX, titleCenterY + titleFontSize/2 - titleFontPointsBelowLine, titleRightX, 0, titleFontSize);
        }

        if(i==1) {
          // draw boxes
          doc.lines([[cellWidth, 0]], pageMarginX + cellWidth + cellMarginX, pageMarginY + (cellHeight + cellMarginY)*j + cellHeight/2, [1.0,1.0], 'S');
          var k;
          for(k=0; k<4; k++) {
            doc.lines([[0, cellHeight]], pageMarginX + cellWidth + cellMarginX + (cellWidth/5.0)*(k+1), pageMarginY + (cellHeight + cellMarginY)*j, [1.0,1.0], "S");
          }

          doc.setFontSize(binFontSize);
          for(k=0; k<10; k++) {
            var textX = pageMarginX + cellWidth + cellMarginX + (cellWidth/5.0)/2 + (cellWidth/5.0)*k;
            var textY = pageMarginY + (cellHeight + cellMarginY)*j + cellHeight/2/2 + (binFontSize/2 - binFontSizePointsBelowLine);
            if(k >= 5) {
              textX -= (cellWidth/5.0)*5;
              textY += cellHeight/2;
            }

            doc.text(textArray[k], textX, textY, 'center');
            function drawMeasureLine(x, y, direction, distanceMm) {
              var x0, x1;
              var distancePt = mmToPt(distanceMm);
              if(direction == 0) {
                x0 = x - (distancePt/2);
                x1 = x + (distancePt/2);
              } else if (direction < 0) {
                x0 = x - distancePt;
                x1 = x;
              } else { // if (direction > 0)
                x0 = x;
                x1 = x + distancePt;
              }

              doc.setLineWidth(measureLineWidth);
              doc.lines([[distancePt, 0]], x0, y, [1.0,1.0], 'S');
              doc.setLineWidth(defaultLineWidth);
            }

            var measureX = textX;
            var measureY = pageMarginY + (cellHeight + cellMarginY)*j + cellHeight/2/2;
            if(k >= 5) {
              measureY += cellHeight/2;
            };
            if(k%2) {
              measureY = measureY - cellHeight/2/2/2;
            } else {
              measureY = measureY + cellHeight/2/2/2;
            }

            if(mmToPt(widthArray[k]) < cellWidth/5) {
              drawMeasureLine(measureX, measureY, 0, widthArray[k]);
            } else {
              if(k%5 == 4) {          // at the right end of a row
                drawMeasureLine(measureX + cellWidth/5/2 - measureLineMargin, measureY, -1, widthArray[k]);
              } else if (k%5 == 0) {  // at the left end of a row
                drawMeasureLine(measureX - cellWidth/5/2 + measureLineMargin, measureY, 1, widthArray[k]);
              } else {                // somewhere in the middle
                drawMeasureLine(measureX, measureY, 0, widthArray[k]);
              }
            }
          }
        }

        if(i==2) {
          // draw icon and title
          var iconCenterX, iconCenterY;
          iconCenterX = pageMarginX + (cellWidth*2) + (cellMarginX*2) + printSafetyMargin + iconWidth/2;
          iconCenterY = pageMarginY + (cellHeight + cellMarginY)*j + printSafetyMargin + iconHeight/2;

          //doc.rect(iconCenterX - iconWidth/2, iconCenterY - iconHeight/2, iconWidth, iconHeight, 'S');

          var titleLeftX = pageMarginX + (cellWidth*2) + (cellMarginX*2) + printSafetyMargin;

          if(document.getElementById("img").src) {
            doc.addImage(img, 'PNG', iconCenterX - iconWidth/2, iconCenterY - iconHeight/2, iconWidth, iconHeight);

            // move the title to make room for the icon
            var titleLeftX = pageMarginX + (cellWidth*2) + (cellMarginX*2) + printSafetyMargin + iconWidth + titleTextMargin;
          }

          var titleLeftX, titleCenterY;

          titleRightX = pageMarginX + (cellWidth*3) + (cellMarginX*2) - printSafetyMargin;
          titleCenterY = pageMarginY + (cellHeight + cellMarginY)*j + cellHeight/2/2;

          fitTextInsideBox(titleString, titleLeftX, titleCenterY + titleFontSize/2 - titleFontPointsBelowLine, titleRightX, 0, titleFontSize);

          // draw array of sizes underneath
          var sizesStrings = [(textArray.slice(0,5)).join(", "),(textArray.slice(5,10)).join(", ")];
          var textX = pageMarginX + (cellWidth*3) + (cellMarginX*2) - cellWidth/2;
          titleCenterY = pageMarginY + (cellHeight + cellMarginY)*j + cellHeight/2/2 + cellHeight/2;
          doc.setFontSize(10);
          //doc.text(sizesString, textX, titleCenterY, "center");
          doc.text(sizesStrings, textX, titleCenterY, "center");
        }
      }
    }
  }
  
  doc.setFontSize(14);
//  doc.text(100, 225, "Paranyan loves jsPDF");


  doc.setFontSize(40);
//  doc.text(30, 20, 'Hello world!');
  
  //doc.output('datauri');
  
  
  doc.save('my.pdf');
}

button.addEventListener('click', generatePDF);

Leave a Reply

Close Menu