Hi Team,
I am using GoJs with Vue.Js framework. I tried to download graph as image . But Graph is not downloading completely. I attached two screen shots I want to download graph (as shown in Expecteddownload.png) but graph is downloaded as shown in (Actutaldownaload.png)
I tried solution as mentioned in forum. but could not get success
Please help on this.
What is your code that generates the image?
function myCallback(blob) {
var url = window.URL.createObjectURL(blob);
var filename = “myBlobFile.png”;
var a = document.createElement("a");
a.style = "display: none";
a.href = url;
a.download = filename;
// IE 11
if (window.navigator.msSaveBlob !== undefined) {
window.navigator.msSaveBlob(blob, filename);
return;
}
document.body.appendChild(a);
requestAnimationFrame(() => {
a.click();
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
});
}
function makeBlob() {
var blob = myDiagram.makeImageData({ background: "white", returnType: "blob", callback: myCallback });
}
With same code I tried
Try setting scale: 1 in the options to makeImageData.
I changed scale :1 … but same issues. Complete Graph did not download
Hi
I tried your solution code is
var d = this.myDiagram.documentBounds;
var fWidth = d.width;
var fHeight = d.height;
var blob = this.myDiagram.makeImageData({ background: "white", size: new go.Size(fWidth,fHeight), returnType: "blob", callback: this.myCallback });
But still complete graph is not download
To protect apps running in low memory environments, the maximum image size defaults to 2000x2000, as discussed in that Introduction page.
Can We download the whole graph as a html file.?
Please give reference download graph as html
I tried size 2000 * 2000 but no success .
myCallback(blob) {
var url = window.URL.createObjectURL(blob);
var filename = 'graph.png';
var a = document.createElement("a");
a.style = "display: none";
a.href = url;
a.download = filename;
// IE 11
if (window.navigator.msSaveBlob !== undefined) {
window.navigator.msSaveBlob(blob, filename);
return;
}
document.body.appendChild(a);
requestAnimationFrame(() => {
a.click();
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
});
},
downaloadImage(){
console.log('Downaload')
var d = this.myDiagram.documentBounds;
var fWidth = d.width;
var fHeight = d.height;
var blob = this.myDiagram.makeImageData({ background: "white", scale:.1, size: new go.Size(2000,2000), returnType: "blob", callback: this.myCallback });
}What is the value of this.myDiagram.documentBounds? It might be that 0.1 times the width or height of the Diagram.documentBounds is greater than 2000. If so, you need to either decrease the scale or increase the maxSize property, as I suggested above.
Can we download graph as HTML pages ?
If yes Please provide solution.
Else I need your support to download big graph with clear readable format.
What do you mean by “download graph as HTML page”?
That seems very unusual. Few people want to download an HTML file along with all of the files that it loads. Most people want to download a single file that is a rendering of the diagram.
Instead of downloading a raster image, get an SVG file: GoJS Making SVG -- Northwoods Software
Example: Minimal SVG Download
Also: Flowchart
If you must download an image file: Minimal Image Blob and Download
But you will need to set the scale and maxSize options to handle larger diagrams, which might not work in limited memory environments, as discussed at: GoJS Making Images -- Northwoods Software
As I saw your example … I noticed that on a button “Download the HTML and JS to use as a starting point” you implemented the functionality all graph is downloaded as html …
I see code for this functionality..
function goDownload() {
var sampleHTML = byId(“allSampleContent”); // or “sample” + “code”, but this contains both and more
var title = location.href.substring(location.href.lastIndexOf(‘/’)+1);
var sampleParent = byId(“sample”).parentElement;
sampleParent.removeChild(b1);
sampleParent.removeChild(b2);
var text = `
This is a minimalist HTML and JavaScript skeleton of the GoJS Sample ${title}<\/a>. It was automatically generated from a button on the sample page, and does not contain the full HTML. It is intended as a starting point to adapt for your own usage. For many samples, you may need to inspect the full source on Github<\/a> and copy other files or scripts. <\/p> ${sampleHTML.outerHTML} `; // replace all uses of 'https://gojs.net/latest/extensions' with unpkg equivalent text = text.replace(/\.\.\/extensions/g, `https://unpkg.com/gojs@${go.version}/extensions`); // any src that does not begin with 'http' should get `https://unpkg.com/gojs@${go.version}/CURRENTFOLDER/` text = text.replace(/
This is a minimalist HTML and JavaScript skeleton of the GoJS Sample
It was automatically generated from a button on the sample page,
and does not contain the full HTML. It is intended as a starting point to adapt for your own usage.
For many samples, you may need to inspect the
full source on Github</a>
and copy other files or scripts.
${sampleParent.innerHTML}
` // replace all uses of '../extensions' with unpkg equivalent
text = text.replace(/\.\.\/extensions/g, `https://unpkg.com/gojs@${go.version}/extensions`)
// any src that does not begin with 'http' should get `https://unpkg.com/gojs@${go.version}/CURRENTFOLDER/`
text = text.replace(/<script src="(?:(?!http))+/g, `https://unpkg.com/gojs@${go.version}/${dirName}`)
var element = document.createElement('a')
element.setAttribute('href', 'data:text/html;charset=utf-8,' + encodeURIComponent(text))
element.setAttribute('download', title)
element.style.display = 'none'
document.body.appendChild(element)
element.click()
document.body.removeChild(element)
b1.innerText = 'View the code for this sample in-page'
b2.innerText = 'Download the HTML and JS to use as a starting point'
sampleParent.appendChild(b1)
sampleParent.appendChild(b2)
}
That code is part of the samples framework that our web site implements for our customers, who are programmers.
I need same functionality and feature when Download graph. Could you please give me reference.
The code is right there in the samples. There’s nothing else.
Please provide a piece of sample only for download …
Hi Walter,
We have a requirement download graph and after loading when we click on any part of node that will hightlighted with parent and child nodes as showing in example…
We have requirement after loading … highlighting funcationlity will work as live
applicaiton. I attached screen shots.
Why do you have such a requirement?
