Export to PDF, nodes not containing png images and fontawesome icons

GoJS
1

we are rendering graphs using go.js and integrating with Appian plugin.

On the nodes of the graph, we have added “Font Awesome icons(using Unicode of font awesome font)” and “.png images(which are stored in project path) ”.

We are working on export to PDF/PNG feature where we are not able to export the icons and png in the PDF file.
In the export to PNG file both icons and png images are appearing.

2

How are you rendering a PDF file?
Have you looked at the sample at projects/pdf/minimalPDF.html ?

3

Yes Walter, yes we are following minimalPDF

4

PDF files don’t normally permit linking to external image files (such as your PNG files), which is why that minimalPDF sample draws each image to a Canvas in order to “inline” the image data into the SVG. So if those PNG files are indeed being served from the same origin as your page, then they should be showing up in your PDF. But if they come from a different origin, then for security (CORS) reasons you may get blanks instead.

I’m not sure about Font Awesome icons. The minimalPDF sample doesn’t try to embed any fonts into the PDF file, which it would need if it wanted to draw them. I’m not sure that it could even if it tried, since I don’t know how fonts could be inserted into PDF files.

5

The png images are in same folder of the JavaScript file,

Icons started loading on exported PDF, with jsPDF but it is referring to all.min.js and icons are appearing differently. But in our code we are referring to all.min.css(6.5.1)

6

To inline the image data into the rendered SVG, insert this code where it is setting up the options to pass to Diagram.makeSvg:

              // render image contents "inline" using a Data URL
              makeOptions.elementFinished = (graphobject, svgelement) => {
                const pic = graphobject;
                if (!(pic instanceof go.Picture) || !(svgelement instanceof SVGImageElement)) return;
                const img = pic.element;
                if (img) {
                  const canvas = document.createElement('canvas');
                  canvas.width = img.width;
                  canvas.height = img.height;
                  const ctx = canvas.getContext('2d');
                  ctx.drawImage(img, 0, 0);
                  try {
                    svgelement.setAttribute('href', canvas.toDataURL());
                  } catch (ex) {
                    console.log('Error drawing ' + pic.toString() + '\n  ' + ex.toString());
                  }
                }
              };

I haven’t used jsPDF, so I don’t understand your mention of all.min.*.