Some test text!
Welcome to WebViewer User Bookmarks. WebViewer allows users to create bookmarks for each page. When clicked, these bookmarks will navigate to the saved page. In order to persist these bookmarks, WebViewer can easily export them. They can then be saved to a server.
You can enable bookmarks by enabling the following elements. The rest of this guide will demonstrate a ready to go sample and how you can export them.
WebViewer(...)
.then(instance => {
instance.UI.enableElements(['bookmarksPanel', 'bookmarksPanelButton']);
});
webviewer-user-bookmarks-nodejs-sample.zip
. The directory should look something like this:webviewer-user-bookmarks-nodejs-sample
├── ...
├── package.json
├── README.md
├── client
│ ├── lib
│ │ ├── ...
│ ├── index.html
│ ├── index.js
│ └── webviewer-demo.pdf
└── server
├── bookmarks
│ ├── ...
├── bookmarksHandler.js
└── serve.js
sample
folder and install the required dependencies to run the samples by executing:npm install
npm start
You should see a message that reads:
...
Server is listening at http://localhost:3000/client/index.html
http://localhost:3000/client/index.html
and you will see the sample WebViewer. Open the left panel and navigate to the last tab to see bookmarks. You should see the same bookmarks as the image above.The webviewer instance contains the functions exportBookmarks and importBookmarks. You can use these along with AJAX requests to save and load the user bookmark data from a server, and setup the server to write and read XFDF files.
To save user bookmarks, the sample, uses POST
and GET
requests. In the sample you will find fetch request that are similar to the following:
WebViewer(...)
.then(function(instance) {
// load the user bookmarks data for id 'doc123'
fetch('/server/bookmarksHandler.js?documentId=doc123', {
method: 'GET'
}).then(function(response) {
if (response.status === 200) {
response.text().then(function(bookmarksString) {
// {"0":"Bookmark 1","2":"Bookmark 2"}
const bookmarks = JSON.parse(bookmarksString);
instance.UI.importBookmarks(bookmarks);
});
}
});
// ...
// later save the annotation data for doc123
const bookmarks = instance.UI.exportBookmarks();
const bookmarksString = JSON.stringify(bookmarks);
fetch('/server/bookmarksHandler.js?documentId=doc123', {
method: 'POST',
body: bookmarksString // written into a json file on server
});
});
To automatically save user bookmark changes you are able to listen to the `userBookmarksChanged' event. This event fires whenever there is any change to user bookmarks.
instance.UI.addEventListener(instance.UI.Events.USER_BOOKMARKS_CHANGED, e => {
const bookmarks = e.detail;
const bookmarksString = JSON.stringify(bookmarks);
// ...save string to server
});
The sample uses Node.js
as a backend for fulling the POST
and GET
requests, but other backends can also be used.
Get the answers you need: Support
PDFTron SDK
COMPANY