Rotating PDF pages using JavaScript
Important: Rotation changes PDF identity and affects annotations
When you rotate pages, the document’s internal pdfId changes. This affects Instant JSON compatibility, so if you’re storing Instant JSON for later use, you’ll need to handle this properly.
If you store Instant JSON with pdfId:
// Remove `pdfId` before persisting to avoid PDF ID mismatch errors.const {pdfId, ...instantJSON} = await instance.exportInstantJSON()await saveToDatabase(instantJSON)Annotations rotate with pages
When you rotate a page, existing annotations are transformed so they keep their visual position relative to the rotated page. This is the expected behavior for most annotation types.
Web SDK doesn’t currently support the noRotate flag. Per the PDF specification, note annotations behave as if NoRotate were always set, so NoteAnnotation icons are always rendered upright, regardless of the flag value. This is separate from an annotation’s own rotation property.
Learn more about handling pdfId with document operations.
The rotatePages operation will rotate the specified pages by the desired amount; only multiples of 90 under 360 are allowed as values.
If the page is already rotated, this will add the specified rotation, so if a page is already rotated 90 degrees and you apply a 90-degree rotation, it’ll result in the page being rotated 180 degrees:
instance.applyOperations([ { type: "rotatePages", pageIndexes: [0], // Rotate page 0. rotateBy: 90 // Rotate page 90 degrees clockwise. }]);After this operation is complete, call exportPDF to get a buffer containing the data for the final PDF.
If you need to apply this operation and export in one step, you can provide the same argument you provide to applyOperations to exportPDFWithOperations to get a buffer containing the data for the final PDF.
Keeping annotations fixed while rotating pages
To keep annotations at their original page coordinates during rotatePages, cache the complete annotation records for the pages you’re rotating, rotate the pages, and then update those annotations with the cached records. This restores type-specific geometry such as markup rects, ink lines, the text annotation callout, and shape points.
Use this approach only with rotatePages. Other page operations, such as addPageMargins or deletePages, can change page indexes or page coordinates, so restoring cached annotation records after those operations can place annotations on the wrong page or at the wrong position.
async function getAnnotationsForPages(instance, pageIndexes) { const annotationsToRestore = [];
for (const pageIndex of pageIndexes) { const annotations = await instance.getAnnotations(pageIndex);
annotations.forEach((annotation) => { annotationsToRestore.push(annotation); }); }
return annotationsToRestore;}
async function rotatePagesWithoutMovingAnnotations( instance, pageIndexes, rotateBy) { const annotationsToRestore = await getAnnotationsForPages( instance, pageIndexes );
await instance.applyOperations([ { type: "rotatePages", pageIndexes, rotateBy } ]);
if (annotationsToRestore.length > 0) { await instance.update(annotationsToRestore); }}