[Résolu] Import une library javascript par Kikito_o_o - page 1

21 septembre 2022 à 11:36:51

Bonjour,

Pour un projet web, je dois manipuler un pdf, j'ai trouvé la library javascript "pdf-lib" qui peut faire ce que je veux.

Cependant je n'arrive pas à la fois à import pdf-lib et en même temps utiliser une fonction créée en utilisant pdf-lib. Je vais montrer le code pour être plus claire.

<html>

<script type="module" src="pdfManager.js"></script>


<script type="text/javascript" src="drawcan.js"></script>


<body onload="init()">
    <canvas id="can" width="400" height="400" style="position:absolute;top:10%;left:10%;border:2px solid;"></canvas>
    <img id="canvasimg" style="position:absolute;top:10%;left:52%;" style="display:none;">
    <input type="button" value="save" id="btn" size="30" onclick="createPdf()" style="position:absolute;top:55%;left:10%;">
    <input type="button" value="clear" id="clr" size="23" onclick="erase()" style="position:absolute;top:55%;left:15%;">
</body>
</html>

Le fichier drawcan.js , permet de dessiner et fonctionne bien (la fonction erase() et init() viennent de se fichier).

Le problème vient de la fonction createPdf() qui est dans le fichier pdfManager.js :

import { PDFDocument, StandardFonts, rgb } from 'pdf-lib'

async function createPdf() {
    const pdfDoc = await PDFDocument.create()    
const timesRomanFont = await pdfDoc.embedFont(StandardFonts.TimesRoman)
    const page = pdfDoc.addPage()
    const { width, height } = page.getSize()
    const fontSize = 30
    page.drawText('Creating PDFs in JavaScript is awesome!', {
        x: 50,
        y: height - 4 * fontSize,
        size: fontSize,
        font: timesRomanFont,
        color: rgb(0, 0.53, 0.71),
    })
    const pdfBytes = await pdfDoc.save()
}

Et pour import pdf-lib que j'ai installé (je sais pas si je l'ai fait de la bonne façon) avec "npm install --save pdf-lib" comme expliqué sur leur site. J'ai essayé d'import en mettant le chemin, avec ".js" à la fin et je n'ai jamais réussi a faire fonctionner la fonction createPdf(), j'ai toujours des messages d'erreur quoi que j'essaye.

Je ne sais pas si j'ai mal fait quelque chose car n'ayant pas beaucoup utiliser javascript.

Merci d'avance pour votre aide.

Bonne journée.

-
Edité par Kikito_o_o 21 septembre 2022 à 14:07:16

ninjavascript

21 septembre 2022 à 15:05:18

Si tu veux utiliser la bibliothèque dans l'environnement navigateur, tu ne peux pas l'importer de cette façon :

import { … } from 'pdf-lib'; ❌

Cela ne fonctionne que dans un environnement Node.js

Apparemment la bibliothèque "pdf-lib" semble compatible aussi côté navigateur, mais il faut l'utiliser de façon plus classique en l'injectant dans le HTML :

<script src="https://unpkg.com/pdf-lib@1.4.0"></script>

… et dans un fichier JS (qui ne doit pas être de type module du coup!), on utilise simplement les fonctions de la bibliothèque :

const { PDFDocument, StandardFonts, rgb } = PDFLib;

// … etc

-
Edité par ninjavascript 21 septembre 2022 à 15:06:29

Kikito_o_o

21 septembre 2022 à 16:00:52

Merci de ta réponse,

cependant je n'arrive toujours pas à utliser la fonction createPdf(), j'ai essayer quelque chose comme cela:

<html>
<script type="text/javascript" src="https://unpkg.com/pdf-lib@1.4.0">
async function createPdf() {
    const pdfDoc = await PDFDocument.create()
    const timesRomanFont = await pdfDoc.embedFont(StandardFonts.TimesRoman)

    const page = pdfDoc.addPage()
    const { width, height } = page.getSize()
    const fontSize = 30
    page.drawText('Creating PDFs in JavaScript is awesome!', {
        x: 50,
        y: height - 4 * fontSize,
        size: fontSize,
        font: timesRomanFont,
        color: rgb(0, 0.53, 0.71),
    })
    const pdfBytes = await pdfDoc.save()
}
</script>


<script type="text/javascript" src="drawcan.js">

</script>


<body onload="init()">
    <canvas id="can" width="400" height="400" style="position:absolute;top:10%;left:10%;border:2px solid;"></canvas>
    <img id="canvasimg" style="position:absolute;top:10%;left:52%;" style="display:none;">
    <input type="button" value="save" id="btn" size="30" onclick="createPdf()" style="position:absolute;top:55%;left:10%;">
    <input type="button" value="clear" id="clr" size="23" onclick="erase()" style="position:absolute;top:55%;left:15%;">
</body>
</html>

Mais il retourne l'erreur "testpdf.php:37 Uncaught ReferenceError: createPdf is not defined at HTMLInputElement.onclick".

Comment doit-je déclarer ma fonction ?

Merci

-
Edité par Kikito_o_o 21 septembre 2022 à 16:43:22

zvheer

21 septembre 2022 à 18:05:11

Bonjour je ne me suis pas intéressé à la l'import du module en question je le ferai après si toujours pas de solution mais descendre tes script js dans le body serait un bon début

ensuite je doute que sans environnement node js ce module puisse créer quoique ce soit dans un projet js classoque, le javascript dans ce contexte étant purement côté client

ou peut être faut il le mettre en relation avec un service back end une lecture de la doc me le dira

-
Edité par zvheer 21 septembre 2022 à 18:06:57

yasakani no magatama

Kikito_o_o

22 septembre 2022 à 10:08:49

Bonjour, merci de ta réponse.

J'esperai pouvoir faire ce projet sans Node.js , je vais me renseigner la dessus.

Cependant, pourquoi l'import du module de t'interresse pas, est ce que je pourrais tester pour voir si ca fonctionne quand même ?

Merci

ninjavascript

24 septembre 2022 à 23:12:39

ensuite je doute que sans environnement node js ce module puisse créer quoique ce soit dans un projet js classoque, le javascript dans ce contexte étant purement côté client

ou peut être faut il le mettre en relation avec un service back end une lecture de la doc me le dira

Justement, extrait de la documentation :

pdf-lib

Create and modify PDF documents in any JavaScript environment.

Designed to work in any modern JavaScript runtime. Tested in Node, Browser, Deno, and React Native environments.

Ca veut dire ce que ça veut dire.

Sinon il ya plusieurs problèmes dans ton code, déjà le premier :

<script src="https://unpkg.com/pdf-lib@1.4.0"> ❌❌❌
    async function createPdf() {
        …
    }
</script>

Non ! Impossible que cela fonctionne ! La bibliothèque et ton script doivent être chargés indépendamment dans deux balises <script> distinctes :

<!-- 1. Chargement de la bibliothèque --> ✅✅✅
<script src="https://unpkg.com/pdf-lib@1.4.0"></script>

<!-- 2. Scope de ton script -->
<script>
    async function createPdf() {
        …
    }
</script>

Idem ici, pas d'espaces entre les balises <script> :

<script type="text/javascript" src="drawcan.js"> ❌❌❌
    
</script>

<script type="text/javascript" src="drawcan.js"></script> ✅✅✅

En corrigeant cela il y a plus de chances que cela fonctionne. Mais je te recommanderai également de ne plus utiliser les attributs d'événements type "onload", "onclick" ... etc et de privilégier les event listeners. Exemple :

<input type="button" id="btn" onclick="createPdf()"> ❌❌❌
    
    
<input type="button" id="btn">

Et le script JS associé :

const createButton = document.getElementById('btn');
createButton.addEventListener('click', createPdf);

-
Edité par ninjavascript 24 septembre 2022 à 23:18:18

Kikito_o_o

26 septembre 2022 à 11:58:30

Très bien merci pour vos réponses.

Bonne journée.

Import une library javascript

pdf-lib

Supprimer

Modérer

Signaler le message aux modérateurs