Comments (4)
Thank you @laingsimon . By the help of this post, I did it.
from draw-image-export2.
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:
- deflated then
- base64 encoded then
- url-encoded
There are 2 available modes for the service:
- (mode 1) Render some html that is provided
- (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:
- (mode 2.1) Provide a url to a resource
- (mode 2.2) Provide the data in the request
Whichever option is used the following process will be followed to extract the diagram data:
- If the data is a XHTML document (well-structured HTML)
- For the first
div
with themxgraph
class defined - Use the data in the
data-mxgraph
attribute (if one is present) OR - Use the text content of the element
- For the first
- If the data is a SVG image
- Extract the diagram data from the
content
attribute if possible, otherwise use as-is
- Extract the diagram data from the
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 | |
w§ | number | Set the view port height | 0 | 10 |
h§ | 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.
Done. Thanks @laingsimon !
from draw-image-export2.
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)
- PDF Generation issue HOT 1
- CPU count detection works wrong HOT 1
- npm install fails in node_modules/puppeteer HOT 7
- Render background grid
- Support export to svg HOT 7
- Export as PDF with overall shadows (View > Shadow) HOT 1
- Unable to export a specified page when a preceeding page contains brackets in its name HOT 8
- Time stamp placeholder uses server date
- Match desktop command line interface HOT 1
- Error 500 - testing HOT 1
- documentation unclear HOT 3
- On how to use it?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from draw-image-export2.