Using API Methods

Unsere Beispiele der Projekte und Berichtsvorlagen helfen Ihnen, die Grundlagen der Arbeit mit unserer Software zu erlernen.
Auf GitHub ansehen
Produkte ✖Reports für React ✖Viewer ✖REST ✖
For finer control you can talk to the viewer directly through its API instead of only reacting to events.

Getting a reference. Create a ref of type StimulsoftViewerHandle and attach it to the component. Through that handle you get access to the viewer's properties and methods:
import React, { useRef, useState, useEffect } from 'react';
import { StimulsoftViewer, StimulsoftViewerHandle } from 'stimulsoft-viewer-react';

export const App: React.FC = () => {
    const viewerRef = useRef<StimulsoftViewerHandle>(null);
    const [zoom, setZoom] = useState<number>(100);
    const [currentPage, setCurrentPage] = useState<number>(0);

    // Poll the viewer state and mirror it into React state
    useEffect(() => {
        const interval = setInterval(() => {
            if (viewerRef.current) {
                setZoom(viewerRef.current.zoom);
                setCurrentPage(viewerRef.current.currentPage);
            }
        }, 200);
        return () => clearInterval(interval);
    }, []);

    return (
        <div>
            Zoom is {zoom}<br />
            Current page {currentPage + 1}<br />
            <input type="button" value="Zoom to 50%"
                onClick={() => { if (viewerRef.current) viewerRef.current.zoom = 50; }} />
            <input type="button" value="Export to PDF"
                onClick={() => { if (viewerRef.current) viewerRef.current.export('Pdf', { ImageResolution: 200 }); }} />

            <StimulsoftViewer ref={viewerRef} requestUrl="/Viewer/{action}" action="InitViewer" height="100vh" />
        </div>
    );
};
The key parts of the API used here:



Because the viewer is not a React state container, the example polls its values every 200 ms and copies them into state so the displayed zoom and page number stay in sync with what the user sees.
Auf GitHub ansehen Herunterladen
Hallo! Brauchen Sie Hilfe?