Reduzindo o Tamanho de Arquivos PDF: Imagens, Fontes e Fluxos de Conteúdo em JavaScript (React)

Um PDF raramente é apenas "grande demais". Ele é grande demais para uma porta específica — um limite de anexo de e-mail, um formulário de upload, uma cota de armazenamento — e o que o empurrou além desse limite costuma ser uma de três coisas. Comprimir sem saber qual delas é adivinhar, e adivinhar custa ou qualidade ou mais um upload malsucedido.

O Spire.PDF for JavaScript oferece um compressor com uma opção para cada um desses três lugares. Elas podem ser aplicadas separadamente ou em conjunto, e os trade-offs são suficientemente diferentes para valer a pena entender cada uma antes de decidir. Tudo é executado no navegador via WebAssembly, com arquivos transitando por um sistema de arquivos virtual (VFS), de modo que um documento não precisa ser enviado a um serviço de terceiros para ser reduzido.

Para a configuração do projeto, consulte Integrando o Spire.PDF for JavaScript em um projeto React. Os exemplos abaixo pressupõem que o pacote esteja instalado e que o módulo WebAssembly tenha sido inicializado.

O que realmente torna um PDF grande

O tamanho do arquivo em um PDF vem de três lugares diferentes, e eles não se comportam de forma alguma de maneira semelhante:

Dois documentos do mesmo comprimento podem diferir em uma ordem de magnitude por causa disso: um contrato digitalizado de cinco páginas pode pesar 20 MB, enquanto um relatório de texto de cinquenta páginas fica abaixo de 1 MB. É por isso que "quanto posso comprimir isto?" não tem uma resposta única — um arquivo com muitas digitalizações tem muito a devolver, e um documento que já é predominantemente texto e arte vetorial está próximo de seu piso.

Portanto, o diagnóstico vem primeiro. Comprimir um documento com muito texto usando configurações de imagem quase não faz nada, e espremer imagens em um documento cujo peso está de fato nas fontes desperdiça qualidade sem ganho algum.

As três alavancas de compressão

O PdfCompressor expõe sua estratégia por meio de Options, e cada grupo de configurações corresponde a uma das três fontes acima:

As três seções seguintes abordam cada uma delas individualmente, para que o efeito de cada uma seja visível por si só. A seção seguinte as combina, que é o que você normalmente vai querer em produção.

Comprimindo as imagens

Bitmaps de alta resolução são a causa única mais comum de um PDF superdimensionado, e também é onde estão os maiores ganhos. Options.ImageCompressionOptions controla o redimensionamento e a recodificação por meio de três propriedades:

// Compress images in the document: resize, re-compress, and lower the quality
compressor.Options.ImageCompressionOptions.ResizeImages = true;
compressor.Options.ImageCompressionOptions.CompressImage = true;
compressor.Options.ImageCompressionOptions.ImageQuality = pdfModule.ImageQuality.Low;

ImageQuality não faz nada por si só — ela apenas descreve como as imagens que passam pelas duas primeiras propriedades são codificadas, de modo que defini-la sozinha devolve o mesmo arquivo. E, como esta é a única alavanca com perdas, teste primeiro no nível High se o PDF for impresso em vez de lido na tela.

Fontes: comprimir ou desincorporar

Para que o texto seja renderizado de forma idêntica em máquinas que não possuem as fontes originais, um PDF carrega dentro do arquivo os programas de fonte usados em seu texto. Podem estar em subconjunto, mas não estão ausentes — e várias famílias em vários pesos somam. Options.TextCompressionOptions oferece duas maneiras bem diferentes de lidar com isso:

// Compress font data; UnembedFonts goes further and removes the embedded fonts
compressor.Options.TextCompressionOptions.CompressFonts = true;
compressor.Options.TextCompressionOptions.UnembedFonts = true;

A combinação acima é a agressiva, e é segura exatamente sob uma condição: que você saiba o que renderizará o documento. Um link de download ou um e-mail para um destinatário desconhecido não é essa condição — nesses casos, mantenha as fontes incorporadas e deixe o CompressFonts fazer o trabalho. Desincorpore apenas onde o conjunto de fontes é fixo, como em um visualizador interno com configuração conhecida.

Recomprimindo os fluxos de conteúdo

O texto e os comandos de desenho vetorial de uma página ficam nos fluxos de conteúdo. Eles são comprimidos quando o PDF é gravado, mas um documento que foi editado repetidamente, ou que passou por ferramentas diferentes, pode acumular redundância neles. Options.CompressContents recodifica esses fluxos:

// Re-compress the document content streams
compressor.Options.CompressContents = true;

Por si só, esta é a menos dramática das três — não espere que ela salve um documento repleto de fotos. Ela conquista seu lugar em documentos densos em texto com layout complexo, e é a alavanca mais segura de deixar ativada, já que recodificar um fluxo não altera o que ele desenha.

As três em uma única passagem

As três dimensões não são três execuções separadas. Você aponta um único PdfCompressor para um arquivo, define quantas opções precisar e grava o resultado uma vez com CompressToFile.

O exemplo abaixo ativa o redimensionamento e a recompressão de imagens no nível High, a compressão de fontes com desincorporação e a recompressão dos fluxos de conteúdo — em um documento que contém tanto imagens de alta resolução quanto texto corrido:

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

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

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

    // Create a PdfCompressor and point it at the PDF to compress
    let compressor = new pdfModule.PdfCompressor({ filePath: inputFileName });

    // 1. Image compression: resize and re-compress images, with a higher quality tier
    compressor.Options.ImageCompressionOptions.ResizeImages = true;
    compressor.Options.ImageCompressionOptions.CompressImage = true;
    compressor.Options.ImageCompressionOptions.ImageQuality = pdfModule.ImageQuality.High;

    // 2. Font compression: compress font data and remove embedded fonts
    compressor.Options.TextCompressionOptions.CompressFonts = true;
    compressor.Options.TextCompressionOptions.UnembedFonts = true;

    // 3. Content compression: re-compress the document content streams
    compressor.Options.CompressContents = true;

    // Define the output file name and compress to it
    const outputFileName = 'CompressedDocument.pdf';
    compressor.CompressToFile(outputFileName);

    // 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>Compress PDF Document</h1>
      <button onClick={compressPdfDocument}>
        Generate
      </button>
    </div>
  );
}

export default App;

Documento PDF comprimido combinando as três abordagens

Duas observações sobre o formato deste código. O original permanece intacto no VFS — CompressToFile grava um novo documento, de modo que uma escolha entre antes e depois fica disponível. E, como o compressor trabalha sobre os recursos do documento e não sobre páginas renderizadas, o texto continua sendo texto real: ainda selecionável, ainda pesquisável. Apenas as imagens são recodificadas.

Verificando o que mudou

Ambos os arquivos ficam no VFS, então você pode compará-los antes de entregar o resultado ao usuário, em vez de adivinhar se as configurações fizeram alguma coisa:

// Both the original and the compressed copy are in the VFS
const originalBytes = window.dotnetRuntime.Module.FS.readFile(inputFileName).length;
const compressedBytes = window.dotnetRuntime.Module.FS.readFile(outputFileName).length;

Informe a diferença em porcentagem ao lado do download, em vez de oferecer um botão isolado — isso diz ao usuário imediatamente se o arquivo agora é pequeno o suficiente para o destino dele. Se os dois números forem quase idênticos, o peso não estava onde você estava comprimindo.

Ajustando as configurações ao documento

Problemas comuns

O arquivo quase não diminuiu, e o PDF quase não tem imagens. O tamanho vem das fontes ou dos fluxos de conteúdo. Ative TextCompressionOptions — com UnembedFonts apenas se o ambiente de visualização for conhecido — e adicione CompressContents. Documentos densos em texto respondem a essas duas e a nada mais.

O texto é renderizado de forma diferente após a compressão. Isso é o UnembedFonts fazendo exatamente o que diz. Defina-o de volta como false e mantenha CompressFonts = true; os dados de fonte continuam comprimidos, mas os glifos permanecem no arquivo.

As imagens parecem suaves ou com blocos na saída. Ou o nível de ImageQuality está muito baixo, ou o ResizeImages reduziu uma imagem que precisava de sua resolução para impressão. Para qualquer coisa que será impressa, comece em High.

O arquivo comprimido tem o mesmo tamanho do original. Alguns documentos já estão otimizados e não têm nada significativo a ceder. Verifique com a comparação de bytes acima, em vez de presumir que as configurações falharam.

Nada acontece no primeiro clique. O módulo WebAssembly é carregado de forma assíncrona. É para isso que serve a verificação if (!pdfModule) return; — em uma aplicação real, desabilite o botão até que o módulo informe que está pronto, em vez de mostrar um alerta.

Perguntas frequentes

Qual alavanca devo procurar primeiro?

As imagens, presumindo que elas sejam a culpada — mas confirme. Se o documento tem muito texto e está desproporcional ao seu número de páginas, comece pelas fontes e pelos fluxos de conteúdo e não mexa nas configurações de imagem.

Comprimir um PDF torna seu texto ilegível ou não selecionável?

Não, e é aí que um compressor baseado em API difere das ferramentas online que rasterizam cada página em um JPEG. O texto continua texto, a arte vetorial continua vetorial, e apenas os bitmaps são afetados — portanto a cópia comprimida continua selecionável, pesquisável e imprimível.

Posso comprimir apenas parte de um documento?

O compressor trabalha sobre o documento como um todo. Se você precisa que parte de um arquivo seja reduzida e parte fique intacta, divida o documento primeiro, comprima a parte que precisa e mescle novamente.

Posso manter o original e oferecer a cópia comprimida como opção?

Sim. CompressToFile grava em um novo nome de arquivo e deixa a entrada no VFS, de modo que ambas as versões ficam disponíveis na mesma sessão — útil quando o usuário decide quanta qualidade trocar.

Isso precisa de um servidor, ou pode ser executado inteiramente no navegador?

Inteiramente. O mecanismo de PDF é compilado para WebAssembly e os arquivos transitam pelo VFS, então o documento nunca sai do dispositivo. Isso importa sobretudo exatamente para os documentos que as pessoas costumam querer reduzir — contratos, extratos, registros.

Veja também

• Integrando o Spire.PDF for JavaScript em um projeto React
• Como adicionar imagens a um PDF em JavaScript (React)
• Convertendo imagens em PDF em JavaScript (React)
• Como converter páginas de PDF em imagens em JavaScript (React)
• Página do produto Spire.PDF for JavaScript