Using API Methods

Наши примеры проектов и шаблоны отчётов помогут Вам разобраться в основах работы с нашими продуктами.
Открыть на GitHub
Продукты ✖Reports для React ✖Вьювер ✖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.
Открыть на GitHub Скачать
Используя этот сайт, вы соглашаетесь на использование файлов Cookie для аналитики и персонализированного контента. Файлы Cookie хранят полезную информацию на вашем компьютере, чтобы помочь нам повысить эффективность и удобство использования. Для получения дополнительной информации, пожалуйста, прочтите Конфиденциальность и Использование Cookie.
Я согласен