Un PDF rara vez es simplemente "demasiado grande". Es demasiado grande para una puerta concreta —un límite de adjuntos de correo, un formulario de carga, una cuota de almacenamiento— y lo que lo empujó más allá de ese límite suele ser una de tres cosas. Comprimir sin saber cuál de ellas es significa adivinar, y adivinar cuesta o calidad o otra carga fallida.
Spire.PDF for JavaScript le ofrece un compresor con una opción para cada uno de esos tres lugares. Se pueden aplicar por separado o juntos, y las contrapartidas son lo bastante distintas como para que merezca la pena entender cada una antes de decidir. Todo se ejecuta en el navegador sobre WebAssembly, con los archivos moviéndose a través de un sistema de archivos virtual (VFS), de modo que un documento no tiene que subirse a un servicio de terceros para reducir su tamaño.
Para la configuración del proyecto, consulte Integrating Spire.PDF for JavaScript in a React Project. Los ejemplos siguientes asumen que el paquete está instalado y que el módulo WebAssembly se ha inicializado.
Qué es lo que realmente hace grande a un PDF
El tamaño de archivo de un PDF proviene de tres lugares distintos, y no se comportan en absoluto igual:
| Dónde está el peso | Cómo se ve | Una pista de que es la causa |
|---|---|---|
| Imágenes | Mapas de bits incrustados a su propia resolución: escaneos, fotos, capturas de pantalla exportadas | Pocas páginas, decenas de megabytes |
| Fuentes incrustadas | Programas de fuentes almacenados dentro del archivo para que el texto se represente igual en cualquier lugar | Mayormente texto, y aun así varios megabytes |
| Flujos de contenido | Las instrucciones de dibujo que hay detrás del texto y los gráficos vectoriales | El archivo ha sido editado o vuelto a guardar por varias herramientas distintas |
Dos documentos de la misma longitud pueden diferir en un orden de magnitud por este motivo: un contrato escaneado de cinco páginas puede pesar 20 MB mientras que un informe de texto de cincuenta páginas no llega a 1 MB. Por eso "¿cuánto puedo comprimir esto?" no tiene una única respuesta: un archivo con muchos escaneos tiene mucho que devolver, y un documento que ya es mayormente texto y arte vectorial está cerca de su mínimo.
Así que el diagnóstico es lo primero. Comprimir un documento con mucho texto con ajustes de imagen no hace casi nada, y aplastar las imágenes de un documento cuyo peso está en realidad en sus fuentes desperdicia calidad sin ninguna ganancia.
Las tres palancas de compresión
PdfCompressor expone su estrategia a través de Options, y cada grupo de ajustes corresponde a una de las tres fuentes anteriores:
| Opción | A qué apunta | A qué renuncia |
|---|---|---|
ImageCompressionOptions |
Los mapas de bits de la página | Fidelidad de la imagen: es la única palanca con pérdida de las tres |
TextCompressionOptions |
Los datos de fuentes incrustadas | Nada, salvo que desincruste las fuentes, en cuyo caso la portabilidad |
CompressContents |
Los flujos de contenido de las páginas | Prácticamente nada: el contenido se recodifica, no se descarta |
Las tres secciones siguientes las abordan una a una para que el efecto de cada una sea visible por sí solo. La sección posterior las combina, que es lo que normalmente querrá en producción.
Comprimir las imágenes
Los mapas de bits de alta resolución son la causa individual más común de un PDF sobredimensionado, y también donde están las mayores ganancias. Options.ImageCompressionOptions controla el escalado y la recodificación mediante tres propiedades:
| Propiedad | Qué hace | Cuándo merece la pena configurarla |
|---|---|---|
ResizeImages |
Escala las imágenes hacia abajo proporcionalmente y luego las recodifica | Fotos o escaneos capturados muy por encima de la resolución a la que se muestran |
CompressImage |
Aplica una recodificación con pérdida a las imágenes | Siempre que la calidad de imagen tenga algún margen que ceder |
ImageQuality |
Selecciona el nivel de calidad para esa recodificación | El ajuste final: High conserva más detalle, Low produce un archivo más pequeño |
// 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 no hace nada por sí sola: solo describe cómo se codifican las imágenes que pasan por las dos primeras propiedades, así que configurarla sola le devuelve el mismo archivo. Y como es la única palanca con pérdida, pruebe primero con el nivel High si el PDF se va a imprimir en lugar de leerse en pantalla.
Fuentes: comprimir o desincrustar
Para que el texto se represente de forma idéntica en máquinas que no tienen las tipografías originales, un PDF lleva dentro del archivo los programas de fuentes usados en su texto. Puede que estén subconjuntados, pero ausentes no están, y varias familias con varios pesos suman. Options.TextCompressionOptions ofrece dos maneras muy distintas de gestionarlo:
| Propiedad | Qué hace | El inconveniente |
|---|---|---|
CompressFonts |
Comprime los datos de fuentes incrustadas y deja las fuentes en su sitio | Ninguno para la representación: los glifos permanecen en el archivo |
UnembedFonts |
Elimina los programas de fuentes y deja que el lector sustituya por fuentes del sistema | Sustitución de glifos o desplazamientos de espaciado allí donde falten esas fuentes |
// Compress font data; UnembedFonts goes further and removes the embedded fonts
compressor.Options.TextCompressionOptions.CompressFonts = true;
compressor.Options.TextCompressionOptions.UnembedFonts = true;
La combinación anterior es la agresiva, y es segura bajo una única condición: que sepa qué va a representar el documento. Un enlace de descarga o un correo a un destinatario desconocido no es esa condición; en ese caso, mantenga las fuentes incrustadas y deje que CompressFonts haga el trabajo. Desincruste solo donde el conjunto de fuentes sea fijo, como un visor interno con una configuración conocida.
Volver a comprimir los flujos de contenido
El texto y los comandos de dibujo vectorial de una página viven en flujos de contenido. Se comprimen cuando se escribe el PDF, pero un documento que se ha editado repetidamente, o que ha pasado entre herramientas distintas, puede acumular redundancia en ellos. Options.CompressContents recodifica esos flujos:
// Re-compress the document content streams
compressor.Options.CompressContents = true;
Por sí sola, esta es la menos espectacular de las tres: no espere que rescate un documento cargado de fotos. Se gana su lugar en documentos densos en texto con diseños complejos, y es la palanca más segura de dejar activada, ya que recodificar un flujo no cambia lo que dibuja.
Las tres en una sola pasada
Las tres dimensiones no son tres ejecuciones separadas. Usted apunta un único PdfCompressor a un archivo, configura tantas opciones como necesite y escribe el resultado una sola vez con CompressToFile.
El ejemplo siguiente activa el redimensionado y la recompresión de imágenes con el nivel High, la compresión de fuentes con desincrustación y la recompresión de los flujos de contenido, sobre un documento que contiene tanto imágenes de alta resolución como texto de cuerpo:
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 los tres enfoques
Dos cosas sobre la forma de este código. El original permanece intacto en el VFS: CompressToFile escribe un documento nuevo, así que se dispone de la opción de comparar antes y después. Y como el compresor trabaja sobre los recursos del documento y no sobre páginas representadas, el texto sigue siendo texto real: todavía seleccionable, todavía buscable. Solo se recodifican las imágenes.
Comprobar qué ha cambiado
Ambos archivos están en el VFS, así que puede compararlos antes de entregar el resultado al usuario en lugar de adivinar si los ajustes hicieron algo:
// 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;
Muestre la diferencia como porcentaje junto a la descarga en lugar de ofrecer un simple botón: indica al usuario de inmediato si el archivo ahora es lo bastante pequeño para el destino al que va. Si los dos números son casi idénticos, el peso no estaba donde usted estaba comprimiendo.
Ajustar la configuración al documento
| El documento | Activar | Atención a |
|---|---|---|
| Páginas escaneadas, fotos, capturas de pantalla |
ResizeImages, CompressImage, ImageQuality ajustados para pantalla o impresión |
El detalle fino dentro de un escaneo se suaviza primero: compruébelo en High antes de publicarlo |
| Mayormente texto y arte vectorial |
CompressFonts, CompressContents
|
Las ganancias son modestas por naturaleza; no las persiga con ajustes de imagen |
| Contenido mixto | Las tres, con ImageQuality.High
|
El perfil general más seguro, y normalmente el mejor punto de partida |
| Ya optimizado para su distribución | Solo CompressContents
|
Poco que ganar; una recodificación agresiva de imágenes puede costar calidad a cambio de casi nada |
Problemas comunes
El archivo apenas se redujo y el PDF casi no tiene imágenes.
El tamaño proviene de las fuentes o de los flujos de contenido. Active TextCompressionOptions —con UnembedFonts solo si se conoce el entorno de visualización— y añada CompressContents. Los documentos densos en texto responden a esas dos y a nada más.
El texto se representa de forma distinta después de comprimir.
Eso es UnembedFonts haciendo exactamente lo que dice. Vuelva a ponerlo en false y mantenga CompressFonts = true; los datos de fuentes siguen comprimidos, pero los glifos permanecen en el archivo.
Las imágenes se ven suaves o con bloques en la salida.
O el nivel de ImageQuality es demasiado bajo, o ResizeImages redujo una imagen que necesitaba su resolución para impresión. Para cualquier cosa que se vaya a imprimir, empiece por High.
El archivo comprimido tiene el mismo tamaño que el original. Algunos documentos ya están optimizados y no les queda nada significativo que ceder. Verifíquelo con la comparación de bytes anterior en lugar de suponer que los ajustes fallaron.
No ocurre nada en el primer clic.
El módulo WebAssembly se carga de forma asíncrona. Para eso está la comprobación if (!pdfModule) return;: en una aplicación real, desactive el botón hasta que el módulo indique que está listo en lugar de mostrar una alerta.
Preguntas frecuentes
¿A qué palanca debería recurrir primero?
A las imágenes, suponiendo que sean las culpables, pero confírmelo. Si el documento tiene mucho texto y está desproporcionado respecto a su número de páginas, empiece por las fuentes y los flujos de contenido y no toque los ajustes de imagen.
¿Comprimir un PDF hace que su texto sea ilegible o no se pueda seleccionar?
No, y aquí es donde un compresor basado en API se diferencia de las herramientas en línea que rasterizan cada página a un JPEG. El texto sigue siendo texto, el arte vectorial sigue siendo vectorial y solo se tocan los mapas de bits, así que la copia comprimida sigue siendo seleccionable, buscable e imprimible.
¿Puedo comprimir solo una parte de un documento?
El compresor trabaja sobre el documento en su conjunto. Si necesita reducir una parte de un archivo y dejar otra intacta, divida primero el documento, comprima la pieza que lo necesite y vuelva a combinarlas.
¿Puedo conservar el original y ofrecer la copia comprimida como opción?
Sí. CompressToFile escribe en un nombre de archivo nuevo y deja la entrada en el VFS, de modo que ambas versiones están disponibles en la misma sesión: útil cuando el usuario decide cuánta calidad sacrificar.
¿Esto necesita un servidor o puede ejecutarse enteramente en el navegador?
Enteramente. El motor de PDF está compilado a WebAssembly y los archivos se mueven por el VFS, así que el documento nunca sale del dispositivo. Eso importa sobre todo precisamente en los documentos que la gente suele querer reducir: contratos, extractos, expedientes.