Wie mache ich das Ergebnis der PDF-Konvertierung mit jspdf in einem neuen Tab öffnen?

Question

Ich habe ein Projekt gemacht, um eine HTML in eine PDF Datei zu konvertieren.

Anstatt den Client zu zwingen, die Datei herunterzuladen, möchte ich, dass sie in einem neuen Fenster geöffnet wird. Wie kann ich das machen?

In diesem Code kann ich nur die HTML Tabelle und die highchart in das PDF konvertieren und es wird in meiner Root-Datei oder Download-Datei gespeichert. Wie öffne ich das PDF in einem neuen Tab? Hier ist mein Code:

<script> 
     $(document).ready(function() { 
      // create canvas function from highcharts example http://jsfiddle.net/highcharts/PDnmQ/ 
      (function (H) { 
       H.Chart.prototype.createCanvas = function (divId) { 
        var svg = this.getSVG(), 
         width = parseInt(svg.match(/width="([0-9]+)"/)[1]), 
         height = parseInt(svg.match(/height="([0-9]+)"/)[1]), 
         canvas = document.createElement('canvas'); 

        canvas.setAttribute('width', width); 
        canvas.setAttribute('height', height); 

        if (canvas.getContext && canvas.getContext('2d')) { 

         canvg(canvas, svg); 

         return canvas.toDataURL("image/jpeg"); 

        } 
        else { 
         alert("Your browser doesn't support this feature, please use a modern browser"); 
         return false; 
        } 

       } 
      }(Highcharts)); 

      $('#save').click(function() { 
       var doc = new jsPDF(); 

       // chart height defined here so each chart can be palced 
       // in a different position 
       var chartHeight = 90; 

       // All units are in the set measurement for the document 
       // This can be changed to "pt" (points), "mm" (Default), "cm", "in" 
       doc.setFontSize(40); 


       html2canvas($("#kanan"), { 
        onrendered: function (canvas) { 
         var imgData = canvas.toDataURL(
          'image/png'); 
         var doc = new jsPDF('p', 'mm'); 


         $('.myChart').each(function (index) { 

          var imageData = $(this).highcharts().createCanvas(); 

          // add image to doc, if you have lots of charts, 
          // you will need to check if you have gone bigger 
          // than a page and do doc.addPage() before adding 
          // another image. 

          /** 
          * addImage(imagedata, type, x, y, width, height) 
          */ 
          doc.addImage(imgData, 'PNG', 10, 10); 
          doc.addImage(imageData, 'JPEG', 45, (index * chartHeight) + 40, 120, chartHeight); 
          doc.save('Laporan Termocouple.pdf'); 


         }); 
        } 
       }); 
       //loop through each chart 

       //save with name 

      }); 


      //charts 
      // JavaScript Document 
      $(function() { 
       var chart; 
       $(document).ready(function() { 
        $.getJSON("dataline.php", function (json) { 

         chart = new Highcharts.Chart({ 
          chart: { 
           renderTo: 'chart1', 
           type: 'line' 

          }, 
          title: { 
           text: 'Termocouple Graph Result' 

          }, 
          subtitle: { 
           text: '' 

          }, 
          xAxis: { 
           title: { 
            text: 'Sensor' 
           }, 
           categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] 
          }, 
          yAxis: { 
           title: { 
            text: 'Temperature (°C)' 
           }, 
           plotLines: [{ 
            value: 0, 
            width: 1, 
            color: '#808080' 
           }] 
          }, 
          tooltip: { 
           formatter: function() { 
            return '<b>' + this.series.name + '</b><br/>' + 
             this.x + ': ' + this.y; 
           } 
          }, 
          legend: { 
           layout: 'vertical', 
           align: 'right', 
           verticalAlign: 'top', 
           x: -10, 
           y: 120, 
           borderWidth: 0 
          }, 
          series: json 
         }); 
        }); 

       }); 


      }); 
     }); 


    <!-- language: lang-html --> 
    <div class="container"> 
     <div id="grafik" style="width: auto; height:300px;"></div> 
     <input class="btn btn-default" type="button" value="Save" name="save" id="save" /> 
     <div id="chart1" class="myChart" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 
    </div> 
    </form> 
    </div> 

Answer 1

Sie könnten doc.output('dataurlnewwindow') versuchen, zumindest aber Firefox und Chromium blockieren kann es als Pop-up. Und das ist in Ordnung, weil ich Seiten hasse, die neue Fenster für mich öffnen.