Skip to content

The 2018 server-side PNG/PDF export implementation using Node, Puppeteer and Chrome headless

License

Notifications You must be signed in to change notification settings

jgraph/draw-image-export2

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

94 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

draw-image-export2

The current server-side PNG/PDF export implementation using Node, Puppeteer and Chrome headless

Running the service (this is your instructions, not the next section)

  • npm install
  • npm start

Then add export=http://localhost:8000 (hostname and port as needed) as an URL parameter to use that service for development and testing.

Updating internal draw.io versions (internal only)

  • su chrome
  • cd ~/draw-image-export2
  • git pull
  • npm install
  • forever restartall

Usage

This service accepts the following (url encoded) parameters provided via a HTTP (GET or POST) request. All parameters are optional except where emboldened.

data-string means a string of data that has been:

  1. deflated then
  2. base64 encoded then
  3. url-encoded

There are 2 available modes for the service:

  1. (mode 1) Render some html that is provided
  2. (mode 2) Render a diagram from some html (which can be provided or retrieved from a given url)

Mode 1: Provide some html to render

Argument Type Purpose Default Example
html data-string html to render -
w number Set the view port height 0 10
h number Set the view port width 0 10

Note: Format is fixed to png for this mode.

Mode 2: Render a diagram

To render a diagram, the diagram-data must be retrieved, this is the draw.io data that can be used to re-render the diagram. There are 2 modes to get this data:

  1. (mode 2.1) Provide a url to a resource
  2. (mode 2.2) Provide the data in the request

Whichever option is used the following process will be followed to extract the diagram data:

  1. If the data is a XHTML document (well-structured HTML)
    1. For the first div with the mxgraph class defined
    2. Use the data in the data-mxgraph attribute (if one is present) OR
    3. Use the text content of the element
  2. If the data is a SVG image
    1. Extract the diagram data from the content attribute if possible, otherwise use as-is

Mode 2.1: Get diagram-data from url

Argument Type Purpose Default Example
url string absolute url to diagram to render -

Mode 2.2: Get diagram-data from xml (or svg)

Provide either xmldata or xml, xmldata takes precedence.

Argument Type Purpose Default Example
xmldata data-string Content of the diagram to render -
xml string (optionally url-encoded) Content of the diagram to render -

Common parameters

Argument Type Purpose Default Example
format§ (see below) string The renderering format for the diagram png pdf
number Set the view port height 0 10
number Set the view port width 0 10
embedXml* string Embed the diagram data in the png "0" or "1"
base64 string Whether the response data should be base64 (and png embedded data) encoded "0" or "1"
bg§ string The background colour for the image "#ff8888"
embedData* string Embed data in the png with the dataHeader key null "0" or "1"
data* string The data to embed into the png -
dataHeader* string The key to use when embedding the data into the png "myKey"
filename string The filename to included in the content-disposition header "myFile.png"
border¶ number The size of the border for the page 0 10
from¶ number The index of the page to start rendering from 1
to¶ number The index of the page to finish rendering at 2
pageId¶ string The id of the page to render "page id"
allPages¶ string Whether all pages should be rendered "0" "0" or "1"
scale¶ number The scale for the rendered diagram 1 1.5
extras¶ json-string Additional detail how what should be rendered, e.g. layer-names ?

* Only applicable when format is png. § means property is used by both this service and draw.io (https://www.draw.io/export3.html) to control how the diagram is rendered. ¶ means property is passed to draw.io (https://www.draw.io/export3.html) to control how the diagram is rendered.

Formats

The following formats can be used

  • 'png' (default)
  • 'jpg' (or 'jpeg')
  • 'pdf'

Examples

Example 1 (render a diagram in png format from provided diagram data)

POST https://exp-pdf.draw.io/ImageExport4/export HTTP/1.1
Host: exp-pdf.draw.io
Content-Type: application/x-www-form-urlencoded
Content-Length: 1234

format=png&xml=%3Cmxfile+...

Example 2 (render a diagram in png format from provided url - to a diagram file)

GET https://exp-pdf.draw.io/ImageExport4/export?format=png&bg=ffffff&url=https://somewhere/diagram.xml HTTP/1.1
Host: exp-pdf.draw.io

About

The 2018 server-side PNG/PDF export implementation using Node, Puppeteer and Chrome headless

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •