[6 Catégories] Une bibliothèque d'outils pratiques de traitement de fichiers frontaux, venez les récupérer !

Cet article organisera et partagera avec vous plusieurs bibliothèques d'outils pratiques liées au traitement de fichiers front-end. Elles sont divisées en 6 catégories et vous seront présentées une par une. J'espère qu'elles seront utiles à tout le monde.

1. PDF

(1) PDF.js

PDF.js est une visionneuse au format PDF (Portable Document Format) construite en utilisant HTML5. Il est piloté par la communauté et soutenu par Mozilla, dans le but de créer une plate-forme universelle basée sur des normes Web pour l'analyse et le rendu des PDF.

Github (⭐️ 39,2k) : https://github.com/mozilla/pdf.js

(2) jsPDF

jsPDF est une bibliothèque open source qui utilise le langage JavaScript pour générer des PDF . Une solution client HTML5 leader pour la génération de PDF.

Github (⭐️ 24,6k) : https://github.com/parallax/jsPDF

(3) pdfmake

Bibliothèque de génération de documents PDF pour côté serveur et côté client en JavaScript pur .

Github (⭐️ 10,2k) : https://github.com/bpampuch/pdfmake

(4) pdf-lib

pdf-lib peut créer et modifier des PDF dans n'importe quel document d'environnement JavaScript . Il vise à résoudre le problème du manque de support solide de l'écosystème JavaScript pour les opérations PDF (en particulier la modification de PDF). Peut être utilisé avec n'importe quel environnement d'exécution JavaScript moderne tel que Node, Browser, Deno, React Native, etc.

Github (⭐️ 4,1k) : https://github.com/Hopding/pdf-lib

(5) pdfkit

PDFKit est une génération de documents PDF pour la bibliothèque Node et les navigateurs qui permet il est facile de créer des documents imprimables complexes de plusieurs pages. Les API contiennent des liens et incluent des fonctionnalités de bas niveau ainsi que des abstractions de fonctionnalités de niveau supérieur. L'API PDFKit est conçue pour être simple, donc la génération de documents complexes ne nécessite souvent que quelques appels de fonction.

Github (⭐️ 8,2k) : https://github.com/foliojs/pdfkit

(6) React-pdf

react-pdf est un outil pour fonctionner sur les navigateurs et les serveurs React moteur de rendu pour créer des fichiers PDF.

Github (⭐️ 10,9k) : https://github.com/diegomura/react-pdf

2. Pictures

(1) Sharp

sharp est un outil haute performance. Bibliothèque de traitement d'images Node.js, le module le plus rapide pour redimensionner les images JPEG, PNG, WebP, AVIF et TIFF.

Github (⭐️ 22,7k) : https://github.com/lovell/sharp

(2)cropperjs

cropperjs est un recadrage d'image JavaScript qui prend en charge 29 options de recadrage, 27 méthodes, 6 événements, mise à l'échelle, rotation, etc.

Github (⭐️ 10,8k) : https://github.com/fengyuanchen/cropperjs

(3) tui.image-editor

tui.image-editor est un outil qui utilise HTML5 Canvas Éditeur d'images complet. Il est facile à utiliser et propose des filtres puissants.

Github (⭐️ 5,2k) : https://github.com/nhn/tui.image-editor

(4)compressorjs

Compresseur d'image JavaScript. Utilisez l'API native canvas.toBlob du navigateur pour effectuer un travail de compression, à savoir compression avec perte, asynchronecompression, et différents navigateurs ont différents effets de compression. Ceci est généralement utilisé pour précompresser les images avant de les télécharger sur le client.

Github (⭐️ 3,9k) : https://github.com/fengyuanchen/compressorjs

(5)viewerjs

viewerjs est une visionneuse d'images JavaScript qui prend en charge 52 options d'affichage, 23 méthodes de fonctionnement, 17 événements, rotation, déplacement, zoom, etc.

Github (⭐️ 6,6k) : https://github.com/fengyuanchen/viewerjs

(6) omaagesloaded

omagsloaded est une bibliothèque JavaScript permettant de vérifier quand les images sont chargées.

Github (⭐️ 8,7k) : https://github.com/desandro/imagesloaded

3 Audio et vidéo

(1) video.js

Video.js est. a Un lecteur vidéo Web entièrement conçu pour le monde HTML5. Il prend en charge les extensions de sources vidéo et multimédia HTML5, ainsi que d'autres technologies de lecture telles que YouTube et Vimeo (via des plugins). Il prend en charge la lecture vidéo sur les ordinateurs de bureau et les appareils mobiles.

Github (⭐️ 8,7k) : https://github.com/videojs/video.js

(2) plyr

Plyr est un HTML5 simple, léger, accessible et personnalisé, YouTube et lecteur multimédia Vimeo prenant en charge les navigateurs modernes.

Github (⭐️ 22,3k) : https://github.com/sampotts/plyr

(3) MediaElement.js

MediaElement.js est un lecteur HTML5 <audio></audio> 或 <video></video> qui prend en charge MP4, WebM et MP3, ainsi que HLS, Dash, YouTube, Facebook, SoundCloud, etc., disposent d'une API HTML5 MediaElement commune pour une interface utilisateur cohérente sur tous les navigateurs.

Github (⭐️ 7,9k) : https://github.com/mediaelement/mediaelement

(4) Tout est conçu avec des composants d'interface utilisateur indépendants et détachables basés sur le principe de composantisation. Plus important encore, il offre non seulement des performances flexibles au niveau de la couche d'interface utilisateur, mais fait également des tentatives audacieuses en termes de fonctionnalités : se débarrasser de la dépendance à l'égard de la vidéo pour le chargement, la mise en mémoire tampon et la prise en charge du format vidéo. En particulier, de gros efforts ont été déployés sur le mp4 à la demande, afin que le mp4 qui ne prend pas en charge la lecture en streaming puisse être chargé par segments, ce qui signifie qu'une commutation transparente des définitions, du contrôle de chargement et du trafic vidéo peut être obtenue. Dans le même temps, il intègre également la prise en charge de la diffusion à la demande et en direct pour flv, hls et dash.

Github (⭐️ 5,4k) :

https://github.com/bytedance/xgplayer

(5) DPlayer

DPlayer est un joli lecteur vidéo de barrage HTML5 qui aide les gens à créer des vidéos et des commentaires facilement.

Github (⭐️ 12,9k) :

https://github.com/DIYgod/DPlayer

(6) Howler.js

howler.js est une bibliothèque audio Web moderne. Il utilise par défaut l'API Web Audio et revient à HTML5 Audio. Cela rend le travail avec l'audio en JavaScript facile et fiable sur toutes les plateformes. （Github (t️ 20,3K) : https://github.com/goldfire/howler.js

4. Tableau

(1) Handsontable

handsontable Un composant de grille de données JavaScript skinné. Fonctionne avec React, Angular et Vue. Il combine la fonctionnalité de grille de données avec une UX de type feuille de calcul. Il fournit des opérations de liaison de données, de validation de données, de filtrage, de tri et CRUD.

Github (⭐️ 16,8k) : https://github.com/handsontable/handsontable

(2) ag-grid

AG Grid est une grille de données JavaScript entièrement fonctionnelle et hautement personnalisable. Il offre d'excellentes performances, n'a aucune dépendance tierce et s'intègre parfaitement à tous les principaux frameworks JavaScript.

Github (⭐️ 16,8k) : https://github.com/ag-grid/ag-grid

(3)x-spreadsheet

x-spreadsheet est un JavaScript basé sur le Web ( toile) feuille de calcul.

Github (⭐️ 12,6k) : https://github.com/myliang/x-spreadsheet

(4) cheetah-grid

cheetah-grid est la feuille de données open source la plus rapide sur le Web.

Github (⭐️ 1,2k) : https://github.com/future-architect/cheetah-grid

(5) ExcelJS

ExcelJS est un projet d'ingénierie inverse de fichier de feuille de calcul Excel. Peut lire, manipuler et écrire des données et des styles de feuilles de calcul dans des fichiers XLSX et JSON.

Github (⭐️ 9,7k) : https://github.com/exceljs/exceljs

(6) SheetJS

SheetJS est une feuille de calcul simplifiée, destinée à la lecture, à l'édition et à l'exportation de feuilles de calcul qui fonctionnent avec les navigateurs et les serveurs Web et sont approuvés par Microsoft dans Office 365.

Github (⭐️ 30,6k) : https://github.com/SheetJS/sheetjs

5. Téléchargement de fichiers

(1) Uppy

Uppy est un fichier JavaScript de module élégant. téléchargeur qui s'intègre parfaitement à n'importe quelle application. Il est rapide, possède une API facile à comprendre et vous permet de vous soucier de choses plus importantes que la création d'un outil de téléchargement de fichiers.

Github (⭐️ 25,5k) : https://github.com/transloadit/uppy

(2) filepond

filepond est une bibliothèque JavaScript pour télécharger des fichiers, optimisant les images pour accélérer le téléchargement vitesses et offre une expérience utilisateur exceptionnelle, accessible et fluide.

Github (⭐️ 12,6k) : https://github.com/pqina/filepond

(3) Dropzone

Dropzone est une bibliothèque JavaScript qui peut convertir n'importe quel élément HTML en dropzone. Cela signifie que les utilisateurs peuvent y glisser et déposer des fichiers et Dropzone affichera les aperçus des fichiers et la progression du téléchargement, et gérera le téléchargement pour vous via XHR.

Github (⭐️ 16,7k) : https://github.com/dropzone/dropzone

(4) vue-upload-component

vue-upload-component est un composant pour Vue. Le composant de téléchargement js prend en charge plusieurs téléchargements de fichiers, les téléchargements de répertoires, les téléchargements par glisser-déposer, les répertoires par glisser-déposer et prend en charge le téléchargement de plusieurs fichiers en même temps.

Github (⭐️ 2,5k) : https://github.com/lian-yue/vue-upload-component

(5) Uppload

Uppload est un meilleur dispositif de téléchargement d'images JavaScript. Il est hautement personnalisable avec plus de 30 plugins, entièrement gratuits et open source, et peut être utilisé avec n'importe quel backend de téléchargement de fichiers.

Github (⭐️ 1,7k) : https://github.com/elninotech/uppload

(6) react-dropzone

react-dropzone est une version personnalisée de React, basée sur l'API drop && drag de HTML5 est une bibliothèque JavaScript qui peut implémenter le téléchargement de fichiers par glisser-déposer.

github (⭐️ 1.7k): https://github.com/react-dropzone/react-dropzone

6. Bibliothèque JavaScript pour créer, lire et éditer des fichiers .zip, avec une API simple.

Github (⭐️ 8,1k) : https://github.com/Stuk/jszip

(2) docxtemplater

docxtemplater est une bibliothèque qui génère des documents docx/pptx à partir de modèles docx/pptx. Il peut remplacer les {placeholders} par des données et prend également en charge les boucles et les conditions.

Github (⭐️ 2,2k) : https://github.com/open-xml-templating/docxtemplater

(3) texttract

texttract est un module node.js pour extraire des données de Extrayez le texte de html, pdf, doc, docx, xls, xlsx, csv, pptx, png, jpg, gif, rtf, etc.

Github (⭐️ 1,5k) : https://github.com/dbashford/texttract

(4) PptxGenJS

PptxGenJS est une API JavaScript puissante et concise pour créer des présentations PowerPoint.

Github (⭐️ 1,6k) : https://github.com/gitbrent/PptxGenJS

(5)officegen

officegen est une bibliothèque JavaScript pour Word (docx), PowerPoint (pptx) ) et générateur autonome Excell (xlsx) pour les fichiers Office Open XML (Microsoft Office 2007 et versions ultérieures).

Github (⭐️ 2,4k) : https://github.com/Ziv-Barber/officegen

【Recommandation de didacticiel vidéo connexe : front-end web】