javascriptjqueryhtmlpdfobject

Using PDFObject to download pdf with dynamic filename


i'm trying to use PDFObject for my brochure what i want is for the user to select a vehicle and download the specific vehicle that she/he has chosen. here's my code:

<form method="get" action="">

  <div class="form-group"><h5>Model</h5></div>

  <div id="select-vehicle" class="form-group">
    <select class="form-control">
      <option selected disabled> Select Vehicles</option>
    </select>
  </div>

  <div class="form-group">
    <button type="submit" value="submit" id="submit" disabled class="btn btn-default">DOWNLOAD</button>
  </div>

</form>

and this is my working javascript:

var workers = ["86", "Altis", "Avanza", "Altis", "Camry", "Fortuner", "FJ Cruiser"
            , "Hiace", "Hilux", "Innova", "LandCruiser", "Prado", "Previa", "PriusC"
            , "Rav4", "Vios", "Yaris"];
        for(var i=0; i< workers.length;i++)
        {
        //creates option tag
          jQuery('<option/>', {
                value: workers[i],
                html: '2017' + ' ' + workers[i] + ' ' + '&#174;'
                }).appendTo('#select-vehicle select'); //appends to select if parent div has id dropdown
        }
          $('button').click(function(event) {
            var value = $( "select" ).val();
            $('form').attr('action', '../../vehicles/' + value +'/');
          });

        $('select').change(function(){
          if ($(this).val())
          {
            $("button").removeAttr('disabled');
          }
        });

i wanted to pass this $('form').attr('action', '../../vehicles/' + value +'/'); to the PDFObject so that it will look for the right filename to download the file.


Solution

  • DOWNLOAD THE PDF:

    PDFObject is for embedding a pdf in your page. For downloading the pdf you can just go to that pdf, but you need the pdf file name. You don't show the name of the pdf files, so here you have an example if file names are the same as the value of the select...

    $('button').click(function(e) {
        e.preventDefault();
        var value = $('select').val();
        window.open('../../vehicles/' + value + '/' + value + '.pdf','_blank');
    });
    

    EMBED THE PDF:

    If you want to embed that pdf in the page using PDFObject (you don't need a formfor this option, just the select), first create a container in your html to hold that pdf...

    <div id="vehiclepdf"></div>
    

    ... and the invoke PDFObject when you click the button...

    $('button').click(function(e) {
        e.preventDefault();
        var value = $('select').val();
        PDFObject.embed('../../vehicles/' + value + '/' + value + '.pdf',"#vehiclepdf");
    });