GetOrgChart导出图片报错、PDF导出空白问题求助

Hey there, let's work through your GetOrgChart export problems—both the image export error and blank PDF are common pitfalls, but we can troubleshoot them step by step.

Common Root Causes #

First, let's break down why these issues happen:

• Image export errors: Usually tied to cross-origin resource (CORS) restrictions for external images, missing export dependencies, or browser canvas size limits.
• Blank PDFs: Often caused by incomplete chart rendering before export, incompatible CSS properties, or misconfigured jsPDF settings.

Step-by-Step Fixes #

1. Verify Dependencies Are Loaded #

GetOrgChart relies on html2canvas and jsPDF for exports. Make sure these libraries are included in your page (use compatible versions to avoid conflicts):

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

2. Fix Image Export Errors #

• Resolve CORS Issues for External Images:
  If your org chart nodes use images from external domains, browsers block canvas access to these images. Fix this by either:
  • Downloading images to your local server, or
  • Adding the crossorigin="anonymous" attribute to your image tags (ensure the image server allows CORS):

    <img src="your-external-image.jpg" crossorigin="anonymous" />
    

• Adjust Canvas Size Limits:
  Some browsers cap canvas dimensions. Specify a smaller, manageable size when exporting:

  $("#chart-container").getOrgChart("export", "png", {
    width: 1200,
    height: 800 // Tweak based on your chart's actual size
  });
  

• Wait for Chart to Fully Render:
  Trigger exports only after the chart finishes drawing. Use GetOrgChart's draw event to bind export actions:

  $("#chart-container").getOrgChart({
    // Your existing chart configuration
    draw: function() {
      $("#export-image-btn").click(function() {
        $("#chart-container").getOrgChart("export", "png");
      });
    }
  });
  

3. Fix Blank PDF Exports #

• Use a Custom PDF Export Workflow:
  The default GetOrgChart PDF export can be flaky—replace it with a manual html2canvas + jsPDF implementation for more control:

  $("#export-pdf-btn").click(function() {
    const chartEl = document.getElementById("chart-container");
    // Temporarily disable transforms that break html2canvas
    chartEl.style.transform = "none";
    
    html2canvas(chartEl, { useCORS: true, scale: 2 }) // Scale 2 for sharper PDFs
      .then(canvas => {
        // Restore original transform
        chartEl.style.transform = "";
        
        const imgData = canvas.toDataURL("image/png");
        const pdf = new jspdf.jsPDF("p", "mm", "a4");
        const imgWidth = 210; // A4 width in mm
        const imgHeight = (canvas.height * imgWidth) / canvas.width;
        let remainingHeight = imgHeight;
        let yPosition = 0;
  
        // Add first page
        pdf.addImage(imgData, "PNG", 0, yPosition, imgWidth, imgHeight);
        remainingHeight -= 297; // A4 height in mm
  
        // Add extra pages if chart is too long
        while (remainingHeight >= 0) {
          yPosition = remainingHeight - imgHeight;
          pdf.addPage();
          pdf.addImage(imgData, "PNG", 0, yPosition, imgWidth, imgHeight);
          remainingHeight -= 297;
        }
        
        pdf.save("org-chart.pdf");
      });
  });
  

• Check for Hidden Elements:
  Ensure the chart container (or any parent element) isn't set to display: none or visibility: hidden when exporting—html2canvas can't capture hidden content.
• Debug with Browser Console:
  Hit F12 to open the dev console, then trigger the export. Look for errors like CORS policy or Canvas exceeded maximum size—these will point directly to the issue.

内容的提问来源于stack exchange，提问作者morizuki