Interface: TextComparisonConfiguration

PSPDFKit.TextComparisonConfiguration

This describes the properties of a PSPDFKit.loadTextComparison configuration.

Members



Members

(nullable) baseCoreUrl: string

optional

This allows you to overwrite the auto-detected URL for the Core worker Text Comparison UI assets in Standalone mode. This setting may be necessary when you integrate TextComparison UI for Web JavaScript in an environment that limits the size of the static assets, like Salesforce.

If your Core assets are served from a different origin, you have to include proper CORS headers: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

This must end with a trailing slash, and the Core assets (pspdfkit-[hash].wasm.js and pspdfkit-[hash].wasm) must be located in a pspdfkit-lib subfolder accessible from the baseCoreUrl.

Type:
  • string
Default Value:
  • Auto-detected it will use the same value as `baseUrl` if set, or the auto-detected value from the currently executed `<script>` tag.
Example
PSPDFKit.loadTextComparison({ baseCoreUrl: 'https://public-server.pspdfkit.com/pspdfkit-core/' });

(nullable) baseUrl: string

optional

This allows you to overwrite the auto-detected URL for all PSPDFKit assets. This setting is necessary when you load Text Comparison UI for Web JavaScript from a different URL.

If your assets are served from a different origin, you have to include proper CORS headers: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

This must end with a trailing slash.

Type:
  • string
Default Value:
  • Auto-detected based on the currently executed `<script>` tag.
Example
PSPDFKit.loadTextComparison({ baseUrl: 'https://public-server.pspdfkit.com/' });

container: string|HTMLElement

required

Selector or element where Text Comparison UI for Web will be mounted.

The element must have a width and height that's greater than zero. Text Comparison UI for Web adapts to the dimensions of this element. This way, applying responsive rules will work as expected.

The element can be styled using relative values as you would expect it to (CSS media queries are encouraged).

Type:
  • string | HTMLElement
Example
// In your HTML
<div class="foo"></div>

// In your JavaScript
PSPDFKit.loadTextComparison({ container: '.foo', documentA: ..., documentB: ..., ... });
// or
const element = document.getElementsByClassName('foo')[0]
PSPDFKit.loadTextComparison({  container: element, documentA: ..., documentB: ..., ... });

documentA: string|ArrayBuffer
Standalone Only

required, Standalone only

The URL for the base document or its content as ArrayBuffer used for comparison.

When providing a URL keep in mind that Cross-Origin Resource Sharing (CORS) apply.

Type:
  • string | ArrayBuffer
Examples

Load a PDF document from an URI

PSPDFKit.loadTextComparison({ documentA: 'https://example.com/document.pdf', ... });

Load a document from an ArrayBuffer

PSPDFKit.loadTextComparison({ documentA: arrayBuffer, ... });

documentB: string|ArrayBuffer
Standalone Only

required, Standalone only

The URL for the second document or its content as ArrayBuffer used for comparison.

When providing a URL keep in mind that Cross-Origin Resource Sharing (CORS) apply.

Type:
  • string | ArrayBuffer
Examples

Load a PDF document from an URI

PSPDFKit.loadTextComparison({ documentB: 'https://example.com/document.pdf', ... });

Load a document from an ArrayBuffer

PSPDFKit.loadTextComparison({ documentB: arrayBuffer, ... });

(nullable) innerToolbarItems: Array.<PSPDFKit.TextComparisonInnerToolbarItem>

optional

This property allows you to set an initial list of inner toolbar items for instanceA (left) and instanceB (right) for the Text Comparison UI. This can be used to customize the inner toolbar before the application mounts.

When omitted, it will default to PSPDFKit.defaultTextComparisonInnerToolbarItems.

Type:
Example
const innerToolbarItems = PSPDFKit.defaultTextComparisonInnerToolbarItems;
innerToolbarItems.reverse();
PSPDFKit.loadTextComparison({ innerToolbarItems: toolbarItems, ... });

(nullable) licenseKey: string
Standalone Only

Standalone only

PSPDFKit for Web license key from https://customers.pspdfkit.com.

If not provided, the Text Comparison UI will run in trial mode for a limited time and then request the user to visit https://pspdfkit.com/try/ to request a trial license.

Type:
  • string
Example

Activate with a license key

PSPDFKit.loadTextComparison({ licenseKey: "YOUR_LICENSE_KEY_GOES_HERE", ... });

(nullable) locale: string

The initial locale (language) for the application. All the available locales are defined in PSPDFKit.I18n.locales. When a locale is not provided Text Comparison UI for Web tries to autodetect the locale using window.navigator.language. If the detected locale is not supported then the en locale is used instead.

Type:
  • string
Example
PSPDFKit.loadTextComparison({
  locale: 'de',
  // ...
});

(nullable) serverUrl: string

optional

This allows you to overwrite the auto-detected Text Comparison UI Document Engine URL. This setting is necessary when your Text Comparison UI Document Engine is located under a different URL.

Type:
  • string
Default Value:
  • Auto-detected based on the currently executed `<script>` tag.
Example
PSPDFKit.loadTextComparison({ serverUrl: 'https://public-server.pspdfkit.com/' })

(nullable) styleSheets: Array.<string>

optional

This will load your custom CSS as a <link rel="stylesheet"> inside the Text Comparison UI. This is necessary to isolate styling of the primary toolbar, comparison sidebar from the outside application and avoid external stylesheets overwriting important viewer attributes.

An array is allowed to load multiple stylesheets. The order in the array will also be the order in which the stylesheets get loaded.

The array will be copied by us on start up time, which means that you can not mutate it after the viewer has started.

More information on how to style PSPDFKit for Web can be found in our guides.

Type:
  • Array.<string>
Default Value:
  • []
Example
PSPDFKit.loadTextComparison({
  styleSheets: [
    'https://example.com/my-stylesheet.css',
    'https://example.com/other-stylesheet.css'
  ]
})

(nullable) theme: PSPDFKit.Theme

optional

This property allows you to set theme to use for the UI. See PSPDFKit.Theme

Note: Themes are not supported in IE and setting this option won't have any effect: IE users will get the default light theme. You can customize the appearance of the UI using our public CSS classes. Please refer to this guide article for information on how to customize the appearance.

Type:
Default Value:
  • PSPDFKit.Theme.DARK
Example
PSPDFKit.loadTextComparison({ theme: PSPDFKit.Theme.DARK })

(nullable) toolbarItems: Array.<PSPDFKit.TextComparisonToolbarItem>

optional

This property allows you to set an initial list of main toolbar items for the Text Comparison UI. This can be used to customize the main toolbar before the application mounts.

When omitted, it will default to PSPDFKit.defaultTextComparisonToolbarItems.

Type:
Example
const toolbarItems = PSPDFKit.defaultTextComparisonToolbarItems;
toolbarItems.reverse();
PSPDFKit.loadTextComparison({ toolbarItems, ... });