[6 Categories] Practical front-end file processing tool library, come and collect it!

This article will organize and share with you several practical tool libraries related to front-end file processing. They are divided into 6 categories and introduced to you one by one. I hope it will be helpful to everyone.

1. PDF

(1)PDF.js

PDF.js is a Portable Document Format (PDF) viewer built with HTML5. It is community-driven and supported by Mozilla, with the goal of creating a universal, web standards-based platform for parsing and rendering PDFs.

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

(2) jsPDF

jsPDF is an open source library that uses JavaScript language to generate PDF. It is a leading HTML5 client solution for generating PDF.

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

(3 ) pdfmake

PDF document generation library for server-side and client-side in pure JavaScript.

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

(4 )pdf-lib

pdf-lib can create and modify PDF documents in any JavaScript environment. It aims to solve the problem of the JavaScript ecosystem's lack of strong support for PDF operations (especially PDF modification). Can be used with any modern JavaScript runtime such as Node, Browser, Deno, React Native, etc.

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

(5) pdfkit

PDFKit is a PDF document generation library for Node and browsers that can easily create complex multi-page printable documents. APIs contain linkability and include low-level functionality as well as abstractions of higher-level functionality. The PDFKit API is designed to be simple, so generating complex documents often requires only a few function calls.

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

(6 ) react-pdf

react-pdf is a React renderer for creating PDF files on browsers and servers.

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

2. Picture

(1) sharp

#sharp is a high-performance Node.js image processing library that adjusts JPEG, PNG, WebP, AVIF and Fastest module for TIFF image sizes.

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

(2 )cropperjs

cropperjs is a JavaScript image cropper that supports 29 cropping options, 27 methods, 6 events, scaling, rotation, etc.

Github（⭐️ 10.8k）： https://github.com/fengyuanchen/cropperjs

（3 )tui.image-editor

tui.image-editor is a full-featured image editor using HTML5 Canvas. It's easy to use and offers powerful filters.

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

(4)compressorjs

JavaScript image compressor. Use the browser's native canvas.toBlob API to perform compression work, that is, lossy compression, asynchronouscompression, which has different compression effects in different browsers . This is generally used to pre-compress images before uploading on the client.

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

(5)viewerjs

viewerjs is a JavaScript image viewer that supports 52 viewing options, 23 operation methods, 17 events, rotation, movement, zoom, etc.

Github（⭐️ 6.6k）： https://github.com/fengyuanchen/viewerjs

（6 )omaagesloaded

omaagesloaded is a JavaScript library for checking when an image has been loaded.

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

3. Audio and video

(1) video.js

Video.js is an online video player built from scratch for the HTML5 world. It supports HTML5 video and media source extensions, as well as other playback technologies such as YouTube and Vimeo (via plugins). It supports video playback on desktop and mobile devices.

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

(2) plyr

Plyr is a simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports modern browsers.

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

(3 )MediaElement.js

MediaElement.js is an HTML5 <audio></audio> or <video></video> player that supports MP4, WebM and MP3 and HLS, Dash, YouTube, Facebook, SoundCloud, and more, with a common HTML5 MediaElement API for consistent UI across all browsers.

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

(4 ) xgplayer

Xigua Player is a Web video player class library. It designs independent and detachable UI components based on the principle that everything is componentized. More importantly, it not only has flexible performance at the UI layer, but also makes bold attempts in functionality: getting rid of the dependence on video for video loading, buffering, and format support. In particular, great efforts have been made on mp4 on-demand, so that mp4 that does not support streaming playback can be loaded in segments, which means that seamless switching of definitions, loading control, and video traffic can be achieved. At the same time, it also integrates on-demand and live broadcast support for flv, hls, and dash.

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

(5 ) DPlayer

DPlayer is a cute HTML5 barrage video player that helps people easily build videos and barrages.

Github（⭐️ 12.9k）： https://github.com/DIYgod/DPlayer

（6 ) Howler.js

howler.js is a modern web audio library. It defaults to the Web Audio API and falls back to HTML5 Audio. This makes working with audio in JavaScript easy and reliable across all platforms.

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

4. Table

(1) Handsontable

Handsontable is a JavaScript data grid component with a spreadsheet appearance. Works with React, Angular and Vue. It combines data grid functionality with a spreadsheet-like UX. It provides data binding, data validation, filtering, sorting, and CRUD operations.

Github（⭐️ 16.8k）： https://github.com/handsontable/handsontable

（2 ) ag-grid

AG Grid is a full-featured and highly customizable JavaScript data grid. It offers excellent performance, has no third-party dependencies, and integrates smoothly with all major JavaScript frameworks.

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

（ 3) x-spreadsheet

x-spreadsheet is a Web-based JavaScript (canvas) spreadsheet.

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

(4) cheetah-grid

cheetah-grid is the fastest Web open source data table.

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

(5)ExcelJS

ExcelJS is an Excel spreadsheet file reverse engineering project. Can read, manipulate, and write spreadsheet data and styles to XLSX and JSON files.

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

(6 )SheetJS

SheetJS is a simplified spreadsheet designed to read, edit, and export spreadsheets. It works with web browsers and servers and is trusted by Microsoft in Office 365.

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

5. File Upload

(1)Uppy

Uppy is a stylish modular JavaScript file uploader that integrates seamlessly with any application. It's fast, has an easy-to-understand API, and lets you worry about more important things than building a file uploader.

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

(2 ) filepond

filepond is a JavaScript library for uploading files, optimizing images for faster uploads and providing a great, accessible, silky-smooth user experience.

Github（⭐️ 12.6k）： https://github.com/pqina/filepond

（3 )Dropzone

Dropzone is a JavaScript library that can convert any HTML element into a dropzone. This means users can drag and drop files onto it and Dropzone will show file previews and upload progress, and handle the upload for you via XHR.

Github（⭐️ 16.7k）： https://github.com/dropzone/dropzone

（4 ) vue-upload-component

vue-upload-component is an upload component for Vue.js that supports multiple file uploads, upload directories, drag-and-drop uploads, drag-and-drop directories, and supports simultaneous Upload multiple files and more.

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

(5)Uppload

Uppload is a better JavaScript image uploader. It's highly customizable with over 30 plugins, completely free and open source, and can be used with any file upload backend.

Github（⭐️ 1.7k）： https://github.com/elninotech/uppload

（6 ) react-dropzone

react-dropzone is a JavaScript library tailored for React and based on the HTML5 drop && drag API that can implement drag-and-drop uploading of files.

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

6. Others

(1) JSZip

JSZip is a library that uses JavaScript to create, read and edit .zip files, with a simple API.

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

(2)docxtemplater

docxtemplater is a library that generates docx/pptx documents from docx/pptx templates. It can replace {placeholders} with data and also supports loops and conditionals.

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

(3)textract

textract is a node.js module for extracting data from html, pdf, doc, docx, xls, xlsx, csv, pptx, png, jpg, gif, rtf, etc. Extract text from .

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

(4 )PptxGenJS

PptxGenJS is a powerful and concise JavaScript API for creating PowerPoint presentations.

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

(5 )officegen

officegen is a standalone Office Open XML file (Microsoft Office 2007 and later) generator for Word (docx), PowerPoint (pptx) and Excel (xlsx) in JavaScript.

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

【Related videos Tutorial recommendation: webfrontend】