[6 Kategorien] Praktische Front-End-Dateiverarbeitungstool-Bibliothek, kommen Sie und holen Sie sie ab!

Dieser Artikel organisiert und teilt Ihnen mehrere praktische Toolbibliotheken im Zusammenhang mit der Front-End-Dateiverarbeitung. Sie sind in 6 Kategorien unterteilt und werden Ihnen nacheinander vorgestellt.

1. PDF

(1) PDF.js

PDF.js ist ein Portable Document Format (PDF)-Viewer, der mit HTML5 erstellt wurde. Es wird von der Community betrieben und von Mozilla unterstützt, mit dem Ziel, eine universelle, auf Webstandards basierende Plattform zum Parsen und Rendern von PDFs zu schaffen.

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

(2) jsPDF

jsPDF ist eine Open-Source-Bibliothek, die die JavaScript-Sprache zum Generieren von PDF verwendet . Eine führende HTML5-Clientlösung zum Generieren von PDFs.

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

(3) pdfmake

PDF-Dokumentgenerierungsbibliothek für Server- und Clientseite in reinem JavaScript .

Github (⭐️ 10.2k): https://github.com/bpampuch/pdfmake

(4) pdf-lib

pdf-lib kann PDFs in jedem JavaScript-Umgebungsdokument erstellen und ändern . Ziel ist es, das Problem der fehlenden starken Unterstützung des JavaScript-Ökosystems für PDF-Operationen (insbesondere PDF-Änderung) zu lösen. Kann mit jeder modernen JavaScript-Laufzeitumgebung wie Node, Browser, Deno, React Native usw. verwendet werden.

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

(5) pdfkit

PDFKit ist eine PDF-Dokumentgenerierungsbibliothek für Knoten und Browser, die erstellt Es ist einfach, komplexe mehrseitige druckbare Dokumente zu erstellen. APIs bieten Verknüpfbarkeit und umfassen Funktionen auf niedriger Ebene sowie Abstraktionen von Funktionen auf höherer Ebene. Die PDFKit-API ist auf Einfachheit ausgelegt, sodass für die Generierung komplexer Dokumente häufig nur wenige Funktionsaufrufe erforderlich sind.

Github (⭐️ 8.2k): https://github.com/foliojs/pdfkit

(6) React-PDF

React-PDF ist ein Tool zum Ausführen auf Browsern und Servern React Renderer zum Erstellen von PDF-Dateien.

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

2. Bilder

(1) Sharp

Sharp ist ein High-Performance-Gerät Node.js Bildverarbeitungsbibliothek, das schnellste Modul zur Größenänderung von JPEG-, PNG-, WebP-, AVIF- und TIFF-Bildern.

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

(2) cropperjs

cropperjs ist ein JavaScript-Bildbeschneider, der 29 Zuschneideoptionen, 27 Methoden unterstützt, 6 Ereignisse, Skalierung, Rotation usw.

Github (⭐️ 10.8k): https://github.com/fengyuanchen/cropperjs

(3) tui.image-editor

tui.image-editor ist ein Tool, das HTML5 verwendet Canvas Vollständiger Bildeditor. Es ist einfach zu bedienen und bietet leistungsstarke Filter.

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

(4)compressorjs

JavaScript-Bildkompressor. Verwenden Sie die native Canvas.toBlob-API des Browsers, um Komprimierungsarbeiten durchzuführen, nämlich verlustbehaftete Komprimierung, asynchroneKomprimierung, und verschiedene Browser haben unterschiedliche Komprimierungseffekte. Dies wird im Allgemeinen verwendet, um Bilder vor dem Hochladen auf den Client vorzukomprimieren.

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

(5)viewerjs

viewerjs ist ein JavaScript-Bildbetrachter, der 52 Anzeigeoptionen, 23 Betriebsmethoden, 17 Ereignisse, Drehung, Bewegung, Zoom usw. unterstützt.

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

(6) omaagesloaded

omagsloaded ist eine JavaScript-Bibliothek zur Überprüfung, wann Bilder geladen werden.

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

3. Audio und Video

(1) video.js

Video.js ist a Ein Webvideoplayer, der von Grund auf für die HTML5-Welt entwickelt wurde. Es unterstützt HTML5-Video- und Medienquellenerweiterungen sowie andere Wiedergabetechnologien wie YouTube und Vimeo (über Plugins). Es unterstützt die Videowiedergabe auf Desktop- und Mobilgeräten.

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

(2) plyr

Plyr ist ein einfaches, leichtes, zugängliches und benutzerdefiniertes HTML5, YouTube und Vimeo Media Player, der moderne Browser unterstützt.

Github (⭐️ 22.3k): https://github.com/sampotts/plyr

(3) MediaElement.js

MediaElement.js ist ein HTML5 <audio></audio> 或 <video></video> Player, der MP4 und WebM unterstützt und MP3 sowie HLS, Dash, YouTube, Facebook, SoundCloud usw. verfügen über eine gemeinsame HTML5-MediaElement-API für eine konsistente Benutzeroberfläche in allen Browsern.

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

(4) Alles ist mit unabhängigen und abnehmbaren UI-Komponenten basierend auf dem Komponentisierungsprinzip entworfen. Noch wichtiger ist, dass es nicht nur eine flexible Leistung auf der UI-Ebene bietet, sondern auch mutige Versuche in der Funktionalität unternimmt: die Abhängigkeit von Videos beim Laden, Puffern und Formatunterstützung von Videos beseitigen. Insbesondere wurden große Anstrengungen bei MP4 On-Demand unternommen, sodass MP4, das die Streaming-Wiedergabe nicht unterstützt, in Segmenten geladen werden kann, was bedeutet, dass ein nahtloser Wechsel von Definitionen, Ladekontrolle und Videoverkehr erreicht werden kann. Gleichzeitig integriert es auch On-Demand- und Live-Übertragungsunterstützung für FLV, HLS und Dash.

Github (⭐️ 5.4k):

https://github.com/bytedance/xgplayer

(5) DPlayer

DPlayer ist ein niedlicher HTML5-Barrage-Videoplayer, der Menschen beim Erstellen von Videos und Kommentaren hilft leicht.

Github (⭐️ 12.9k):

https://github.com/DIYgod/DPlayer

(6) Howler.js

howler.js ist eine moderne Web-Audiobibliothek. Standardmäßig wird die Web-Audio-API verwendet und auf HTML5-Audio zurückgegriffen. Dies macht die Arbeit mit Audio in JavaScript auf allen Plattformen einfach und zuverlässig. （Github (t️ 20.3K): https://github.com/goldfire/howler.js

4. Tabelle

(1) Handsontable

handsontable Eine geskinnte JavaScript-Datenrasterkomponente. Funktioniert mit React, Angular und Vue. Es kombiniert die Funktionalität eines Datenrasters mit einer tabellenähnlichen Benutzeroberfläche. Es bietet Datenbindung, Datenvalidierung, Filterung, Sortierung und CRUD-Operationen.

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

(2) ag-grid

AG Grid ist ein voll funktionsfähiges und hochgradig anpassbares JavaScript-Datenraster. Es bietet eine hervorragende Leistung, weist keine Abhängigkeiten von Drittanbietern auf und lässt sich reibungslos in alle wichtigen JavaScript-Frameworks integrieren.

Github (⭐️ 16.8k): https://github.com/ag-grid/ag-grid

(3)x-spreadsheet

x-spreadsheet ist ein webbasiertes JavaScript ( Leinwand) Tabellenkalkulation.

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

(4) cheetah-grid

cheetah-grid ist das schnellste Open-Source-Datenblatt auf das Web.

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

(5) ExcelJS

ExcelJS ist ein Reverse-Engineering-Projekt für Excel-Tabellendateien. Kann Tabellenkalkulationsdaten und -stile lesen, bearbeiten und in XLSX- und JSON-Dateien schreiben.

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

(6) SheetJS

SheetJS ist eine vereinfachte Tabellenkalkulation, die zum Lesen, Bearbeiten und Exportieren von Tabellenkalkulationen gedacht ist funktionieren mit Webbrowsern und Servern und werden von Microsoft in Office 365 als vertrauenswürdig eingestuft.

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

5. Datei-Upload

(1) Uppy

Uppy ist eine stilvolle Modul-JavaScript-Datei Uploader, der sich nahtlos in jede Anwendung integrieren lässt. Es ist schnell, verfügt über eine leicht verständliche API und ermöglicht es Ihnen, sich um wichtigere Dinge zu kümmern, als einen Datei-Uploader zu erstellen.

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

(2) filepond

filepond ist eine JavaScript-Bibliothek zum Hochladen von Dateien, die Bilder optimiert, um das Hochladen zu beschleunigen Geschwindigkeiten und bieten ein großartiges, zugängliches und seidenweiches Benutzererlebnis.

Github (⭐️ 12.6k): https://github.com/pqina/filepond

(3) Dropzone

Dropzone ist eine JavaScript-Bibliothek, die jedes HTML-Element in eine Dropzone konvertieren kann. Das bedeutet, dass Benutzer Dateien per Drag-and-Drop darauf ziehen können und Dropzone eine Dateivorschau und den Upload-Fortschritt anzeigt und den Upload über XHR für Sie übernimmt.

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

(4) vue-upload-component

vue-upload-component ist eine Komponente für Vue. Die js-Upload-Komponente unterstützt das Hochladen mehrerer Dateien, Verzeichnis-Uploads, Drag-and-Drop-Uploads und Drag-and-Drop-Verzeichnisse sowie das gleichzeitige Hochladen mehrerer Dateien.

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

(5) Upload

Uppload ist ein besseres JavaScript-Bild-Upload-Gerät. Es ist mit über 30 Plugins hochgradig anpassbar, völlig kostenlos und Open Source und kann mit jedem Datei-Upload-Backend verwendet werden.

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

(6) React-Dropzone

React-Dropzone ist eine maßgeschneiderte Version von React, basierend auf Bei der Drop && Drag-API von HTML5 handelt es sich um eine JavaScript-Bibliothek, die das Hochladen von Dateien per Drag-and-Drop implementieren kann.

Github (⭐️ 1,7k): https://github.com/react-dropzone/react-dropzone

6. Andere

(1) JSZip

JSZip ist eine Verwendung JavaScript-Bibliothek zum Erstellen, Lesen und Bearbeiten von ZIP-Dateien mit einer einfachen API.

Github (⭐️ 8.1k): https://github.com/Stuk/jszip

(2) docxtemplater

docxtemplater ist eine Bibliothek, die docx/pptx-Dokumente aus docx/pptx-Vorlagen generiert. Es kann {Platzhalter} durch Daten ersetzen und unterstützt auch Schleifen und Bedingungen.

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

(3) texttract

textract ist ein node.js-Modul zum Extrahieren von Daten aus Extrahieren Sie Text aus HTML, PDF, Doc, DocX, XLS, XLSX, CSV, PPTX, PNG, JPG, GIF, RTF usw.

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

(4) PptxGenJS

PptxGenJS ist eine leistungsstarke und übersichtliche JavaScript-API zum Erstellen von PowerPoint-Präsentationen.

Github (⭐️ 1.6k): https://github.com/gitbrent/PptxGenJS

(5)officegen

officegen ist eine JavaScript-Bibliothek für Word (docx), PowerPoint (pptx) ) und Excell (xlsx) eigenständiger Generator für Office Open XML-Dateien (Microsoft Office 2007 und höher).

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

【Empfehlung für entsprechende Video-Tutorials: Web-Frontend】