javascript - Issue with Importing Images from PHP to PDFKit in Browser - fs.readFileSync is not a function - Stack Overflow

admin管理员组

文章数量:1122846

I'm working with PDFKit in a browser environment and attempting to generate a PDF document with images fetched from a PHP backend. I am facing an issue when trying to load these images, which causes the error:

TypeError: fs.readFileSync is not a function

Here's what I am doing, I've tried many other option from the most simple from pdf kit documentation or other option but that didn't work for me.

Here is my code :

document.getElementById("generate-pdf").addEventListener("click", async function () {
    const doc = new PDFDocument({size: 'A4', margins: { top: 30, left: 30, right: 30, bottom: 80 }});
    const stream = doc.pipe(blobStream());

const wakaImageUrl = "<?= $page->waka_structure()->toFiles()->first()?->url() ?>"; const coverImageUrl = "<?= $page->images()->template('cover')->first()?->url() ?>";

const response = await fetch(wakaImageUrl);     
const wakaImageBuffer = await response.arrayBuffer();     
doc.image(wakaImageBuffer, 50, 50, { width: 200 });
…

doc.end();
    stream.on("finish", function () {
        const url = stream.toBlobURL("application/pdf");
        const a = document.createElement("a");
        a.href = url;
        a.download = "fiche_film.pdf";
        a.click();
    });
});

I also tried:

    const wakaImageResponse = await fetch("<?= $page->waka_structure()->toFiles()->first()?->url() ?>");
    const wakaImageBlob = await wakaImageResponse.blob();
    const wakaImageURL = URL.createObjectURL(wakaImageBlob);

    const coverImageResponse = await fetch("<?= $page->images()->template('cover')->first()?->url() ?>");
    const coverImageBlob = await coverImageResponse.blob();
    const coverImageURL = URL.createObjectURL(coverImageBlob);
    
    doc.image(wakaImageURL, 50, 50, { width: 200 });
    doc.image(coverImageURL, 100, 200, { fit: [400, 300], align: 'center', valign: 'top' });

How can I properly import these images into PDFKit for generating dynamically the images in the PDF it's the last step to my project and I admit that I'm quite lost at the moment ? Sorry if it's a dumb question but haven't found any answer that work for me

I'm working with PDFKit in a browser environment and attempting to generate a PDF document with images fetched from a PHP backend. I am facing an issue when trying to load these images, which causes the error:

TypeError: fs.readFileSync is not a function

Here's what I am doing, I've tried many other option from the most simple from pdf kit documentation or other option but that didn't work for me.

Here is my code :

document.getElementById("generate-pdf").addEventListener("click", async function () {
    const doc = new PDFDocument({size: 'A4', margins: { top: 30, left: 30, right: 30, bottom: 80 }});
    const stream = doc.pipe(blobStream());

const wakaImageUrl = "<?= $page->waka_structure()->toFiles()->first()?->url() ?>"; const coverImageUrl = "<?= $page->images()->template('cover')->first()?->url() ?>";

const response = await fetch(wakaImageUrl);     
const wakaImageBuffer = await response.arrayBuffer();     
doc.image(wakaImageBuffer, 50, 50, { width: 200 });
…

doc.end();
    stream.on("finish", function () {
        const url = stream.toBlobURL("application/pdf");
        const a = document.createElement("a");
        a.href = url;
        a.download = "fiche_film.pdf";
        a.click();
    });
});

I also tried:

    const wakaImageResponse = await fetch("<?= $page->waka_structure()->toFiles()->first()?->url() ?>");
    const wakaImageBlob = await wakaImageResponse.blob();
    const wakaImageURL = URL.createObjectURL(wakaImageBlob);

    const coverImageResponse = await fetch("<?= $page->images()->template('cover')->first()?->url() ?>");
    const coverImageBlob = await coverImageResponse.blob();
    const coverImageURL = URL.createObjectURL(coverImageBlob);
    
    doc.image(wakaImageURL, 50, 50, { width: 200 });
    doc.image(coverImageURL, 100, 200, { fit: [400, 300], align: 'center', valign: 'top' });

How can I properly import these images into PDFKit for generating dynamically the images in the PDF it's the last step to my project and I admit that I'm quite lost at the moment ? Sorry if it's a dumb question but haven't found any answer that work for me

• javascript
• php
• node-pdfkit
• kirby

Share Improve this question Follow edited Dec 22, 2024 at 4:37 K J 11.6k44 gold badges2323 silver badges6060 bronze badges asked Nov 23, 2024 at 4:55 cddwmplcddwmpl 11

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

By far the simplest way to test web apps like js.PDF or node-PDFkit etc.

Is via their online demonstrators so here is the PDFKit one:
https://pdfkit.org/demo/browser.html

Where you can try images out. Here I am using a see through PNG.

本文标签：