[6개 카테고리] 실용적인 프론트엔드 파일 처리 도구 라이브러리, 와서 모아보세요!

이 글에서는 프론트엔드 파일 처리와 관련된 몇 가지 실용적인 도구 라이브러리를 6가지 카테고리로 나누어 여러분께 하나씩 소개하겠습니다.

1. PDF

(1) PDF.js

PDF.js는 HTML5를 사용하여 제작된 PDF(Portable Document Format) 뷰어입니다. 이는 PDF 구문 분석 및 렌더링을 위한 보편적인 웹 표준 기반 플랫폼을 만드는 것을 목표로 커뮤니티 중심으로 Mozilla에서 지원합니다.

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

(2) jsPDF

jsPDF는 JavaScript 언어를 사용하여 PDF를 생성하는 오픈 소스 라이브러리입니다. . PDF 생성을 위한 최고의 HTML5 클라이언트 솔루션입니다.

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

(3) pdfmake

순수 JavaScript로 서버 측 및 클라이언트 측을 위한 PDF 문서 생성 라이브러리 .

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

(4) pdf-lib

pdf-lib는 모든 JavaScript 환경 문서에서 PDF를 생성하고 수정할 수 있습니다. . PDF 작업(특히 PDF 수정)에 대한 JavaScript 생태계의 강력한 지원 부족 문제를 해결하는 것을 목표로 합니다. Node, Browser, Deno, React Native 등과 같은 최신 JavaScript 런타임과 함께 사용할 수 있습니다.

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

(5) pdfkit

PDFKit은 Node와 브라우저 라이브러리를 위한 PDF 문서 생성입니다. 복잡한 여러 페이지의 인쇄 가능한 문서를 쉽게 만들 수 있습니다. API에는 연결 가능성이 포함되어 있으며 하위 수준 기능뿐만 아니라 상위 수준 기능의 추상화도 포함됩니다. PDFKit API는 간단하게 설계되었으므로 복잡한 문서를 생성하려면 몇 가지 함수 호출만 필요한 경우가 많습니다.

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

(6) React-pdf

react-pdf는 브라우저 및 서버에서 실행하기 위한 도구입니다. PDF 파일 생성을 위한 렌더러.

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

2. Pictures

(1) Sharp

sharp는 고성능입니다. Node.js 이미지 처리 라이브러리는 JPEG, PNG, WebP, AVIF 및 TIFF 이미지 크기 조정을 위한 가장 빠른 모듈입니다.

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

(2)cropperjs

cropperjs는 29가지 자르기 옵션, 27가지 방법을 지원하는 JavaScript 이미지 자르기 도구입니다. 6개 이벤트, 스케일링, 회전 등

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

(3) tui.image-editor

tui.image-editor는 HTML5를 사용하는 도구입니다. 캔버스 모든 기능을 갖춘 이미지 편집기. 사용하기 쉽고 강력한 필터를 제공합니다.

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

(4)compressorjs

JavaScript 이미지 압축기. 브라우저의 기본 canvas.toBlob API를 사용하여 압축 작업, 즉 손실 압축, 비동기압축을 수행하세요. 브라우저마다 다른 압축 효과가 있습니다. 이는 일반적으로 클라이언트에 업로드하기 전에 이미지를 사전 압축하는 데 사용됩니다.

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

(5)viewerjs

viewerjs는 52가지 보기 옵션, 23가지 작업 방법, 17가지 이벤트, 회전, 이동, 확대/축소 등을 지원하는 JavaScript 이미지 뷰어입니다.

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

(6) omaagesloaded

omagsloaded는 이미지가 로드될 때 확인하기 위한 JavaScript 라이브러리입니다.

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

3. 오디오 및 비디오

(1) video.js

Video.js는 a 처음부터 HTML5 세계를 위해 제작된 웹 비디오 플레이어입니다. HTML5 비디오 및 미디어 소스 확장은 물론 YouTube 및 Vimeo(플러그인을 통해)와 같은 기타 재생 기술도 지원합니다. 데스크톱 및 모바일 장치에서 비디오 재생을 지원합니다.

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

(2) plyr

Plyr은 간단하고 가벼우며 액세스 가능하고 사용자 정의된 HTML5인 YouTube입니다. 최신 브라우저를 지원하는 Vimeo 미디어 플레이어.

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

(3) MediaElement.js

MediaElement.js는 MP4, WebM을 지원하는 HTML5 <audio></audio> 或 <video></video> 플레이어입니다. MP3는 물론 HLS, Dash, YouTube, Facebook, SoundCloud 등에는 모든 브라우저에서 일관된 UI를 위한 공통 HTML5 MediaElement API가 있습니다.

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

(4) 모든 것은 구성 요소화 원칙에 따라 독립적이고 분리 가능한 UI 구성 요소로 설계되었습니다. 더 중요한 것은 UI 레이어에서 유연한 성능을 제공할 뿐만 아니라 기능 면에서도 비디오 로딩, 버퍼링, 형식 지원에 대한 비디오 의존성을 없애는 과감한 시도를 한다는 것입니다. 특히 mp4 온디맨드에 많은 노력을 기울여 스트리밍 재생을 지원하지 않는 mp4도 세그먼트 단위로 로딩할 수 있게 되었는데, 이는 원활한 정의 전환, 로딩 제어, 비디오 트래픽이 가능하다는 것을 의미합니다. 동시에 flv, hls 및 dash에 대한 주문형 및 라이브 방송 지원도 통합합니다.

Github(⭐️ 5.4k):

https://github.com/bytedance/xgplayer

(5) DPlayer

DPlayer는 사람들이 비디오와 댓글을 작성하는 데 도움이 되는 귀여운 HTML5 연발 비디오 플레이어입니다. 쉽게.

Github (⭐️ 12.9k):

https://github.com/DIYgod/DPlayer

(6) Howler.js

howler.js는 최신 웹 오디오 라이브러리입니다. 기본값은 Web Audio API이고 HTML5 Audio로 대체됩니다. 이를 통해 모든 플랫폼에서 JavaScript로 오디오 작업을 쉽고 안정적으로 수행할 수 있습니다. （Github(t️ 20.3K): https://github.com/goldfire/howler.js

4. Table

(1) Handsontable

handsontable 스킨이 적용된 JavaScript 데이터 그리드 구성 요소입니다. React, Angular 및 Vue와 함께 작동합니다. 데이터 그리드 기능과 스프레드시트 같은 UX를 결합합니다. 데이터 바인딩, 데이터 유효성 검사, 필터링, 정렬 및 CRUD 작업을 제공합니다.

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

(2) ag-grid

AG Grid는 모든 기능을 갖추고 사용자 정의가 가능한 JavaScript 데이터 그리드입니다. 탁월한 성능을 제공하고 타사 종속성이 없으며 모든 주요 JavaScript 프레임워크와 원활하게 통합됩니다.

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

(3)x-spreadsheet

x-spreadsheet는 웹 기반 JavaScript( 캔버스) 스프레드시트.

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

(4) cheetah-grid

cheetah-grid는 가장 빠른 오픈 소스 데이터 시트입니다. 웹.

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

(5) ExcelJS

ExcelJS는 Excel 스프레드시트 파일 리버스 엔지니어링 프로젝트입니다. XLSX 및 JSON 파일에 스프레드시트 데이터와 스타일을 읽고, 조작하고, 쓸 수 있습니다.

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

(6) SheetJS

SheetJS는 간단한 스프레드시트로, 스프레드시트를 읽고 편집하고 내보내기 위한 것입니다. 웹 브라우저 및 서버와 함께 작동하며 Office 365에서 Microsoft의 신뢰를 받습니다.

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

5. 파일 업로드

(1) Uppy

Uppy는 세련된 모듈 JavaScript 파일입니다. 모든 애플리케이션과 원활하게 통합되는 업로더입니다. 빠르고, 이해하기 쉬운 API를 갖추고 있으며, 파일 업로더를 구축하는 것보다 더 중요한 사항에 대해 걱정할 수 있습니다.

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

(2) filepond

filepond는 업로드 속도를 높이기 위해 이미지를 최적화하고 파일 업로드를 위한 JavaScript 라이브러리입니다. 속도를 높이고 훌륭하고 접근 가능하며 매끄럽고 부드러운 사용자 경험을 제공합니다.

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

(3) Dropzone

Dropzone은 모든 HTML 요소를 드롭존으로 변환할 수 있는 JavaScript 라이브러리입니다. 즉, 사용자는 파일을 끌어서 놓을 수 있으며 Dropzone은 파일 미리보기와 업로드 진행 상황을 표시하고 XHR을 통해 업로드를 처리합니다.

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

(4) vue-upload-comComponent

vue-upload-comComponent는 Vue용 구성 요소입니다. js 업로드 구성 요소는 여러 파일 업로드, 디렉터리 업로드, 끌어서 놓기 업로드, 디렉터리 끌어서 놓기를 지원하고 동시에 여러 파일 업로드를 지원합니다.

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

(5) Uppload

Uppload는 더 나은 JavaScript 이미지 업로드 장치입니다. 30개 이상의 플러그인으로 사용자 정의가 가능하며 완전 무료 오픈 소스이며 모든 파일 업로드 백엔드와 함께 사용할 수 있습니다.

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

(6) React-dropzone

react-dropzone은 React 기반의 맞춤형 버전입니다. HTML5의 drop && drag API는 파일의 드래그 앤 드롭 업로드를 구현할 수 있는 JavaScript 라이브러리입니다.

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

6. 기타

(1) JSZip

JSZip 사용 간단한 API를 사용하여 .zip 파일을 생성, 읽기 및 편집하기 위한 JavaScript 라이브러리입니다.

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

(2) docxtemplater

docxtemplater는 docx/pptx 템플릿에서 docx/pptx 문서를 생성하는 라이브러리입니다. {placeholders}를 데이터로 대체할 수 있으며 루프 및 조건문도 지원합니다.

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

(3) textract

texttract는 다음에서 데이터를 추출하기 위한 node.js 모듈입니다. html, pdf, doc, docx, xls, xlsx, csv, pptx, png, jpg, gif, rtf 등에서 텍스트를 추출합니다.

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

(4) PptxGenJS

PptxGenJS는 PowerPoint 프레젠테이션 작성을 위한 강력하고 간결한 JavaScript API입니다.

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

(5)officegen

officegen은 Word(docx), PowerPoint(pptx)용 JavaScript 라이브러리입니다. ) 및 Office Open XML 파일용 Excell(xlsx) 독립 실행형 생성기(Microsoft Office 2007 이상).

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

【관련 영상 튜토리얼 추천: web front-end】