Linéariser un PDF pour un affichage web rapide en JavaScript (React)

Vous cliquez sur un lien vers un PDF volumineux et vous obtenez un cadre vide. L'indicateur tourne, quelques mégaoctets arrivent, et ce n'est qu'alors que la première page apparaît. Le fichier était correct, le réseau aussi — le document était simplement écrit dans un ordre qui oblige la visionneuse à attendre l'intégralité avant de pouvoir dessiner quoi que ce soit. C'est le problème que résout la linéarisation, et il s'agit d'un correctif structurel, pas d'un correctif de taille : les mêmes octets, organisés de sorte que les parties nécessaires au rendu de la première page se trouvent au début.

Cet article linéarise un PDF dans le navigateur avec Spire.PDF for JavaScript. La bibliothèque s'exécute sur WebAssembly et travaille sur le document via un système de fichiers virtuel (VFS), ce qui permet de restructurer un fichier sur la machine de l'utilisateur sans le faire passer par un service d'optimisation distant.

Les instructions d'installation se trouvent dans Intégrer Spire.PDF for JavaScript dans un projet React. L'exemple ci-dessous suppose que le package est installé et que le module WebAssembly a été initialisé.

Ce que signifie réellement l'affichage web rapide

Un PDF est un conteneur, et ses objets sont stockés dans l'ordre dans lequel ils ont été écrits par ce qui l'a produit. Une visionneuse, en revanche, a besoin d'un petit ensemble précis — le catalogue du document, l'arbre des pages et les objets qui sous-tendent la première page — avant de pouvoir afficher quoi que ce soit. Si ces objets se trouvent près de la fin du fichier, derrière une grande image incorporée, la visionneuse n'a d'autre choix que de continuer à télécharger jusqu'à les atteindre.

L'affichage web rapide est le nom grand public d'un PDF linéarisé : un PDF dont la disposition interne place les objets de la première page près du début, de sorte qu'un client prenant en charge les requêtes HTTP à plage d'octets peut demander uniquement ces octets, afficher immédiatement la première page et récupérer le reste en arrière-plan. Le lecteur voit du contenu pendant que le téléchargement se poursuit au lieu de fixer un cadre vide.

La conséquence pratique est que deux fichiers de taille identique peuvent sembler totalement différents à l'ouverture. Même nombre de pages, mêmes images, même texte — temps d'affichage de la première page différent.

Comment la linéarisation réorganise un fichier

La linéarisation réécrit la disposition du fichier sans toucher à son contenu :

• Les objets dont dépend la première page sont déplacés au début du fichier.
• Un dictionnaire de linéarisation est écrit près du début afin qu'un client puisse découvrir la disposition avant d'avoir lu tout le document.
• Une table d'indices enregistre l'emplacement des objets de chaque page, ce qui permet à un lecteur de sauter en avant vers une page arbitraire au moyen d'une requête à plage d'octets.
• Les informations de référence croisée sont placées de manière à pouvoir être lues tôt plutôt qu'à la fin du fichier.

Tout ce qu'un lecteur voit réellement — texte, images, polices, illustrations vectorielles, liens, annotations, signets, métadonnées — est conservé tel quel. Les mots sur la page sont les mêmes mots aux mêmes endroits. Ce qui a changé, c'est l'ordre des octets, pas le contenu. C'est pourquoi un document linéarisé est impossible à repérer à l'œil nu : ouvrez l'original et le résultat côte à côte et ils sont indiscernables, car la différence ne se manifeste que dans le moment où les éléments peuvent être lus.

Linéariser un document dans le navigateur

L'utilisation reprend celle des autres convertisseurs de la bibliothèque : transmettez le fichier d'entrée à PdfToLinearizedPdfConverter, puis appelez ToLinearizedPdf pour écrire le document restructuré.

function App() {
  const convertToLinearized = async () => {
    // Get the Spire.PDF WASM module
    const pdfModule = window.wasmModule?.spirepdf;

    // Check whether the module is ready
    if (!pdfModule) {
      alert('Spire.PDF is not ready yet');
      return;
    }

    // Load the PDF file to be converted into the VFS
    const inputFileName = 'Business_Data_Overview.pdf';
    await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}/data/`);

    // Define the output file name
    const outputFileName = 'LinearizedDocument.pdf';

    // Construct the linearization converter from the input file and write out the linearized document
    const converter = new pdfModule.PdfToLinearizedPdfConverter({ filePath: inputFileName });
    converter.ToLinearizedPdf({ filePath: outputFileName });
    converter.Dispose();

    // Read the generated file from the VFS and trigger the download
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/pdf' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Linearize a PDF</h1>
      <button onClick={convertToLinearized}>
        Start Converting
      </button>
    </div>
  );
}

export default App;

ToLinearizedPdf écrit un nouveau fichier, de sorte que l'entrée reste dans le VFS et que l'original est disponible pour comparaison. Rien dans l'appel ne dépend du contenu du document — un rapport, un manuel et une archive numérisée passent tous par les deux mêmes membres.

Le document linéarisé ne présente aucune différence à l'affichage, le changement se situe dans la structure du fichier

Linéariser ou compresser

Ces deux opérations sont régulièrement confondues parce qu'elles sont toutes deux décrites comme consistant à « optimiser un PDF », mais elles répondent à des questions différentes.

Un fichier peut avoir besoin des deux, et l'ordre compte. La compression réécrit le document, et toute opération qui réécrit un PDF supprime la disposition linéarisée — donc si vous voulez les deux, compressez d'abord et linéarisez en dernier, afin que la structure linéarisée soit l'état final du fichier.

Quand la linéarisation vaut la peine

La linéarisation est bénéfique dans un contexte précis : un document suffisamment volumineux pour que le téléchargement soit perceptible, diffusé via HTTP vers une visionneuse prenant en charge les requêtes à plage d'octets.

• Manuels, catalogues et longs rapports servis depuis un site. C'est le cas classique — des dizaines de mégaoctets, ouverts à partir d'un lien, avec des lecteurs qui veulent aller directement à un chapitre.
• Lecteurs mobiles sur connexions lentes. La première page apparaît dès les premiers octets demandés, de sorte que le temps de chargement perçu diminue même lorsque le téléchargement total ne change pas.
• Documents que les lecteurs consultent généralement au milieu. Les requêtes à plage d'octets permettent à un client de récupérer d'abord une page ultérieure, ce qui n'est possible qu'avec la table d'indices que porte un fichier linéarisé.

Elle ne vaut pas la peine dans d'autres cas. Un fichier ouvert depuis un disque local n'est pas récupéré via HTTP, il n'y a donc aucune requête à plage d'octets à exploiter. Un document court s'affiche déjà avant que la différence puisse être ressentie. Et un flux de travail d'impression interne ne diffuse ni ne saute de page — il veut tout le document, dans l'ordre, d'un coup.

Confirmer que le résultat est linéarisé

Comme les pages visibles sont identiques, « cela semble correct » ne prouve rien. Le changement se situe dans le fichier, la vérification doit donc lire le fichier.

Un PDF linéarisé porte un dictionnaire de linéarisation près du début de ses octets, et le marqueur est en texte brut, de sorte que les quelques centaines de premiers octets du résultat suffisent à le confirmer. L'entrée et la sortie se trouvent dans le VFS, ce qui réduit la comparaison à quelques lectures de fichier :

// Read the head of the file and look for the linearization marker
const bytes = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const head = new TextDecoder('latin1').decode(bytes.slice(0, 1024));
const linearized = head.includes('/Linearized');

C'est une protection utile pour un pipeline : convertissez un document, puis vérifiez que le marqueur est présent avant de transmettre le fichier. S'il est absent, le fichier a été réécrit par quelque chose en aval après la linéarisation — rappelez-vous que tout nouvel enregistrement, y compris une passe de compression, supprime la disposition linéarisée.

Problèmes courants

La première page met encore du temps à apparaître. Vérifiez la manière dont le fichier est diffusé. La linéarisation n'aide que lorsque le client peut demander des parties du fichier — servi via HTTP avec prise en charge des plages. Si le fichier entier est récupéré d'un coup, ou si le document est court, l'opération ne peut pas changer ce que vous observez.

Le résultat contient une ligne de texte supplémentaire. Une version non licenciée ajoute Evaluation Warning : The document was created with Spire.PDF for JavaScript. au document, une fois par appel de conversion. Une licence temporaire de 30 jours la supprime ainsi que les limitations fonctionnelles — contactez le service commercial pour en obtenir une.

La taille du fichier n'a pas diminué. En général, elle ne diminuera pas. La linéarisation réorganise les octets existants ; elle n'en supprime aucun. Si la taille est le problème, c'est une tâche de compression, pas de linéarisation.

Rien ne se passe au premier clic. Le module WebAssembly se charge de manière asynchrone. if (!pdfModule) return; est la protection utilisée dans l'exemple ; dans une véritable interface, désactivez le contrôle jusqu'à ce que le module soit prêt plutôt que d'afficher une alerte.

FAQ

La linéarisation d'un PDF modifie-t-elle son contenu ou sa qualité ? Non. Le texte, les images, les polices, la mise en forme, les liens et les métadonnées sont tous conservés à l'identique ; seul l'ordre interne des octets change. Les pages ont le même aspect et le même comportement.

La linéarisation est-elle identique à la compression d'un PDF ? Non. La compression supprime la redondance pour produire moins d'octets ; la linéarisation réorganise les octets déjà présents afin que la première page puisse être lue plus tôt. L'une cible la taille du téléchargement, l'autre le temps d'affichage de la première page.

Est-ce utile si le fichier est ouvert depuis le disque local ? Rarement. Le bénéfice provient de la diffusion via HTTP avec des requêtes à plage d'octets, donc un document ouvert depuis un chemin local n'a rien à y gagner.

Un fichier linéarisé restera-t-il linéarisé ? Uniquement jusqu'à ce que quelque chose le réécrive. Tout outil qui réenregistre le document — une passe de compression, une modification, une fusion — supprime la disposition linéarisée, la linéarisation doit donc être la dernière étape du pipeline.

Cela fonctionne-t-il sur un fichier chiffré ou protégé par mot de passe ? Le chiffrement est une préoccupation distincte de la disposition. Déchiffrez d'abord le document et laissez le convertisseur travailler sur un fichier déjà lisible.

Puis-je convertir plusieurs fichiers à la fois ? Oui. Le convertisseur traite un seul fichier, donc un lot est une boucle — les deux mêmes membres, avec un nom de sortie distinct pour chaque entrée.

Voir aussi

• Comment convertir un PDF en niveaux de gris en JavaScript (React)
• Réduire la taille d'un fichier PDF : images, polices et flux de contenu en JavaScript (React)
• Comment obtenir le nombre de pages d'un PDF en JavaScript (React)
• Intégrer Spire.PDF for JavaScript dans un projet React
• Page produit Spire.PDF for JavaScript