Open plugin

The open plugin provides a button that can be used to open a PDF document in your computer. It is possible to customize the button as well.

Install

npm install '@react-pdf-viewer/open';
The open plugin is included in the toolbar and default-layout plugins

Usage

1. Import the plugin and styles
import { openPlugin } from '@react-pdf-viewer/open';
// Import styles
import '@react-pdf-viewer/open/lib/styles/index.css';
2. Create the plugin instance
const openPluginInstance = openPlugin(props?: OpenPluginProps);
The openPlugin() function takes an optional OpenPluginProps parameter that consists of the following property:
(? denotes an optional property)
PropertyTypeDescriptionFrom
enableShortcuts?booleanEnable shortcuts2.9.0
By default, the shortcuts are enabled. Users can press ctrl + O to open a document.
The plugin instance openPluginInstance provides the following properties:
PropertyTypeDescriptionFrom
OpenReactElementCustomizable open button2.0.0
OpenButtonReactElementThe default open button2.0.0
OpenMenuItemReactElementThe default open menu item2.5.0
3. Register the plugin
Register the open plugin instance:
<Viewer plugins={[openPluginInstance]} />

Properties

The open plugin provides other useful property as following:
import { OpenFileIcon } from '@react-pdf-viewer/open';
PropertyTypeDescriptionFrom
OpenFileIconReactElementThe open file icon2.0.0

See also

Changelog

v2.9.0
  • Support shortcuts
v2.4.1
  • The Open file button covers other elements, so we can't click on the Download or Print buttons. This issue only happens on Safari 14
v2.0.0
  • First release