Dojo Chart PDF-Konvertierung in IE11

PDF OutputsDojo Chart PDF-Konvertierung in IE11

Ich bin neu in DOJO-Charts und in einen der Anforderung, haben wir Dojo-Diagramm in PDF zu konvertieren.

Um dies zu erreichen, haben wir die Bibliotheken "JSPDF" und "html2canvas" verwendet.

Es funktioniert gut in Google Chrome und nicht in IE11.

Mit freundlichen Grüßen.

Grüße, Byreddy

Hier ist mein Code ....

PDF-Test

<div data-dojo-type="dojox.charting.widget.Chart" id="chart1" style="width: 600px; height: 400px; background-color:white;"></div> 

<div id="chart1SelectableLegend"></div> 

<button id="pdfButton" onclick="convertPDF()">DownloadPDF</button> 

<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/dojo.js" data-dojo-config="isDebug:true, async:true"></script> 

<script> 

    require(["dojox/charting/Chart", 
"dojox/charting/plot2d/Lines", 
"dojox/charting/axis2d/Default", 
"dojox/charting/plot2d/StackedColumns", 
"dojox/charting/action2d/Tooltip", 
    "dojo/ready", 
    "dojox/charting/widget/SelectableLegend", "dojox/gfx/utils", 
    ], 
    function (Chart, Lines, Default, StackedColumns, Tooltip, ready, SelectableLegend, Utils) { 
     var chart1 = new Chart("chart1"); 
     chart1.title = "stacked chart"; 
     chart1.addPlot("stackedColumnsPlot", { 
      type: StackedColumns, 
      gap: 6, 
      lines: true, 
      areas: true, 
      markers: true, 
      labels: true, 
      labelStyle: "inside",    
      tension: "2" 
     }); 
     chart1.addAxis("x", { 
      dropLabels: false, 
      labelSizeChange: true, 
      rotation: -20, 
      majorTicks: true, 
      majorTickStep: 1, 
      minorTicks: false, 
      font: "normal normal bold 12px Tahoma", 
      fontColor: "black", 
      labels: [{ "value": 1, "text": "A" }, { "value": 2, "text": "B" }, { "value": 3, "text": "C" }, { "value": 4, "text": "D" }, { "value": 5, "text": "E" }, { "value": 6, "text": "F" }] 
     }); 
     chart1.addAxis("y", { 
      title: "Cost", 
      fixLower: "major", 
      fixUpper: "major", 
      includeZero: true, 
      majorTickStep: 500, 
      max: 1500,    
      vertical: true 
     }); 

     chart1.addSeries("AC", [300, 500, 500, 600, 300, 280], 
     { 
      plot: "stackedColumnsPlot", 
      stroke: { 
       color: "#FFFFFF", 
      }, 
      fill: "#FFAEAE " 
     }); 
     chart1.addSeries("TV", [244, 301, 699, 620, 820, 837], { 
      plot: "stackedColumnsPlot", 
      stroke: { 
       color: "#FFFFFF" 
      }, 
      fill: "#FFEC94" 
     }); 
     chart1.addSeries("ACCE", [500, 100, 100, 100, 200, 250], { 
      plot: "stackedColumnsPlot", 
      stroke: { 
       color: "#FFFFFF" 
      }, 
      fill: "#B4D8E7" 
     }); 
     chart1.addSeries("OTHER", [100, 150, 100, 700, 700, 0, 800, 300, 300], { 
      plot: "stackedColumnsPlot", 
      stroke: { 
       color: "#FFFFFF" 
      }, 
      fill: "#56BAEC" 
     }); 

     chart1.render(); 

     new SelectableLegend({ 
      chart: chart1, 
      horizontal: true, 
      align: top 
     }, "chart1SelectableLegend");   
    }); 
</script> 

<script> 
    function convertPDF() { 

     var pdf = new jsPDF('l', 'pt', 'letter'); 

     html2canvas(document.getElementById('chart1'), { 
      //proxy: "https://html2canvas.appspot.com/query", 
      //useCORS: true, 
      onrendered: function (canvas) { 
       var img = canvas.toDataURL("image/jpeg"); 

       pdf.addImage(canvas, 'JPEG', 15, 15); 

       pdf.save('PDFTest.pdf'); 
      } 
     }); 
    } 
</script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.debug.js"></script> 

<script async="" src="https://cdn.rawgit.com/eligrey/FileSaver.js/62d219a0fac54b94cd4f230e7bfc55aa3f8dcfa4/FileSaver.js"></script> 

<script src="JSRefs/html2canvas_0.5.0-alpha1.js"></script>

Quelle

2016-04-17 sirish byreddy

Können Sie mehr über "nicht in IE11" erklären? Sie haben einen Fehler und nichts passiert? wenn ja, welcher Fehler? oder hast du ein hässliches pdf? Wenn ja, können Sie das OK PDF und das Hässliche teilen? – ben

Hallo Ben, ich bekomme eine leere PDF-Ausgabe in IE11 (Nur Titel erscheint in meiner IE11-Ausgabe). Für Ihre Referenz hinzugefügt einen Screenshot von "PDF Outputs" Link zu meiner früheren Frage. –

Hier ist das Arbeitsbeispiel, notieren Sie die aufgeführten wichtigen Dinge im Code, die den Unterschied gemacht haben.

gfxRenderer: "Leinwand"
htmlLabels: false,

Unten ist der Arbeitscode zusammen mit Tooltip-Funktionalität.

<!DOCTYPE HTML> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css"> 
     <link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css"> 

     <script> 
      dojoConfig = { 
       parseOnLoad: true,  // enables declarative chart creation 
       gfxRenderer: "canvas" // canvas is first priority 
      }; 
     </script> 
     <script src="https://js.arcgis.com/3.16/"></script> 

     <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.debug.js"></script> 
     <script src="html2canvas.js"></script> 

     <script> 
      function convertPDF() { 
       var pdf = new jsPDF('l', 'pt', 'letter'); 
       html2canvas(document.getElementById('chart1'), { 
        onrendered: function (canvas) { 
         var img = canvas.toDataURL("image/png"); 
         pdf.addImage(img, 'PNG', 15, 15); 
         pdf.save('PDFTest.pdf'); 
        } 
       }); 
      } 
     </script> 

     <script> 
      require([ 
       "dojox/charting/Chart", 
       "dojox/charting/plot2d/Lines", 
       "dojox/charting/axis2d/Default", 
       "dojox/charting/plot2d/StackedColumns", 
       "dojox/charting/action2d/Tooltip", 
       "dojox/charting/widget/SelectableLegend", 
       "dojox/gfx/utils", 
       "dojo/ready", 
       "dojo/domReady!" 
      ], function (
       Chart, 
       Lines, 
       Default, 
       StackedColumns, 
       Tooltip, 
       SelectableLegend, 
       Utils, 
       ready 
      ) { 
       var chart1 = new Chart("chart1"); 

       chart1.htmlLabels = false; 
       chart1.title = "Stacked Chart"; 

       chart1.addPlot("stackedColumnsPlot", { 
        htmlLabels: false, 
        type: StackedColumns, 
        gap: 5, 
        lines: true, 
        areas: true, 
        markers: true, 
        labels: true, 
        labelOffset: -10, 
        labelStyle: "default",    
        tension: "2" 
       }); 

       chart1.addAxis("x", { 
        dropLabels: false, 
        labelSizeChange: true, 
        rotation: -20, 
        majorTicks: true, 
        majorTickStep: 1, 
        minorTicks: false, 
        font: "normal normal bold 12px Tahoma", 
        fontColor: "black", 
        labels: [ 
         { "value": 1, "text": "A" }, 
         { "value": 2, "text": "B" }, 
         { "value": 3, "text": "C" }, 
         { "value": 4, "text": "D" }, 
         { "value": 5, "text": "E" }, 
         { "value": 6, "text": "F" } 
        ] 
       }); 

       chart1.addAxis("y", { 
        title: "Cost", 
        fixLower: "major", 
        fixUpper: "major", 
        includeZero: true, 
        majorTickStep: 500, 
        max: 1500,    
        vertical: true 
       }); 

       chart1.addSeries("AC", [300, 500, 500, 600, 300, 280], { 
        plot: "stackedColumnsPlot", 
        stroke: { 
         color: "#FFFFFF" 
        }, 
        fill: "#FFAEAE " 
       }); 
       chart1.addSeries("TV", [244, 301, 699, 620, 820, 837], { 
        plot: "stackedColumnsPlot", 
        stroke: { 
         color: "#FFFFFF" 
        }, 
        fill: "#FFEC94" 
       }); 
       chart1.addSeries("ACCE", [500, 100, 100, 100, 200, 250], { 
        plot: "stackedColumnsPlot", 
        stroke: { 
         color: "#FFFFFF" 
        }, 
        fill: "#B4D8E7" 
       }); 
       chart1.addSeries("OTHER", [100, 150, 100, 700, 700, 80], { 
        plot: "stackedColumnsPlot", 
        stroke: { 
         color: "#FFFFFF" 
        }, 
        fill: "#56BAEC" 
       }); 

       new Tooltip(chart1, "stackedColumnsPlot", { 
        text: function(chartItem) { 
         // console.debug(chartItem); 
         //return "Rating: " + chartItem.run.data[chartItem.index] + "; Total Value: " + chartItem.y; 
         // return "Comparision Rating: " + chartItem.y; 
         return "Value: " + chartItem.run.data[chartItem.index] + "; Stacked Value: " + chartItem.y; 
        } 
       }); 

       chart1.render(); 

       new SelectableLegend({ 
        chart: chart1, 
        horizontal: true, 
        align: top 
       }, "chart1SelectableLegend");   
      }); 
     </script> 
    </head> 
    <body class="claro"> 
     <div id="chart1" style="width: 600px; height: 400px;"></div> 

     <div id="chart1SelectableLegend"></div> 

     <button id="pdfButton" onclick="convertPDF()">DownloadPDF</button> 
    </body> 
</html>

Quelle

2016-04-24 13:58:46

Antwort

Verwandte Themen