Hi!

In this post I will try to create labeling app. I have some more ideas that require generating pdfs in the future so I decided to experiment. For this task I will try to create form that will take user input and will create a label.

I think the most easy approach while generating more complex things will be to use some library that will allow easy converting html to pdf. But for now I won't use any library just to see where I get.

Preparation

I fount this function window.print() that opens the dialog to print the current document so there you can choose option print as pdf.

My idea was to get user input in one page, store it and then call second page, load user values and just call my window.print() function to print.

HTML

We will need two html pages, so I created index.html and print.html.

In my index.html file I created simple markup allowing user to type all information that usually are required to send the package.

At this point I also thought it will be nice to have some kind of tracking number for our package. For now I just typed this number by hand.

<div class="generate-wrap">
    <h1>Generate label.</h1>
    <form>
      <div class="field">
        <label for="">Name and surname:</label>
        <input type="text" id="name" required>
      </div>
      <div class="field">
        <label for="">Street:</label>
        <input type="text" id="street" required>
      </div>
      <div class="field">
        <label for="">City/Code:</label>
        <input type="text" id="city" required>
      </div>
      <div class="field">
        <label for="">E-mail:</label>
        <input type="text" id="email" required>
      </div>
    </form>

    <div class="trackingnr" id="trackingnr">Tracking number: 0088 0000 2147 6716 </div>
    <a href="print.html" target="_blank" onclick="saveData()"><button class="printbtn">Print</button></a>
  </div>

And as mentioned above, the idea is to save the data on this page, and next load it on the next page. To achieve this I wrapped my print button with anchor tag that will redirect user to print.html page and also call saveData() function. For saving data I will use local storage.

Our index.html page will look like this.

Before we jump to the data saving I want to create a function that will generate our tracking number.

Tracking number generator

Usually tracking numbers start with combination of digits that is unique for one company. I decided that my combindation will be 0088 0000 but it can really be any number. After my unique combination I would like to have some random number to imitate package number.

function generateTrackingNumber(){  
  let number = Math.floor(10000000 + Math.random() * 90000000).toString()  
  let formatnumber = "0088 0000 " + number.substring(0,4) + " " + number.substring(4,8)
  localStorage.setItem('trackingnumber', formatnumber)
  document.getElementById('trackingnr').innerHTML = "Tracking number: " + formatnumber
}

For this task I will need two variables one to store my random number and second to format it to my unique combination. As number I want to have any 8 digit number. And in formatnumber I want to have spaces every 4 digits so I can read it more easily.

Lastly I save this trackingnumber to localstorage and display it in our html markup. In the markup itself I added button that will allow user to generate tracking number.

<div class="trackingnr" id="trackingnr">Tracking number: </div>
<button class="generatenumber" onclick="generateTrackingNumber()">Generate Tracking nr</button>
<a href="print.html" target="_blank" onclick="saveData()"><button class="printbtn">Print</button></a>

Now I need to create my saveData() function. Here I used simple approach, when user clicks Print I call my function, read all values from inputs and save them in localstorage.

function saveData(){
  var name = document.getElementById('name').value
  var street = document.getElementById('street').value
  var city = document.getElementById('city').value
  var email = document.getElementById('email').value

  localStorage.setItem('name', name)
  localStorage.setItem('street', street)
  localStorage.setItem('city', city)
  localStorage.setItem('email', email)
}

Displaying and saving as pdf

Lastly we need to create our print.html markup. On page load I want to call my printDoc() function that will load all data that we saved. And also I added div that will hold all the displayed information.

<body onload="printDoc()">

  <div class="mylabel" id="mylabel"></div>

</body>

Now in my printDoc() function I can display all the data that we stored earlier in localstorage. In the end calling window.print() function that will open printing window allowing us to print or save our label as pdf.

let mylabel = document.getElementById('mylabel')

function printDoc(){
  let html =`
  <div class="packagelabelwrap">
    <h1>My package label</h1>
    <div class="labelinfo">Name and Surname: ${localStorage.getItem('name')}</div> 
    <div class="labelinfo">Street: ${localStorage.getItem('street')}</div> 
    <div class="labelinfo">City/Code: ${localStorage.getItem('city')}</div> 
    <div class="labelinfo">E-mail: ${localStorage.getItem('email')}</div> 
    <div class="labelinfo">Tracking number: ${localStorage.getItem('trackingnumber')}</div> 
  </div>`
  mylabel.innerHTML = html
  window.print()
}

Styling

As for the styles I added bolder font weights and some colors to buttons.

Final results

Our generating page should look like this.

And our second print page will look like this in printing preview.

If you find any mistakes or you have ideas how to refactor my solutions to be simplier/ better please let me know :)