2017-02-22 1 views
-2

Я сделал проект для преобразования HTML в файл PDF.Как сделать результат PDF-преобразования, используя jspdf-открытие в новой вкладке?

Однако, вместо того, чтобы заставить клиента загружать файл, я хочу, чтобы он был открыт в новом окне. Как я могу это сделать?

В этом коде я просто могу конвертировать таблицу HTML и highchart в pdf, и она будет сохранена в моем корневом файле или файле загрузки. Как открыть PDF на новой вкладке? Вот мой код:

<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> 
+0

Итак, вы хотите отобразить pdf-файл? после преобразования его из HTML? Вы опубликовали код, но где в коде вы столкнулись с проблемами? Вы пробовали конвертировать и открывать PDF? –

+0

из этого кода я могу получить pdf-файл, но файл pdf должен быть загружен первым. –

+0

Мне нужно сделать результат преобразования PDF только загруженным только в новую вкладку. вы знаете, как это? –

ответ

0

Вы можете попробовать doc.output('dataurlnewwindow'), но, по крайней мере, Firefox и Chromium может блокировать его как всплывающее окно. И это нормально, потому что я действительно ненавижу страницы, открывающие для меня новые окна.

+0

Я попробовал этот метод, но результат преобразования PDF имеет пустую страницу –