GithubHelp home page GithubHelp logo

Comments (4)

muthukumaran-m avatar muthukumaran-m commented on July 18, 2024 1

Thank you @laingsimon . By the help of this post, I did it.

from draw-image-export2.

laingsimon avatar laingsimon commented on July 18, 2024

Suggestion for readme

draw-image-export2

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

Running the service

  • npm install
  • npm start

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

from draw-image-export2.

alderg avatar alderg commented on July 18, 2024

Done. Thanks @laingsimon !

from draw-image-export2.

VVD avatar VVD commented on July 18, 2024

Can't find answers in this readme:
How to run it in tomcat 9 (same as draw.io) or apache 2.4?
How to configure integration with draw.io? jgraph/drawio#664
Where I can get release version?

Thanks!

from draw-image-export2.

Related Issues (13)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.