PDFViewer

ic.PDFViewer renders PDF documents with page navigation, zoom, fit-to-width/page, and rotation controls. It accepts a local file path or URL as Value (via ic.Asset), and the toolbar can be fixed at the top or shown only on hover.

Toolbar and controls

ToolbarMode switches between "toolbar" (always visible at the top) and "hover" (floating bar that appears when the mouse enters the viewer). The four Show* properties toggle individual control groups: ShowPageControls for page navigation, ShowZoomControls for zoom buttons and percentage, ShowFitButton for fit-to-width and fit-to-page, and ShowRotateButton for 90-degree rotation.

Zoom and page

Zoom sets the zoom level as a percentage (100 = actual size, range 10-500). Page sets the current page number. Both update reactively when the user interacts with the controls or scrolls through the document. NumPages is read-only and gets set after the document loads.

Height

Height accepts a pixel value or any CSS size string. Defaults to "100%".

Loading a PDF

Value accepts a file path, URL, or ic.Asset. The viewer fetches files through MATLAB (not the browser), so local paths work. After loading, NumPages is set and the Loaded event fires. If something goes wrong, the Error event fires and the viewer shows an error icon.

viewer = ic.PDFViewer();

% Local file
viewer.Value = "C:\reports\annual.pdf";

% URL
viewer.Value = "https://example.com/doc.pdf";

% From a variable (ic.Asset auto-converts)
viewer.Value = myAssetVariable;

% Read the page count after loading
disp(viewer.NumPages);

Events

PageChanged fires when the user navigates to a different page. ZoomChanged fires on zoom changes. Loaded fires once the document is ready, with the total page count. Error fires if the PDF fails to load.

Navigation and zoom methods

nextPage() and previousPage() step through pages. zoomIn() and zoomOut() adjust zoom by 25%. fitWidth() scales the page to fill the viewer width, fitPage() scales to fit the entire page in view.

Custom styling

You can target .ic-pdfv (the container), .ic-pdfv__toolbar (the top bar), .ic-pdfv__btn (the control buttons), .ic-pdfv__viewport (the scroll area), .ic-pdfv__page (the page wrapper and shadow), or .ic-pdfv__hover-bar (the floating controls in hover mode).

viewer = ic.PDFViewer();
viewer.Value = "report.pdf";

% Rounded container
viewer.css.style(".ic-pdfv", ...
    "border_radius", "10px", ...
    "border_color", "#c4b5fd");

% Tinted toolbar with pill-shaped buttons
viewer.css.style(".ic-pdfv__toolbar", ...
    "background", "linear-gradient(135deg, #ede9fe, #ddd6fe)", ...
    "border_bottom_color", "#c4b5fd", ...
    "padding", "5px 12px", ...
    "gap", "4px");

viewer.css.style(".ic-pdfv__btn", ...
    "border_radius", "12px", ...
    "width", "28px", ...
    "height", "28px", ...
    "color", "#7c3aed");

viewer.css.style(".ic-pdfv__btn:hover", ...
    "background_color", "#c4b5fd", ...
    "color", "#4c1d95");

% Tinted viewport background
viewer.css.style(".ic-pdfv__viewport", ...
    "background_color", "#f5f3ff");

% Page shadow
viewer.css.style(".ic-pdfv__page", ...
    "box_shadow", "0 2px 12px rgba(124, 58, 237, 0.15)");