> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/web/get-started/samples/webviewer-annotations-nodejs.md).
# Saving and Loading XFDF Annotations in Node.js
Save and load XFDF annotations using files and Node.js backend.
In addition to showing how to add the WebViewer component to a Node.js backend project, this sample expands on annotation functionality by enabling saving and loading the annotation objects into [XFDF](/web/annotation/xfdf.md).
The saving and loading are done through POST and GET HTTP messages that are handled by an `annotationHandler` in the project. The annotations are stored as XFDF strings embedded in the messages and saved as XFDF files on disk.
Follow these steps:
1. Create annotations with annotations tools in the header.
2. Save annotations with the save button in the header.
3. Load annotations by refreshing the app.
4. Locate an XFDF file in server/xfdf folder where the annotations data saved into.
WebViewer provides a slick out-of-the-box responsive UI that enables you to view, annotate and manipulate PDFs and other document types inside any web project.
Click the button below to view the full project in GitHub.
{% tabs %}
{% tab title="index.js" %}
{% code title="index.js" lineNumbers="true" %}
```js
var viewerElement = document.getElementById('viewer');
var DOCUMENT_ID = 'webviewer-demo-1';
WebViewer({
path: 'lib',
initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo.pdf',
documentXFDFRetriever: () => loadXfdfString(DOCUMENT_ID)
}, viewerElement).then(instance => {
var { annotationManager } = instance.Core;
// Add a save button on header
const topHeader = instance.UI.getModularHeader('default-top-header');
const items = topHeader.getItems();
const saveButton = {
type: 'customButton',
img: '',
title: 'Save Annotations',
onClick: function() {
// Save annotations when button is clicked
// widgets and links will remain in the document without changing so it isn't necessary to export them
annotationManager.exportAnnotations({ links: false, widgets: false }).then(function(xfdfString) {
saveXfdfString(DOCUMENT_ID, xfdfString).then(function() {
alert('Annotations saved successfully.');
});
});
}
};
items.push(saveButton);
topHeader.setItems(items);
});
// Make a POST request with XFDF string
var saveXfdfString = function(documentId, xfdfString) {
return new Promise(function(resolve) {
fetch(`/server/annotationHandler.js?documentId=${documentId}`, {
method: 'POST',
body: xfdfString
}).then(function(response) {
if (response.status === 200) {
resolve();
}
});
});
};
// Make a GET request to get XFDF string
var loadXfdfString = function(documentId) {
return new Promise(function(resolve) {
fetch(`/server/annotationHandler.js?documentId=${documentId}`, {
method: 'GET'
}).then(function(response) {
if (response.status === 200) {
response.text().then(function(xfdfString) {
resolve(xfdfString);
})
}
});
});
};
```
{% endcode %}
{% endtab %}
{% tab title="annotationHandler.js" %}
{% code title="annotationHandler.js" lineNumbers="true" %}
```js
const path = require('path');
const fs = require('fs');
module.exports = (app) => {
// Create xfdf folder if it doesn't exist
if (!fs.existsSync('server/xfdf')) {
fs.mkdirSync('server/xfdf');
}
// Handle POST request sent to '/server/annotationHandler.js'
app.post('/server/annotationHandler.js', (request, response) => {
const xfdfFile = path.resolve(__dirname, `./xfdf/${request.query.documentId}.xfdf`);
try {
// Write XFDF string into an XFDF file
response.status(200).send(fs.writeFileSync(xfdfFile, request.body));
} catch(e) {
response.status(500).send(`Error writing xfdf data to ${xfdfFile}`);
}
response.end();
});
// Handle GET request sent to '/server/annotationHandler.js'
app.get('/server/annotationHandler.js', (request, response) => {
const xfdfFile = path.resolve(__dirname, `./xfdf/${request.query.documentId}.xfdf`);
if (fs.existsSync(xfdfFile)) {
response.header('Content-Type', 'text/xml');
// Read from the XFDF file and send the string as a response
response.status(200).send(fs.readFileSync(xfdfFile));
} else {
response.status(204).send(`${xfdfFile} is not found.`);
}
response.end();
});
}
```
{% endcode %}
{% endtab %}
{% endtabs %}
[View the full sample on GitHub](https://github.com/ApryseSDK/webviewer-samples/tree/main/webviewer-annotations-nodejs)
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.apryse.com/web/get-started/samples/webviewer-annotations-nodejs.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.