[acceptKeys] | Accepts a comma-separated list of keys. For example, a legal value is "['P', 'N']". Every key in the list is accepted, and every other key is ignored. In the example, the key "n" navigates to the next page but "k" does not. | (none) |
[(activeSidebarView)] | Two-way-binding attribute determining the current sidebar view. The legal values are defined in the enum PdfSidebarView: 1 (thumbnails), 2 (outline), 3 (attachments), and 4 (layers). If you're only interested in the event, the event name is (activeSidebarViewChange). Note if you pass a value that's not supported by the PDF document the attribute is ignored. | 1 (thumbnails) |
(afterPrint) | This event is fired after the print jov has either been sent to the printer, or after the user has cancelled the print job. Note there's no way to tell printing from aborting the print. | |
(annotationEditorEvent) | This event is fired when the user add, edits, or removes an editor annotation | |
(annotationEditorModeChanged) | This event fires after activating or hiding on of the editors. $event.mode tells you what happened precisely: 0=editor has been closed; 3=text editor, 15=ink draw editor. | |
(annotationLayerRendered) | Fires each time a page has finished rendering the annotation layer (i.e. forms or the stuff added by the editor buttons). Emits an instance of AnnotationLayerRenderedEvent. The pageNumber attribute tells you which page has been rendered. When you receive this event, you can safely add text, images, or drawings to the annotation layer. | undefined |
[authorization] | This attribute is designed to activate server-side authorization. If this attribute has a (string) value, the attribute withCredentials is set to true. If you're using Keycloak, you can pass the bearer token with this attribute. Note that you have to add the prefix "Bearer: " (with a capital B and a trailing space). To support other authorization servers, you can also set additional headers using the attribute [httpHeaders]. Sometimes you need to set the withCredentials attribute without setting the authorization header. If set, set [authorization]="true". | undefined |
[backgroundColor] | Background color of the PDF viewer. This setting affects the free area to the right and to the left hand side of the PDF file. | #e8e8eb |
[base64Src] | Accepts a PDF file as base64 encoded string | |
(beforePrint) | This event is fired when the print is initiated. Note that this simply means the print preview window is opened. There's no way to predict if the user is actually going to print. | |
[contextMenuAllowed] | Should the context menu show when the right-hand side button is clicked? | true |
(currentZoomFactor) | Fires each time the viewer changes the zoom level. The parameter is the numeric scale factor. Note that it's not a percentage; instead, [zoom]="'100%'" results in (currentZoomFactor) sending a value of 1.0. This event seems to fire often enough to make it reliable for detecting the current zoom factor all the time. | n/a |
[customFindbarButtons] | Allows you to customize the pop-up dialog that opens when you click the "find" button. See https://pdfviewer.net/custom-toolbar. | (none) |
[customFindbarInputArea] | Allows you to customize the pop-up dialog that opens when you click the "find" button. See https://pdfviewer.net/custom-toolbar. | (none) |
[customFreeFloatingBar] | Allows you to add a toolbar you can place anywhere on the PDF viewer. The original use case was to let the zoom controls hover as a separate window at the bottom of the PDF file. See https://pdfviewer.net/custom-toolbar. | (none) |
[customSecondaryToolbar] | Allows you to replace the kebab menu on the right-hand side with your custom menu. | (none) |
[customSidebar] | Allows you to replace the entire toolbar with your own custom toolbar. See https://pdfviewer.net/custom-sidebar. | (none) |
[customThumbnail] | Allows you to implement custom thumbnails in the sidebar. See https://pdfviewer.net/custom-thumbnails. | (none) |
[customToolbar] | Allows you to replace the entire toolbar with your own custom toolbar. See https://pdfviewer.net/custom-toolbar. | (none) |
delayFirstView | Number of milliseconds to wait between initializing the PDF viewer and loading the PDF file. Most users can let this parameter safely at it's default value of zero. Set this to 1000 or higher if you run into timing problems (typically caused by loading the locale files after the PDF files, so they are not available when the PDF viewer is initialized). | 0 |
[disableForms] | Disable or enable an AcroForm or XFA form in the PDF file. | false |
[enableDragAndDrop] | Setting this attribute to false disables dragging and dropping a PDF file to the PDF viewer. | true |
[enablePrint] | Setting this flag to false disables printing the PDF file. | true |
[enablePrintAutoRotate] | By default, the viewer rotates landscape pages in documents that have both portrait and landscape pages. Setting this flag to false deactivates the rotation. As a side effect, landscape pages are printed a bit smaller. | true |
[filenameForDownload] | Allows the user to define the name of the file after clicking "download" | document.pdf |
[(findbarVisible)] | This attribute allows you to show the findbar programmatically. Used as an event, it tells you when the user opens or closes the findbar. | false |
[forceUsingLegacyES5] | Forces ngx-extended-pdf-viewer to run the ES2015 version of pdf.js. USe this only in case of an emergency, because the browser detection of ngx-extended-pdf-viewer is fairly sophisticated and the ES2015 comes at a performance penalty. Note that this attribute had gone lost when developing version 21, and it's only back since version 21.4.6. If you have to use an older 21.x version and can't update, use pdfDefaultOptions.needsES5 = true; instead. | false |
[(formData)] | Two-way binding between a hashmap in Angular and the content of an AcroForm or XFA form in the PDF file. | undefined |
[(handTool)] | Setting this flag to true, activates the "hand tool" to scroll the PDF file by dragging. Setting this to false activates the "text selection" tool. You can also use this flag as a two-way binding attribute. If you're only interested in the event, the event name is (handToolChange). Deactivating this flag also activates the "text layer". This, in turn, enables marking text and highlighting search result. | true |
[height] | Define the height of the PDF window. By default, it's 100%. Unfortunately, on most web pages, 100% translates to a height of 0 pixels. In this case, the height is set to fill all the available space. More precisely, the all the space to the bottom of the window. If that's less then 100 pixels, the height is set to 100 pixels. Note that this is just an initial setting. It doesn't change when the window is resized. You can also use [height]="auto" to use all the available screen estate. | (see description) |
[httpHeaders] | If you pass a JSON object to httpHeaders, the content of the JSON object is sent to the server as an array of additional httpHeaders. | (none) |
[ignoreKeyboard] | If this flag is set to true, the PDF viewer ignores every keyboard event. | false |
[ignoreKeys] | Accepts a comma-separated list of keys. For example, a legal value is "['P', 'N']". Every key in the list is ignored. In the example, the key "k" navigates to the next page but "n" does not. | (none) |
imageResourcesPath | Allows you to put the viewer's SVG files into an arbitrary folder. | ./assets/images |
language | Language of the UI. Must the the complete locale name, such as "es-ES" or "es-AR". It may be all lowercase. | undefined |
listenToURL | Deactivates the URL listener of the PDF viewer. You can set it to "true" to allow for anchor tags like "#page=23" or "#nameddest=chapter_3". Only activate this flag if you don't use the anchor to encode the URLs for the router. | false |
localeFolderPath | Allows you to put the locale folder into an arbitrary folder. | ./assets/locale |
[logLevel] | Log level. Legal values: VerbosityLevel.ERRORS (=0),VerbosityLevel.WARNINGS (=1), and VerbosityLevel.INFOS (=5). The higher the log level, the more is logged. Please note that the log level is only updated when a new PDF document is loaded programmatically (i.e. when [src]changes). | 1 |
maxZoom | Maximum zoom factor you can achieve by pinching or by hitting the "+" button or the "+" key. | 10 |
[minHeight] | Most of the time, ngx-extended-pdf-viewer chooses a reasonable height. If it doesn't, use the attribute [height]. But sometimes this isn't enough. If you want to define a mandatory lower limit of the heigt, use [minHeight]. Don't forget to add the unit (i.e. px, vh, %, pt, etc.) | undefined |
minifiedJSLibraries | Since version 4.0.0, ngx-extended-pdf-viewer loads the minified pdf.js libraries by default. You can set this flag to load the human-readable files. However, in most cases this shouldn't be necessary due to the source map files. Using the human-readable files give you a performance penalty. | true |
minZoom | Minimum zoom factor you can achieve by pinching or by hitting the "-" button or the "+" key. | 0.1 |
[mobileFriendlyZoom] | Increases the size of the UI elements so you can use them on small mobile devices. Must be a percentage ( '150%') or a floating-point number ('1.5'). Alternatively you can set this attribute to 'true' (= '150%') or 'false' (= '100%'). | 100% |
[nameddest] | Allows you to jump to a "named destination" inside the document. Typical examples of names destinations are "chapter_7" oder "image_3". The named destination are defined within the PDF document; you can only jump to destinations defined by the author of the PDF file. | undefined |
[(page)] | Two-way binding attribute to determine the page to display; more precisely: [page]="25" makes the PDF viewer show page 25 (at any time - even after load time); [(page)]="attribute" updates the attribute each time the user scrolls to another page. If you're only interested in the event, that's (pageChange). | undefined |
[(pageLabel)] | Two-way binding attribute to determine the page to display; more precisely: [pageLabel]="25" makes the PDF viewer show the page the author called page "25". This may or may not be a numeric value. For instance, many books use roman numbers for the preface and arab numbers for the rest of the document. In this case, [pageLabe]="iv" usually refers to the same page as [page]="4". [(pageLabel)]="attribute" updates the attribute each time the user scrolls to another page. If you're only interested in the event, that's (pageLabelChange). | undefined |
(pageRender) | Fires each time a page is about to be rendered. Emits an instance of PageRenderEvent. | undefined |
(pageRendered) | Fires each time a page has finished rendering. Emits an instance of PageRenderedEvent. The pageNumber attribute tells you which page has been rendered. When you receive this event, you can safely manipulate the page image or the text layer. | undefined |
(pagesLoaded) | _Broken since version 19!_ Emits the number of pages when a document is loaded; more precisely: emits an instance of PagesLoadedEvent. The attribute pagesCount tells how many pages the document has. The source attribute contains a reference to the PDF viewer. You can also use this event to detect when a document has been loaded. | undefined |
[(pageViewMode)] | pageViewMode="multiple" is the default PDF viewer. It shows the entire PDF files as a long roll of pages, just as Acrobat reader does. pageViewMode="infinite-scroll" displays the entire PDF file without scrollbar. pageViewMode="single" only displays one page at a time. You can't scroll to the next page. The only way to navigate to another page is to click on the "next page/previous page" button, enter a page number, jump to the next result of a search, and to click on an entry of the table of contents. Starting with version 17.3.0, this attribute is a two-way binding attribute. | multiple |
[password] | Allows you to pass a password programatically. If you pass the wrong password, a red error message claiming "corrupt pdf file" is show in below the toolbar. Caveat: the password must be a string. During my test I accidentially used a numerical value. This fails even if the password consists only of digits. Please note that the password is stored in the main memory without encryption. If you're really serious about protecting your user's data from hackers, this might be a security issue. Please note that the log level is only updated when a new PDF document is loaded programmatically (i.e. when [src]changes). | undefined |
[pdfBackgroundColor] | By default, the PDF file is rendered on a white canvas. You can use [pdfBackgroundColor] to assign a different color to the background canvas. This includes the alpha channel. In other words, you can render the PDF file on a transparent background, allowing a custom background to shine through. However, as of version 10.5.0-alpha.0, using a transparent or partially transparent background doesn't work reliably (yet). | white |
(pdfDownloaded) | Fires when a user downloads a document. Strictly speaking, it fires when they click the "download" button. Caveat: Even if the user cancels the download, the event is fired. | undefined |
(pdfLoaded) | Emits when the PDF file has been load successfully. The parameter \$event is an PdfLoadedEvent, containing the number of pages of the PDF file. | undefined |
(pdfLoadingFailed) | Emits when trying to load and open a PDF file has failed. The parameter $event is an Error, which may or may not contain the stacktrace and additional info about the root cause of the error. | undefined |
(pdfLoadingStarts) | Emits when the PDF file is going to load soon. | undefined |
[printResolution] | Set the print resolution in DPI. Sensible values are 300, 600, and maybe even 900. Note that higher values result in more memory consumption, more CPU uses, and may even cause browser crashes. During my tests setting the resolution to 1100 dpi worked, but 1150 failed. In my case, the browser seemed to ignore the print request without displaying any error message. | 150 |
(progress) | Emits while the PDF file is loading ( type="load") or printing (type="print") Note that the events objects are slightly different between printing and loading. To avoid confusion, check the type field of the ProgressBarEvent or rely on the field percent, which is populated in both cases. | undefined |
[(propertiesDialogVisible)] | This attribute allows you to show the document properties dialog programmatically. Used as an event, it tells you when the user opens or closes the document properties dialog. | false |
[(rotation)] | [rotation] allows you to rotate every page. Note that this attribute is not responsible to rotate individual pages - it always rotates the entire document. (rotationChange) notifies you when the user rotates the document. This attribute can be used as a two-way binding attribute, i.e. [(rotation)]="angle". Legal values are 0, 90, 180, and 270. Every other value is ignored. | 0 |
[scrollMode] | Determines whether the pages scroll vertically ( [scrollMode]="0") or horizontally like a script role ([scrollMode]="1"). The third option is the block mode ([scrollMode]="2"), which also scrolls vertically, but arranges as many pages as the screen width allows side-by-side. Starting with pdf.js, there's also [scrollMode]="3", which is a single-page mode. It's a good choice for documents containing more than a few thousand pages (because of performance reasons). | 0 |
[showBookmodeButton] | Show or hide the "book mode" button | 'always-in-secondary-menu' |
[showBorders] | By default, the PDF file is displayed with page borders. You hide them by setting [showBorders]="false". Note that the page borders can be switched off and on even after the PDF file is diplayed, but if you're using one of the zoom presets (auto, page-width etc.), the page isn't resized correctly. | true |
[showDownloadButton] | Show or hide the "download" button (aka "save" button) | 'hiddenSmallView' |
[showDrawEditor] | This attribute allows you to hide the drawing editor button. | 'hiddenTinyView' |
[showFindButton] | Show or hide the "find" button. Note that the button is only shown if the document supports a text layer. | 'always-visible' |
[showFindEntireWord] | Show or hide the "match entire word" checkbox in the find bar. | true |
[showFindHighlightAll] | Show or hide the "highlight all" checkbox in the find bar. | true |
[showFindMatchCase] | Show or hide the "case sensitive" checkbox in the find bar. | true |
[showFindMatchDiacritics] | Show or hide the "match diacritics" checkbox in the find bar. | true |
[showFindMultiple] | Show or hide the "multiple words" checkbox in the find bar. | true |
[showFindRegexp] | Show or hide the "match regular expression" checkbox in the find bar. | false |
[showFirstAndLastPageButtons] | Show or hide the buttons to navigate between pages and the input field to navigate to a particular input field. The default value of the page number input field is 'hiddenXXSView'. | 'sm' |
[showHandToolButton] | Show or hide the "hand tool" menu item in the secondary toolbar. (The hand tool allows you to move the page by clicking and dragging). This activates also the opposite menu item: "text selection tool". As a side effect, the hand tool also activates the "text layer". This, in turn, enables marking text and highlighting search result. Setting this attribute to true is equivalent to setting it to ''hiddenXXLView'; | false |
[showHighlightEditor] | This attribute allows you to hide the highlight editor button. | 'hiddenTinyView' |
[showHorizontalScrollButton] | Show or hide the "scroll horizontally" button | 'always-in-secondary-menu' |
[showInfiniteScrollButton] | Show or hide the "infinite scroll" button | 'always-in-secondary-menu' |
[showOpenFileButton] | Show or hide the "open file" button | 'hiddenMediumView' |
[showPageLabel] | Show or hide the buttons to navigate between pages and the input field to navigate to a particular input field. The default value of the page number input field is 'hiddenXXSView'. | 'lg' |
[showPageNumber] | Show or hide the buttons to navigate between pages and the input field to navigate to a particular input field. The default value of the page number input field is 'hiddenXXSView'. | 'xs' |
[showPagingButtons] | Show or hide the buttons to navigate between pages and the input field to navigate to a particular input field. The default value of the page number input field is 'hiddenXXSView'. | 'hiddenTinyView' |
[showPresentationModeButton] | Show or hide the "full screen" button. Setting this attribute to true is equivalent to setting it to 'hiddenLargeView'. | false |
[showPreviousAndNextPageButtons] | Show or hide the buttons to navigate between pages and the input field to navigate to a particular input field. The default value of the page number input field is 'hiddenXXSView'. | 'xxs' |
[showPrintButton] | Show or hide the "print" button | 'hiddenSmallView' |
[showPropertiesButton] | Show or hide the "document properties" button | 'always-in-secondary-menu' |
[showRotateButton] | Show or hide the "rotate" menu items. This is a convenience attribute covering both [showRotateCwButton] and [showRotateCcwButton] | 'hiddenXLView' |
[showRotateCcwButton] | Show or hide the "rotate counter-clockwise" menu item | 'hiddenXLView' |
[showRotateCwButton] | Show or hide the "rotate clockwise" menu item | 'hiddenXLView' |
[showScrollingButton] | removed with version 18.0.0. Use [showBookModeButton], [showSinglePageModeButton], [showVerticalScrollButton],[showHorizontalScrollButton], and [showInfiniteScrollButton] instead. | n/a |
[showSecondaryToolbarButton] | Show or hide the secondary toolbar (the menu hiding behind the arrows at the right-hand side) | true |
[showSidebarButton] | Show or hide the button to toggle the sidebar | true |
[showSinglePageModeButton] | Show or hide the "single page mode" button | 'always-in-secondary-menu' |
[showSpreadButton] | Show or hide the "spread" menu items in the secondary toolbar. Also see the attribute [(spread)] below. | true |
[showSpreadButton] | Show or hide the three spread-mode buttons | 'always-in-secondary-menu' |
[showStampEditor] | This attribute allows you to hide the button that allows you to add an image to the PDF file. | 'hiddenTinyView' |
[showTextEditor] | This attribute allows you to hide the text editor button. | 'hiddenTinyView' |
[showToolbar] | Show or hide the toolbar | true |
[showUnverifiedSignatures] | The base library, pdf.js, does not show signatures for a good reason. Signatures can't be verified (yet), so there's always the danger so show faked signatures, leading the readers to wrong conclusion. So proceed with care. If you insist, ngx-extended-pdf-viewer allows you to display signatures by setting [showUnverifiedSignatures]="true". Note that you also have to disable form support. Also note that ngx-extended-pdf-viewer adds a hint making the reader aware of the potentially falsy signature. | false |
[showVerticalScrollButton] | Show or hide the "scroll vertically" button | 'always-in-secondary-menu' |
[showWrappedScrollButton] | Show or hide the "wrapped (or combined) scroll" button | 'always-in-secondary-menu' |
[showZoomButtons] | Show or hide the "zoom" area (containing of the buttons "+" and "-" and the dropdown menu) | 'always-visible' |
[showZoomDropdown] | Show or hide the "zoom" dropdown menu | 'xs' |
[(sidebarVisible)] | Two-way-binding attribute determining whether the sidebar is visible. If you're only interested in the event, the event name is (sidebarVisibleChange). | undefined |
[(spread)] | Determines if you're seeing one page or two pages at once (like a paper book). 'off' means there's only one page. 'odd' is the traditional book-like view, with two pages side-by-side. 'even' is similar, only the first page is displayed alone. | off |
[(src)] | If [src] is a string: defines the URL of the PDF file to display. src may also be a Blob, a Uint8Array, an URL or an ArrayBuffer. To a limited extend, [(src)] is also a two-way binding attribute. If the user opens another PDF file, the event (srcChange) is fired. There's a catch: for security reasons, most browsers don't display the correct filename. Most often than not, the path is C:\fakepath\. The (srcChange) event removes the fakepath bit of the path. The $event attribute is simply the filename. But don't rely on it: it's up to the browser to implement that feature. | |
[startTabindex] | By default, the PDF viewer leaves it to the browser to determine the correct tab index. You can set the tab indexes explicitly by setting [startTabindex]="100". Note that there are roughly 40, 50 buttons and menu items. It's a good idea to reserve a range of - say - 100 indexes for the PDF viewer. | undefined |
textLayer | Allows you to activate or deactivate the text layer. If this flag is set to false, both the "find" button and the "select tool" are hidden. If you don't set this flag explicitely, it's automatically set by [handTool] and [showHandToolButton]. The text layer is shown by default if and only if [handTool]="false" or [showHandToolButton]="true". As a rule of thumb, you always want to activate the text layer unless you run into performance problems. | undefined |
(textLayerRendered) | This callback is called when the text layer is rendered. | undefined |
[theme] | The PDF viewer ships with a light theme and a dark theme. The third option is 'custom'. In this case you're responsible for defining the colors and CSS rules. | 'light' |
(updateFindMatchesCount) | This event is call during a find operation. Note that it can be called hundreds or even thousands of time, due to the asynchronous implementation of the find algorithm. It sends a FindFindResultMatchesCount. | undefined |
(updateFindState) | This event is called during the find operations. It sends a FindState(i.e. FindState.FOUND, FindState.NOT_FOUND, FindState.PENDING or FindState.WRAPPED). | undefined |
useInlineScripts | If this flag is set to true, the PDF viewer loads fewer JavaScript files from the server. Unfortunately, this breaks compatibility to the Content Security Policy (CSP). If you're using CSP, set this attribute to false. If you're declaring CSP in a meta tag, the viewer sets the flag automatically to false. | true |
[(zoom)] | [zoom]="undefined" (default value): use the zoom level "auto". If not undefined: Set the zoom level of the page, no matter which zoom level was previously configured. Legal values are [zoom]="'auto'", 'page-actual'", "'page-fit'", "'page-width'", "50%", or 50 (or any other numeric value). Numbers are always considered percentages; the trailing "%" character is optional. This attribute supports two-way binding. [(zoom)]="zoomAttribute" updates the variable zoomAttribute each time the user changes the zoom setting. This is useful to use the same zoom across multiple PDF viewer instances or PDF document. If you're only interested in the event, that's (zoomChange), described in some more detail below. | undefined |
(zoomChange) | (zoomChange) is intended to fire when the user changes the zoom setting. If the zoom setting because of a different reason, such as resizing the window, the event does not fire. That's the difference to (currentZoomFactor), which fires on every zoom event. In practice, it's a bit difficult to distinguish the two types of events, so chances are (zoomChange) fires too often or too seldom. However, when it fires, it fires a numeric value, basically the percentage without the percent character. It never fires when the zoom dropdown is set to [zoom]="'auto'", 'page-actual'", "'page-fit'" or "'page-width'". That also applies if it was the user who changed the dropdown. Putting it in simpler words: the event is not fired if the zoom is a string value. | undefined |
[zoomLevels] | This attribute allows you to use custom zoom levels. It's an array of strings and numbers. The default value is ['auto', 'page-actual', 'page-fit', 'page-width', 0.5, 1, 1.25, 1.5, 2, 3, 4] | undefined |