How to convert fabrics js into pdf

[onlinecheckwriter-zz]

Hello,
How can we convert fabricsjs json into pdf and save it in backend server?

[oxiao]

may you take a look at node-canvas ?

[asturur]

So node-canvas will allow you to have a pdf renderer from the canvas itself, so all the low level instructions of fabricJS should become a PDF.
I'm not sure how would you handle fonts.

[asturur]

I'll close the issue since there is nothing to solve from me, but if you want to talk about it, feel free to write.

[dungmv]

Why fabricjs rely on the jsdom? can fabricjs rely on NodeCanvas and remove jsdom? I think that is better

[asturur]

Well fabric run in browser and additionally in node.
Fabric does some dom manipulation and without JSDOM that would not be possible.
Jsdom also provide a clean interface for the canvas.

If the point is to initialize a backend as PDF in node from node-canvas, that should be somehow organized trough JSDOM to pass the correct options.

[dungmv]

@asturur I found the solution to export pdf, but the result is a image inside the pdf.

const fs = require('fs');
const fabric = require('fabric').fabric;
const { createCanvas } = require('canvas')
const utils = require('jsdom/lib/jsdom/living/generated/utils');

const mPDFcanvas = createCanvas(600, 800, 'pdf') // see "PDF Support" section

const el = fabric.document.createElement('canvas');
el[utils.implSymbol]._canvas = mPDFcanvas;
const fabricCanvas = new fabric.StaticCanvas(el, { width: 1024, height: 1024 });
fabricCanvas.setZoom(10);

fabric.Image.fromURL('http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg', function (data) {
    var img = data.set({ left: 0, top: 0, width: 500, height: 500 });
    fabricCanvas.add(img);
    fabricCanvas.renderAll();
    var stream = fabric.util.getNodeCanvas(fabricCanvas.lowerCanvasEl).createPDFStream();
    // var stream = fabricCanvas.createPNGStream();
    stream.pipe(fs.createWriteStream('output.pdf'));
});

[asturur]

looks nice. i think we should document somewhere. Does it work good also with custom fonts?

[dungmv]

I am not test yet, I will test with custom fonts later

[hjchanna]

Does anyone have luck with the solution?

[morenogiudici]

@asturur I found the solution to export pdf, but the result is a image inside the pdf.

const fs = require('fs');
const fabric = require('fabric').fabric;
const { createCanvas } = require('canvas')
const utils = require('jsdom/lib/jsdom/living/generated/utils');

const mPDFcanvas = createCanvas(600, 800, 'pdf') // see "PDF Support" section

const el = fabric.document.createElement('canvas');
el[utils.implSymbol]._canvas = mPDFcanvas;
const fabricCanvas = new fabric.StaticCanvas(el, { width: 1024, height: 1024 });
fabricCanvas.setZoom(10);

fabric.Image.fromURL('http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg', function (data) {
    var img = data.set({ left: 0, top: 0, width: 500, height: 500 });
    fabricCanvas.add(img);
    fabricCanvas.renderAll();
    var stream = fabric.util.getNodeCanvas(fabricCanvas.lowerCanvasEl).createPDFStream();
    // var stream = fabricCanvas.createPNGStream();
    stream.pipe(fs.createWriteStream('output.pdf'));
});

This work, if you importsvg instead of insert the svg as image the pdf elements remains vector.

[asturur]

If you load it as an image YES. if you load as loadSVGfromURL or loadSVGfromString probably it won't be.

[asturur]

this is how i load it

const fs = require('fs');
const fabric = require('fabric').fabric;
const { createCanvas } = require('canvas')
const utils = require('jsdom/lib/jsdom/living/generated/utils');
const svg = fs.readFileSync(__dirname + '/file.svg', 'utf8');
const mPDFcanvas = createCanvas(800, 800, 'pdf') // see "PDF Support" section
const el = fabric.document.createElement('canvas');
el[utils.implSymbol]._canvas = mPDFcanvas;
const fabricCanvas = new fabric.StaticCanvas(el, { width: 800, height: 800 });

fabric.loadSVGFromString(svg, function (objects, options) {
    var svg = fabric.util.groupSVGElements(objects, options);
    fabricCanvas.add(svg);
    fabricCanvas.renderAll();
    var stream = fabric.util.getNodeCanvas(fabricCanvas.lowerCanvasEl).createPDFStream();
    // var stream = fabricCanvas.createPNGStream();
    stream.pipe(fs.createWriteStream('output.pdf'));
});

this is the PDF i get

output.pdf

[onlinecheckwriter-zz]

Hello,
We can do it in different way.
We can use puppeteer to convert canva page to pdf.

If you are laravel developer you can use : https://github.com/spatie/browsershot

[asturur]

But that will give you a raster PDF, that is what @morenogiudici was complaining about