Převody souborů a dat přímo v prohlížeči

Ve webových prohlížečích je možné čím dál tím víc.

Jednou z věcí je převod různých formátů souborů mezi sebou. Převádět běžné formáty lze dnes pohodlně i offline a bez odesílání dat na server.

Pro uživatele může být dobré, že nemusí nic odesílat na server, protože si tak může převést různé formáty, aniž by do nich mohl mít provozovatel přístup.

Pro provozovatele webu to naopak znamená minimální zátěž, protože se výpočty provedou na HW návštěvníka.

Co jde čistě v prohlížeči

Teoreticky jde převést skoro cokoliv. JS může číst data, převést je a nabídnout ke stažení.

Hlavním limitem je tak výkon, který je navíc závislý na zařízení. Na stránku mohou přistupovat uživatelé s pomalými levnými mobily a zároveň z výkonných počítačů.

Velké soubory mohou být pomalé a náročné na paměť.

Proto se často různé konverse provádějí na straně serveru i v případě, že by to šlo obsloužit u klienta.

Zvlášť náročné věci (třeba generování stovek faktur) se ideálně provádějí asynchronně.

V praxi se může používat i hybridní řešení, kdy se část operací provede u klienta a část na serveru. Třeba rychlé operace snižující zátěž na síťový přenos se provedou v JS u klienta, ale náročné operace se už zpracují na serveru.

Vždy je důležité také myslet na to, že klientské straně se nedá věřit. Proto je například spolehlivé přidání vodoznaku do obrázku v každém případě nutné dělat na serveru.

Zjednodušeně řečeno:

• Texty a data: třeba převody CSV ↔ JSON budou dost bezproblémové u menších souborů.
• Obrázky (PNG/JPEG/WebP/SVG) – jde využít kreslení do <canvas>u – obecně platí, že cokoliv se může na webu zobrazovat, není problém nakreslit do <canvas>u a ten jednoduše uložit jako libovolný obrázkový formát nebo třeba i PDF.
• Audio/video, Office, ZIP, PDF apod. – dost často existuje JS knihovna, která konversi dokáže provést.

Obrázky: PNG/JPEG/WebP a změna velikosti

Pro převod do PNG (nebo jiných formátů) z SVG jsem si vytvořil jednoduchý nástroj:

Přehled konversí a knihoven

Skoro pro každou myslitelnou konversi souborů existuje JS knihovna, která ji aspoň nějak dokáže obsloužit.

• Markdown ↔ HTML – marked, turndown
• YAML ↔ JSON – js-yaml
• TOML ↔ JSON – @iarna/toml
• XLSX ↔ CSV (tabulky) – SheetJS (xlsx)
• ZIP (tvorba/rozbalení), Gzip/Deflate – JSZip, pako
• EXIF (čtení/odstranění) – ExifReader, piexifjs
• QR kódy (generování) – qrcode
• QR/čárové kódy (čtení) – jsQR, zxing-js
• EPUB → HTML/text – epub.js
• GPX/KML → GeoJSON – togeojson
• OCR (obrázek → text) – tesseract.js
• Fonty: TTF/OTF → WOFF/WOFF2 – ttf2woff2
• HTML → PDF – html2canvas, html2pdf.js
• CSV (robustní parsování) – Papa Parse
• Video/Audio převody – ffmpeg.wasm
• PDF (tvorba) – jsPDF
• HEIC → JPEG/PNG – heic2any
• DOCX → HTML – mammoth.js

Máte zkušenost s nějakým dalším nástrojem na zajímavé převody formátů souborů? Dejte mi prosím vědět do komentářů.