Créer un PDF à partir de JT Gratuit

cette vidéo est sponsorisée par dev Mountain si vous êtes intéressé par l'apprentissage du développement web, iOS ou du design UX, dev Mountain est un boot camp de design et de développement de 12 semaines destiné à vous obtenir un poste à temps plein dans l'industrie. Pour en savoir plus, visitez devmountain.com ou cliquez sur le lien dans la description ci-dessous. Salut, qu'est-ce qui se passe les gars ? Dans ce projet, nous allons construire quelque chose de très pratique, quelque chose que beaucoup de gens m'ont demandé au fil des ans, et c'est comment charger un PDF dans une page web. Nous allons essentiellement non seulement charger le PDF, mais nous allons avoir une pagination en haut s'il s'agit d'un document multi-pages. Comme vous pouvez le voir, c'est la page 1 sur 5. Nous allons créer cette petite barre de navigation où nous pourrons simplement faire défiler les différentes pages du PDF. Donc, très utile, très pratique. Nous allons également faire en sorte que nous puissions afficher une erreur, par exemple, s'il ne peut pas charger le PDF. Je vais juste changer le chemin du fichier ici dans mon code et sauvegarder, et vous verrez qu'il nous donnera simplement l'erreur et nous dira qu'il manque le PDF. Maintenant, pour suivre, vous devez avoir votre code exécuté sur un type de serveur. J'utilise le serveur live de VS Code car cela ne fonctionnera pas si vous essayez simplement de charger cela dans un fichier. D'accord, maintenant nous allons utiliser quelque chose appelé PDF.js, qui est assez populaire, il a 25 000 étoiles sur GitHub et ceci est... voyons, en fait cela ne nous dit pas grand-chose, nous allons utiliser le CDN, nous n'allons pas l'installer avec NPM ou quoi que ce soit, nous allons garder cela très simple, quelque chose que vous pouvez intégrer dans presque n'importe quel projet que vous voulez. J'aime vraiment la syntaxe, c'est asynchrone, nous utilisons des promesses ou nous utiliserons, vous savez, du JavaScript moderne, donc je pense que vous allez apprécier cela et j'espère que vous pourrez trouver un endroit où vous pouvez l'utiliser. En ce qui concerne ce PDF que j'utilise, ce document 99/5, c'est juste un PDF d'exemple. Ce que j'ai fait, c'est que j'ai cherché un PDF d'exemple et c'est celui-ci juste ici. Donc, si vous voulez le télécharger, ce que j'ai fait ou ce que je vais faire, c'est juste le mettre dans un dossier Docs et ensuite nous allons créer notre script, notre HTML et un peu de CSS pour cette partie supérieure ici. D'accord, alors commençons. Je vais sauter dans VS Code et ce que je vais faire, c'est juste créer à l'intérieur d'un dossier vide appelé PDF viewer et je vais juste créer un dossier appelé Docs juste pour stocker mon PDF et je vais le faire glisser pour que ce soit le même échantillon que je vous ai montré et je l'ai juste appelé PDF.pdf. D'accord, mais vous pouvez l'appeler comme vous voulez. Ensuite, créons le reste de notre structure ici. Nous avons besoin d'un index.html et nous avons besoin de créer un dossier appelé CSS et que devons-nous d'autre ? Un dossier appelé js et à l'intérieur de js, nous allons créer un fichier appelé main.js et dans CSS, nous allons créer un fichier appelé style.css et cela devrait être bon pour notre structure. Donc, dans l'index.html, générons simplement un modèle avec Emmet et nous allons changer le titre en PDF viewer et quoi...