Export ZIM Frame as doc or PDF

Requests
1

Any function or module that help to export canvas to pdf or any formate?

2

Hi @JatinKumawat - I can't remember if we had some answers for this... @amihanya @VishwasGagrani anyone else?

3

I use jspdf, convert the canvas to image blob and add it to the pdf doc

1 Like
4

@amihanya can you share an example. When I use jsPDF along with ZIM I get an error.

5

I figured out a way to use the datauri to create a pdf instead of the blob.

            const doc = new jsPDF();

            // 1. Add your Character Content
            doc.setFont("helvetica", "bold");
            doc.text(`Character Sheet: ${G.character.name}`, 20, 20);
            
            doc.setFont("helvetica", "normal");
            doc.text(`Might: ${G.character.might}`, 20, 40);
            doc.text(`Wits:   ${G.character.wits}`, 20, 50);
            doc.text(`Vigor:  ${G.character.vigor}`, 20, 60);
            doc.text(`Guile:  ${G.character.guile}`, 20, 70);

            // 2. THE BYPASS: Generate a Data URI instead of a Blob
            // 'datauristring' returns the PDF as a base64 encoded string
            const dataUri = doc.output('datauristring');

            // 3. Trigger the Download
            const link = document.createElement('a');
            link.href = dataUri;
            link.download = `${G.character.name}_SSA.pdf`;
            
            // Append and click
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            
            zog("PDF generated via Base64 bypass.");
6 
// 1) Create a ZIM Frame (canvas)
var frame = new zim.Frame("holder1", 2755, 3783);

frame.on("ready", function() {
    var stage = frame.stage;

    // Draw something simple on the canvas
    new zim.Rectangle({width: 500, height: 200, color: "lightblue"})
        .addTo(stage).loc(200, 200);

    new zim.Label({text: "Hello PDF!", size: 60, color: "black"})
        .addTo(stage).loc(200, 300);

    stage.update();

    // 2) Export the canvas as PNG data
    var imgData = frame.canvas.toDataURL("image/png", 1.0);

    // Compute page size in millimeters based on DPI
    var DPI = 300;
    var pageWmm = (frame.width  / DPI) * 25.4;
    var pageHmm = (frame.height / DPI) * 25.4;

    // Create a jsPDF document with the exact canvas size
    var pdf = new jsPDF({
        orientation: "p",
        unit: "mm",
        format: [pageWmm, pageHmm],
        compress: true
    });

    // Add the canvas image as a full-page PNG
    pdf.addImage(imgData, "PNG", 0, 0, pageWmm, pageHmm, undefined, "SLOW");

    // 3) Save / download the PDF
    var blob = pdf.output("blob");
    download(blob, "my_pdf_example.pdf", "application/pdf");
});
7

Where does this function look like?

download(blob, "my_pdf_example.pdf", "application/pdf");
8

To avoid a JS Blob conflict which happens sometimes with things like this you can start ZIM with:

<script>zns=true</script>

then do your import. And in the Frame ready function use:

zimplify("Blob");

you will have all ZIM as globals except Blob. That will probably fix the error. And if you need to use ZIM Blob then use the zi m.Blob