Did you find this guide helpful?
Some test text!
Web / Guides / Add layer
Make sure you have Full API enabled in WebViewer.
To add a PDF layer or OCG (optional content group) to a new document.
<html>
<script src="../lib/core/webviewer-core.min.js"></script>
<script src="../lib/core/pdf/PDFNet.js"></script>
<script>
(async function() {
Core.setWorkerPath('../lib/core');
let doc = await PDFNet.PDFDoc.create();
const builder = await PDFNet.ElementBuilder.create();
const writer = await PDFNet.ElementWriter.create();
// Create a layer
const imageLayer = await PDFNet.OCG.create(doc, 'Image Layer');
const cfg = await PDFNet.OCGConfig.create(doc, true);
cfg.setName('Default');
// Add the new OCG to the list of layers that should appear in PDF viewer GUI.
let layerOrderArray = await doc.createIndirectArray();
cfg.setOrder(layerOrderArray);
layerOrderArray.pushBack(await image_layer.getSDFObj());
// Start a new page
const page = await doc.pageCreate();
writer.beginOnPage(page); // Begin writing to the page
// Add new content to the page and associate it with one of the layers.
const nullEncoderHints = new PDFNet.Obj('0');
const img = await PDFNet.Image.createFromURL(doc, imagename, nullEncoderHints);
const img_obj = await img.getSDFObj();
img_obj.put('OC', imageLayer);
writer.writePlacedElement(await builder.createImageScaled(img, 300, 600, 200, -150));
await writer.end(); // save changes to the current page
doc.pagePushBack(page);
})()
</script>
</html>PDF layers (OCG)
Full sample code which demonstrates how to create, extract, render PDF layers.
Get the answers you need: Chat with us