Exporting Diagram

You can easily export a diagram into the PDF or PNG format. Check the related sections for details.

Exporting Diagram to PDF

You can export a digram to a PDF file via the related method pdf of the Export object:

// default export
diagram.export.pdf();

Related sample:  Export Diagram

It is possible to adjust the export settings by passing a configuration object with necessary options.

// export with config settings
diagram.export.pdf({
    url: "https://export.dhtmlx.com/diagram/2.0.0/pdf",
    name:"result.pdf"
});

You can specify the following settings for export to PDF:

  • url - (string) the url of the service that executes export and returns an exported file. The default value is https://export.dhtmlx.com/diagram/2.0.0/pdf;
  • name - (string) the name of the exported file;
  • header - (string) specifies the header that will be added to the resulted PDF file. You can use any HTML here;
  • footer - (string) specifies the footer that will be added to the resulted PDF file. You can use any HTML here;
  • pdf - (object) the options object. It can have the following properties:
    • scale - (number) the scale of the webpage rendering, 1 by default;
    • displayHeaderFooter - (boolean) displays header and footer, false by default;
    • headerTemplate - (string) an HTML template for the print header. It should be valid HTML markup with following classes used to inject printing values into them:
      • date - formatted print date;
      • title - document title;
      • url - document location;
      • pageNumber - current page number;
      • totalPages - total pages in the document.
    • footerTemplate - (string) an HTML template for the print footer. Should use the same format as the headerTemplate;
    • printBackground - (boolean) print background graphics, false by default;
    • landscape - (boolean) paper orientation, false by default;
    • pageRanges - (string) paper ranges to print, e.g., '1-5, 8, 11-13'. By default it is set to an empty string, which means print all pages;
    • format - (string) paper format. If set, takes priority over width or height options. 'Letter' by default;
    • width - (string) paper width, accepts values labeled with units;
    • height - (string) paper height, accepts values labeled with units;
    • margin - (object) paper margins, none by default:
      • top - (string) top margin, accepts values labeled with units;
      • right - (string) right margin, accepts values labeled with units;
      • bottom - (string) bottom margin, accepts values labeled with units;
      • left - (string) left margin, accepts values labeled with units.

Exporting Diagram to PNG

The dhtmlxDiagram component allows you to export a ready diagram to the PNG format. For this you need to use the png method as follows:

// default export
diagram.export.png();

Related sample:  Export Diagram

You can also define necessary export settings and pass them as an object to the png method:

// export with config settings
diagram.export.png({
    type:"jpeg",
    fullPage:true
});

The list of available settings is given below:

  • type - (string) specifies the file type, can be either jpeg or png (default);
  • quality - (number) the quality of the image, between 0-100. Not applicable to png images;
  • fullPage - (boolean) when true, takes a screenshot of the full scrollable page, false by default;
  • clip - (object) an object which specifies the clipping region of the page. Should have the following fields:
    • x - (number) x-coordinate of the top-left corner of clipping area;
    • y - (number) y-coordinate of the top-left corner of clipping area;
    • width - (number) the width of clipping area;
    • height - (number) the height of clipping area.
  • omitBackground - (boolean) hides the default white background and allows capturing screenshots with transparency.
Back to top