Come Integrare un visualizzatore PDF in HTML5 Apps 1

Come Integrare un visualizzatore PDF in HTML5 Apps
Applicazioni HTML5 offrono molti dei vantaggi rispetto a quelle native. Applicazioni Web sono
• Naturalmente cross-platform: sviluppare una volta, eseguito su iOS, Android, Windows
Phone e tutto il resto.
• Facile da aggiornare l'app per tutti, immediatamente.
• Non c'è bisogno di passare attraverso Apple o Google per accedere ai clienti (ma si può
ancora incorporando in un guscio app nativa)
Ma le applicazioni web subiscono un grosso problema, e questo è l'esperienza dell'utente.
Oggi, nel 2013, anche le applicazioni web mobile best-artigianale sono neanche
lontanamente la qualità dell'esperienza delle migliori applicazioni native. Infatti, con ma
poche eccezioni, le migliori applicazioni web mobile oggi ancora non si avvicinano alla
qualità del primo lotto di applicazioni native per iPhone a partire dal 2007.
- John Gruber, Daring Fireball
Un settore della user experience in cui le applicazioni HTML5 sono stati storicamente debole è
nella loro capacità di visualizzare un file PDF all'interno della app. Per lungo tempo, "la visione",
un PDF sul web significava scaricarlo e aprirlo in un programma diverso. Avanti venuto plugin del
browser in formato PDF, che avrebbe preso sopra la schermata del browser al fine di visualizzare il
PDF. Un piccolo miglioramento, ma ancora non integrati e non certo una buona esperienza utente.
Quindi, se l'obiettivo è quello di integrare la visualizzazione PDF in una web app, come può essere
fatto? Ci sono un certo numero di approcci, ciascuno con vantaggi e svantaggi. Continua a leggere
per vedere quello che esistono tecniche, e che potrebbe essere migliore per la vostra applicazione.
1. Rasterizzazione di immagini
Questo è probabilmente il modo più semplice per ottenere "PDF" sul web. Prendete il PDF,
trasformarlo in immagini , servire. Voila. PDF sul web in un formato che è compatibile con tutti i
browser su tutti i sistemi operativi. Tuttavia, ci sono alcuni problemi:
• Nessun vettore limiti contenuti di qualità ad alte risoluzioni,
• Conservazione e dati bitmap banda pesante,
• Non supporta funzionalità di PDF come forme o un metodo standard di annotazioni, ha
bisogno di lavoro supplementare per simulare la selezione del testo
• Problemi di scalabilità: computazionalmente costosi per rasterizzare, i requisiti di storage di
grandi dimensioni,
• Richiede lavoro extra per implementare la selezione del testo e indexability.
Mentre la conversione di immagini può essere una buona soluzione per alcune applicazioni, è
improbabile che sia quella ottimale. Che cosa possiamo fare?
2. DOM HTML
L'idea è quella di utilizzare il rendering del testo originario del browser e lo strato in cima
un'immagine che contiene tutti i dati non di testo. (Questa tecnica viene implementata da PDFTron
in pdfton.PDF.Convert.ToHtml () ). Mentre suona come una variazione incrementale dalla piena
rasterizzazione, ci sono alcuni vantaggi significativi:
• La qualità del testo è spesso conservata. Le persone sono particolarmente sensibili alla
qualità del testo, preservando la natura vettore dei glifi è un grande miglioramento.
• Consente all'utente di utilizzare le funzionalità di selezione del browser standard di testo /
copia, che possono anche essere letti da robot dei motori di ricerca.
Così, mentre questo è un passo avanti rispetto pieno rasterizzazione, problemi rimangono:
• Di qualità per gli elementi non testuali è sacrificato per tutti i dati non di testo.
• Posizionamento del testo accurato è possibile, ma richiede una <span> separato per ogni
lettera. In questo modo si riduce la velocità di caricamento della pagina e la capacità di
ricerca / index / select text. Quindi bisogna accettare questa limitazione, o invece accettare
posizionamento del testo un po 'imprecisa.
• Degrada alla piena rasterizzazione PDF quando il testo è semi-trasparente, parzialmente
occluso o coperto da oggetti trasparenti, oggetti modello pieno, ecc
• E 'facile per gli utenti di salvare i contenuti DOM a livello locale, che è un problema se il
contenuto di copyright servire.
• I requisiti di archiviazione potrebbero essere significative
3. SVG
Il W3C ha riconosciuto la necessità di portare la grafica vettoriale di alta qualità per il web, e ha
proposto SVG (Scalable Vector Graphics). In un primo momento, questa tecnologia sembra molto
promettente: sarà fornire i dati vettoriali e posizionamento preciso che vogliamo, con font,
gradienti, maschere e altro ancora. A "PDF killer" alcuni predetto. PDFTron è intervenuta e ha
sviluppato il primo convertitore da PDF a SVG nel 2001. Tuttavia, l'adozione diffusa di SVG e
soppiantare del PDF non è mai venuto a passare. Perché no? Qui ci sono alcuni motivi:
• SVG non è completamente compatibile con il modello grafico PDF (es. trasparenza modalità
/ fusione), rendendo impossibile riprodurre fedelmente i contenuti PDF utilizzando SVG.
• A spec gonfio progettato per competere anche con Flash, incorporando scripting e
animazione, mettere un peso elevato per coloro che desiderano implementare
completamente le specifiche.
• Manca il supporto per la compressione monocromatica efficiente, che è importante per molti
documenti aziendali scansionati.
• Peggio di tutto, la maggior parte delle implementazioni erano incomplete e buggy. Fino IE9,
Microsoft non ha il supporto SVG a tutti, e anche adesso non c'è il supporto per i font SVG.
In altri browser (Chrome, Firefox) ci sono molti difetti legati al posizionamento del testo.
SVG aveva alcune costruite in limiti tecnici, ma il suo più grande problema era (ed è tuttora) una
mancanza di implementazioni completi e corretti nel browser. Alla fine ha trovato il successo in
alcune nicchie, ma non ha sperimentato l'adozione diffusa di casi d'uso generale.
4. HTML5 Canvas
Allora da dove viene, che ci lascia? Non sorprende, ci accingiamo a dare un'occhiata da vicino al
"HTML5", in particolare la tela. Fa questa tecnologia finalmente consegnare la possibilità di
visualizzare una linea PDF? Sarà riuscire dove altri sono venuto a breve?
L'HTML5 Canvas ci offre funzionalità di disegno 2D simile a una libreria di livello di sistema come
GDI e Direct2D su Windows e Quartz su OS X e iOS. Ciò significa che le forme, le curve, testo e
opacità possono essere rappresentate matematicamente, e resi dalla tela a qualsiasi risoluzione. Così
la grande domanda è: possiamo "tradurre" la rappresentazione matematica di contenuti in un PDF
per una serie di comandi Javascript che li attirano l'HTML5 Canvas. Diamo uno sguardo.
PDF → codice JS → HTML5 Canvas: pdf.js
Il "Sacro Graal" sarebbe quella di utilizzare JavaScript per leggere direttamente un PDF e disegnare
su una tela HTML5. Ciò offrirebbe una serie di vantaggi:
• Grafica vettoriale
• Render il PDF direttamente anziché utilizzare un formato intermedio (come immagini o
SVG)
• Non sarebbe soffrono di limitazioni delle tecniche precedentemente descritte
• Comportamento coerente tutti i browser
Costruire un tale sistema sembrare un compito importante, ma è in realtà stato tentato dalla Mozilla
Foundation in pdf.js . Pdf.js è un impressionante prestazione tecnica, ma un attento esame porta a
concludere che soffre, purtroppo, da molte usabilità e problemi di qualità. Questo non è un riflesso
di pdf.js di per sé, ma piuttosto una limitazione tecnica che sarebbe insita in ogni prodotto che ha
tentato di utilizzare Javascript/HTML5 per rendere un PDF. Alcuni dei problemi che abbiamo
incontrato:
1. Precisione
Dalle pdf.js 'get-go' affrontato le questioni sul lato rendering. Ad esempio, standard HTML5 Canvas
non supporta i percorsi con i trattini, la regola di riempimento pari-dispari, o metodi di fusione PDF.
Poiché gli sviluppatori di Mozilla avevano il controllo del proprio browser che erano in grado di
fasciare Firefox con estensioni personalizzate (con prefisso moz-...). Purtroppo queste estensioni
non sono parte dello standard HTML5 e non sono supportate da tutti i browser, compresi i browser
mobili dominanti. Inoltre, anche con tutta la consuetudine moz estensioni, 'pdf.js' non può trattare
con alcuni gruppi di trasparenza, sovrastampa, alcune maschere morbide, spazi colore non RGB,
ecc Forse un giorno tutti i browser aggiungerà tutte le estensioni necessarie per precisione il
rendering di un PDF, ma il progetto ha mostrato chiaramente alcune limitazioni di attuazione di un
sistema grafico complesso in JS.
pdf.js rendering rendering corretto
pdf.js rendering corretto il rendering PDF
2. Prestazione
JavaScript è molto più lento di codice nativo . Nonostante l'uso di GPU accelerata di rendering tela,
visualizzazione dei documenti PDF in pdf.js è più lento di nativi spettatori / plug-in che non
utilizzano l'accelerazione hardware. Spettatori nativi saranno sempre in grado di rimanere un passo
avanti di telespettatori JavaScript in termini di prestazioni.
3. Affidabilità
Browser per cellulari non rispondono bene quando sono a corto di memoria: semplicemente escono,
cioè crash. Perché i documenti PDF possono essere di grandi dimensioni e utilizzare le risorse
complesse non è difficile superare il limite. (Le stesse questioni sul tavolo, ma grazie a grandi
quantità di RAM e memoria virtuale, sono meno critici.)
4. Usabilità
Perché pdf.js utilizza documenti PDF 'come è', è più probabile che no che i documenti non sono
stati "linearizzata", che viene salvato in un formato che è in streaming sul web. Ciò significa che
l'intero documento deve essere scaricato (e memorizzato) prima che possa essere reso, lasciando
l'attesa dell'utente. Anche se questo problema non è specifico di un visualizzatore Javascript, è un
inconveniente di utilizzare documenti PDF che non sono stati trasformati per la visualizzazione
online.
Una soluzione: codice PDF PDFNet → → → JS HTML5:
WebViewer
Cosa si può fare per risolvere queste carenze? Quando si guarda la fonte dei problemi, è che i
documenti PDF possono essere semplicemente troppo grande e complesso per essere gestito con
competenza da una soluzione JavaScript/HTML5 Canvas puro. Così, forse con un po 'di preelaborazione, un file PDF può essere normalizzata con un formato che può essere adeguatamente
gestito da un puro JavaScript / HTML 5 Canvas spettatore. Cosa deve essere fatto?
• Ottimizzare il file per un veloce accesso casuale carico. Questo significa che ogni pagina
possa essere recuperato e visualizzato a prescindere da quale altre pagine del documento
sono già stati scaricati.
• Downsampling immagini ad alta risoluzione in modo che non consumano grandi quantità di
memoria, che è un problema reale sui dispositivi mobili.
• Ridurre la complessità di un documento per la visualizzazione accurata ed efficiente su
dispositivi mobili. Ciò significa analizzare un elemento elemento per pagina PDF, in cerca di
semplificazioni e mezzi alternativi di rappresentare contenuti che è noto per essere
compatibile con HTML5 Canvas. Questo può anche significare contenuto rasterizzazione
che non può in alcun modo essere resa con precisione da un HTML5 Canvas.
• Normalizza tutte le immagini in una forma che può essere decodificato in modo nativo da un
browser
Così come bene fa questo lavoro? Dopo 3 + anni di attuazione di tali ottimizzazioni per
Visualizzatore Web , siamo in grado di dire che funziona davvero molto bene. Una volta che il PDF
è stato ottimizzato per la visualizzazione web, tutte le carenze d 'pdf.js scioglie, e la visualizzazione
è
•
•
•
•
•
veloce
affidabile
alta qualità
cross-browser
mobile-friendly
Questi documenti ottimizzati hanno anche servito come una buona base per l'attuazione funzionalità
PDF come moduli interattivi e annotazioni.
Conclusioni
Visualizzazione di un PDF all'interno di un browser web non è affatto banale. Ciò che è chiaro è che
per la visualizzazione precisa e affidabile, il PDF ha bisogno di essere "normalizzato" per una
rappresentazione web amichevole. Alcuni metodi di normalizzazione, come la conversione di
immagini, funzionano, ma con limitazioni. Normalizzazione sofisticati, come quello che viene fatto
per Visualizzatore Web , offrono un'esperienza che si avvicina a quella di un visualizzatore PDF
nativo.

Download Report