[6 Kategori] Pustaka alat pemprosesan fail bahagian hadapan yang praktikal, datang dan kumpulkannya!

Artikel ini akan mengatur dan berkongsi dengan anda beberapa perpustakaan alat praktikal yang berkaitan dengan pemprosesan fail bahagian hadapan Ia dibahagikan kepada 6 kategori dan diperkenalkan kepada anda satu persatu.

1 PDF

(1) PDF.js

PDF.js ialah pemapar Format Dokumen Mudah Alih (PDF) yang dibina menggunakan HTML5. Ia didorong oleh komuniti dan disokong oleh Mozilla, dengan matlamat untuk mencipta platform berasaskan standard web universal untuk menghurai dan memaparkan PDF.

Github (⭐️ 39.2k): https://github.com/mozilla/pdf.js

(2) jsPDF

jsPDF ialah perpustakaan sumber terbuka yang menggunakan bahasa JavaScript untuk menjana PDF Ia merupakan penyelesaian klien HTML5 yang terkemuka untuk menjana PDF.

Github (⭐️ 24.6k): https://github.com/parallax/jsPDF

(3 ) pdfmake

Pustaka penjanaan dokumen PDF untuk bahagian pelayan dan pelanggan dalam JavaScript tulen.

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

(4 ) pdf-lib

pdf-lib boleh mencipta dan mengubah suai dokumen PDF dalam mana-mana persekitaran JavaScript. Ia bertujuan untuk menyelesaikan masalah kekurangan sokongan kuat ekosistem JavaScript untuk operasi PDF (terutamanya pengubahsuaian PDF). Boleh digunakan dengan mana-mana masa jalan JavaScript moden seperti Node, Pelayar, Deno, React Native, dll.

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

(5) pdfkit

PDFKit ialah perpustakaan penjanaan dokumen PDF untuk Node dan penyemak imbas yang boleh mencipta dokumen boleh cetak berbilang halaman yang kompleks dengan mudah. API mengandungi kebolehpautan dan termasuk kefungsian peringkat rendah serta abstraksi kefungsian peringkat lebih tinggi. API PDFKit direka bentuk untuk ringkas, jadi menghasilkan dokumen yang kompleks selalunya memerlukan beberapa panggilan fungsi sahaja.

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

(6 ) react-pdf

react-pdf ialah pemapar React untuk mencipta fail PDF dalam penyemak imbas dan pelayan.

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

2. Gambar

(1) sharp

sharp ialah pustaka pemprosesan imej Node.js berprestasi tinggi yang melaraskan JPEG, PNG, WebP, AVIF dan Modul terpantas untuk saiz imej TIFF.

Github (⭐️ 22.7k): https://github.com/lovell/sharp

(2 )cropperjs

cropperjs ialah pemangkas imej JavaScript yang menyokong 29 pilihan pemangkasan, 27 kaedah, 6 acara, penskalaan, putaran, dsb.

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

(3 )tui.image-editor

tui.image-editor ialah editor imej berciri penuh menggunakan HTML5 Canvas. Ia mudah digunakan dan menawarkan penapis yang berkuasa.

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

(4)compressorjs

Pemampat imej JavaScript. Gunakan API canvas.toBlob asli penyemak imbas untuk melaksanakan kerja mampatan, iaitu mampatan hilang, mampatan tak segerak dan penyemak imbas berbeza mempunyai kesan mampatan yang berbeza . Ini biasanya digunakan untuk pra-memampatkan imej sebelum memuat naik pada klien.

Github (⭐️ 3.9k): https://github.com/fengyuanchen/compressorjs

(5)viewerjs

viewerjs ialah pemapar imej JavaScript yang menyokong 52 pilihan tontonan, 23 kaedah operasi, 17 acara, putaran, pergerakan, zum, dll.

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

(6 ) omaagesloaded

omagsloaded ialah perpustakaan JavaScript untuk menyemak apabila imej dimuatkan.

Github (⭐️ 8.7k): https://github.com/desandro/imagesloaded

3. Audio dan video

(1) video.js

Video.js ialah pemain video dalam talian yang dibina dari awal untuk dunia HTML5. Ia menyokong sambungan sumber video dan media HTML5, serta teknologi main balik lain seperti YouTube dan Vimeo (melalui pemalam). Ia menyokong main balik video pada desktop dan peranti mudah alih.

Github (⭐️ 8.7k): https://github.com/videojs/video.js

(2) plyr

Plyr ialah pemain media HTML5, YouTube dan Vimeo yang ringkas, ringan, boleh diakses dan boleh disesuaikan yang menyokong penyemak imbas moden.

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

(3 )MediaElement.js

MediaElement.js ialah pemain HTML5 <audio></audio> atau <video></video> yang menyokong MP4, WebM dan MP3 serta HLS, Dash, YouTube, Facebook, SoundCloud, dsb., dengan API HTML5 MediaElement universal untuk UI yang konsisten merentas semua penyemak imbas.

Github (⭐️ 7.9k): https://github.com/mediaelement/mediaelement

(4 )xgplayer

Xigua Player ialah perpustakaan kelas pemain video Web Ia mereka bentuk komponen UI yang bebas dan boleh ditanggalkan berdasarkan prinsip bahawa segala-galanya adalah komponen. Lebih penting lagi, ia bukan sahaja mempunyai prestasi fleksibel pada lapisan UI, tetapi juga membuat percubaan berani dalam fungsi: menyingkirkan pergantungan pada video untuk memuatkan video, penimbalan dan sokongan format. Khususnya, usaha hebat telah dilakukan pada mp4 atas permintaan, supaya mp4 yang tidak menyokong main balik penstriman boleh dimuatkan dalam segmen, yang bermaksud penukaran takrifan, kawalan pemuatan dan trafik video yang lancar boleh dicapai. Pada masa yang sama, ia juga menyepadukan sokongan atas permintaan dan siaran langsung untuk flv, hls dan dash.

Github (⭐️ 5.4k): https://github.com/bytedance/xgplayer

(5 )DPlayer

DPlayer ialah pemain video rentak HTML5 comel yang membantu orang ramai membina video dan benteng dengan mudah.

Github (⭐️ 12.9k): https://github.com/DIYgod/DPlayer

(6 ) Howler.js

howler.js ialah perpustakaan audio web moden. Ia lalai kepada API Audio Web dan kembali kepada Audio HTML5. Ini menjadikan kerja dengan audio dalam JavaScript mudah dan boleh dipercayai merentas semua platform.

Github (⭐️ 20.3k): https://github.com/goldfire/howler.js

4. Jadual

(1) Handsontable

Handsontable ialah komponen grid data JavaScript dengan penampilan hamparan. Berfungsi dengan React, Angular dan Vue. Ia menggabungkan fungsi grid data dengan UX seperti hamparan. Ia menyediakan pengikatan data, pengesahan data, penapisan, pengisihan, dan operasi CRUD.

Github (⭐️ 16.8k): https://github.com/handsontable/handsontable

(2 ) ag-grid

AG Grid ialah grid data JavaScript yang berciri penuh dan sangat boleh disesuaikan. Ia menawarkan prestasi yang hebat, tidak mempunyai kebergantungan pihak ketiga, dan disepadukan dengan lancar dengan semua rangka kerja JavaScript utama.

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

( 3) x-spreadsheet

x-spreadsheet ialah hamparan JavaScript (kanvas) berasaskan Web.

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

(4) cheetah-grid

cheetah-grid ialah jadual data sumber terbuka terpantas di Web.

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

(5)ExcelJS

ExcelJS ialah projek kejuruteraan terbalik fail hamparan Excel. Boleh membaca, memanipulasi dan menulis data dan gaya hamparan kepada fail XLSX dan JSON.

Github (⭐️ 9.7k): https://github.com/exceljs/exceljs

(6 )SheetJS

SheetJS ialah hamparan ringkas yang direka untuk membaca, mengedit dan mengeksport hamparan Ia berfungsi dengan penyemak imbas dan pelayan web dan dipercayai oleh Microsoft dalam Office 365.

Github (⭐️ 30.6k): https://github.com/SheetJS/sheetjs

5. File Uppy

(1) Uppy

Uppy ialah pemuat naik fail JavaScript modular yang bergaya yang disepadukan dengan lancar dengan mana-mana aplikasi. Ia pantas, mempunyai API yang mudah difahami dan membolehkan anda bimbang tentang perkara yang lebih penting daripada membina pemuat naik fail.

Github (⭐️ 25.5k): https://github.com/transloadit/uppy

(2 ) filepond

filepond ialah pustaka JavaScript untuk memuat naik fail, mengoptimumkan imej untuk muat naik yang lebih pantas dan menyediakan pengalaman pengguna yang hebat, boleh diakses dan selembut sutera.

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

(3 ) Dropzone

Dropzone ialah perpustakaan JavaScript yang boleh menukar mana-mana elemen HTML kepada dropzone. Ini bermakna pengguna boleh menyeret dan melepaskan fail ke atasnya dan Dropzone akan menunjukkan pratonton fail dan kemajuan muat naik, serta mengendalikan muat naik untuk anda melalui XHR.

Github (⭐️ 16.7k): https://github.com/dropzone/dropzone

(4 )vue-upload-component

vue-upload-component ialah komponen muat naik untuk Vue.js yang menyokong pelbagai muat naik fail, direktori muat naik, muat naik seret dan lepas, direktori seret dan lepas , dan menyokong Muat naik serentak berbilang fail dan banyak lagi.

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

(5) Muat Naik

Muat naik ialah pemuat naik imej JavaScript yang lebih baik. Ia sangat boleh disesuaikan dengan lebih 30 pemalam, percuma sepenuhnya dan sumber terbuka, dan boleh digunakan dengan mana-mana bahagian belakang muat naik fail.

Github (⭐️ 1.7k): https://github.com/elninotech/upload

(6 ) react-dropzone

react-dropzone ialah perpustakaan JavaScript yang disesuaikan untuk React dan berdasarkan API drop && drag HTML5 yang boleh melaksanakan muat naik drag-and-drop fail.

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

6. Lain-lain

(1) JSZip

JSZip ialah perpustakaan yang menggunakan JavaScript untuk mencipta, membaca dan mengedit fail .zip, dengan mudah API.

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

(2) docxtemplater

docxtemplater ialah perpustakaan yang menjana dokumen docx/pptx daripada templat docx/pptx. Ia boleh menggantikan {placeholders} dengan data dan juga menyokong gelung dan bersyarat.

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

(3) teks

tekstrak ialah modul node.js untuk mengekstrak data daripada html, pdf, doc, docx, xls, xlsx, csv, pptx, png, jpg, gif, rtf, dan lain-lain. Ekstrak teks daripada .

Github (⭐️ 1.5k): https://github.com/dbashford/texttract

(4 ) PptxGenJS

PptxGenJS ialah API JavaScript yang berkuasa dan ringkas untuk mencipta persembahan PowerPoint.

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

(5 ) officegen

officegen ialah fail Office Open XML yang berdiri sendiri (Microsoft Office 2007 dan ke atas) penjana untuk Word (docx), PowerPoint (pptx) dan Excell (xlsx) dalam JavaScript.

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

【Video Berkaitan Cadangan tutorial: bahagian hadapan web]