Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-04-21 21:47:17 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5
ToolJet/docs/versioned_docs/version-3.16.0-LTS/widgets/pdf.md
Pratik Agrawal 27e78409d7
[docs]: App Builder Sprint (#14879) 
* [docs]: App Builder Sprint

* minor formatting

* html and reset query

* form styles

* minor updates

* Components UI/UX style enhancements

* table img updates
2026-01-21 11:23:40 +05:30

4.5 KiB
Raw Blame History

id title
pdf PDF

The PDF component can be used to embed PDF files either by URL or through Base64 code.

Compatibility

The PDF component is compatible with the following browser versions:

<div style={{ width:"100px"}}> Browser <div style={{ width:"100px"}}> Version
Chrome 92 or later
Edge 92 or later
Safari 15.4 or later
Firefox 90 or later

If the PDF component is integrated into your application, it will only render in supported browsers.

Properties

<div style={{ width:"100px"}}> Property <div style={{ width:"100px"}}> Description
File URL Under this property, you can enter the URL of the PDF file to display. Base64 format is also supported, the input needs to be prefixed with data:application/pdf;base64,.
Scale page to width The Scale page to width property automatically adjusts the PDF to fill the entire width of the component.
Show page controls By default, when hovering over the PDF file, buttons for the previous and next page, along with the page number, are displayed. They can be toggled on or off using the Show page controls toggle.
Show the download The Download button on the PDF component allows you to download the PDF file. By default, Show the download button is enabled. Toggle it off to remove the Download button from the PDF component.

Component Specific Actions (CSA)

There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.

Exposed Variables

There are currently no exposed variables for the component.

General

Tooltip

To display instructional text when a user hovers over the PDF component, add some text under the Tooltip property.

Devices

<div style={{ width:"100px"}}> Property <div style={{ width:"100px"}}> Description <div style={{ width:"135px"}}> Expected Value
Show on desktop Makes the component visible in desktop view. You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
Show on mobile Makes the component visible in mobile view. You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.

Styles

<div style={{ width:"100px"}}> Property <div style={{ width:"150px"}}> Description <div style={{ width:"250px"}}> Configuration Options
Visibility Controls component visibility. Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
Border color Sets the border color of the PDF viewer. Select a color from the color picker or set it programmatically using fx.
Border radius Sets the corner radius of the PDF viewer. Enter a numeric value (default: 6) or set it programmatically using fx.

:::info Any property having fx button next to its field can be programmatically configured. :::