Flatten Annotations

Annotation flattening refers to converting editable annotations into non-editable, non-modifiable static images or plain text forms. When the annotations are flattened, all editable elements of the entire document (including comments and forms) will be flattened, so the annotation flattening is also known as document flattening.

This example shows how to flatten annotations:

let docViewer = null
ComPDFKitViewer.init({
  pdfUrl: 'Your PDF Url',
  license: 'Input your license here',
  // other options
}, viewer)
  .then((core) => {
    docViewer = core.docViewer;
    docViewer.addEvent('documentloaded', () => {
      console.log('ComPDFKit Web Demo loaded');
    })
  });

const downloadBtn = document.getElementById('downloadBtn')
downloadBtn.addEventListener('click', async () => {
  const docStream = await docViewer.flattenPdf();
  const docBlob = new Blob([docStream], { type: 'application/pdf' });
});

Save to the local file system

const fileName = "document.pdf";

const url = URL.createObjectURL(docBlob);
const a = document.createElement("a");
a.href = url;
a.style = "display: none";
a.download = fileName;
document.body.appendChild(a);
a.click();
URL.revokeObjectURL(url);
document.body.removeChild(a);

Save to the server

const fileName = 'document.pdf';

const data = new FormData();
data.append('file', docBlob, fileName);

const res = await fetch('https://example.com/api/test', {
  method: 'POST',
  body: data,
});