You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: Document-Processing/PDF/PDF-Viewer/vue/accessibility.md
+12-4Lines changed: 12 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
10
10
11
11
# Accessibility in Syncfusion Vue PDF Viewer
12
12
13
-
The PDF Viewer component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
13
+
The PDF Viewer component follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/), and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) commonly used to evaluate accessibility.
14
14
15
15
The accessibility compliance for the PDF Viewer component is summarized below.
16
16
@@ -62,7 +62,7 @@ Note: Mobile device support is marked as partial due to platform-level constrain
62
62
63
63
## Keyboard interaction
64
64
65
-
The PDF Viewer component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who rely on keyboard navigation. The following keyboard shortcuts are supported by the PDF Viewer component.
65
+
The PDF Viewer follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline to support users who rely on assistive technologies (AT) or keyboard navigation. The following keyboard shortcuts are supported by the PDF Viewer.
66
66
67
67
|**Press (Windows)**|**Press (Macintosh)**|**To do this**|
68
68
| --- | --- | --- |
@@ -97,7 +97,15 @@ The PDF Viewer component follows the [keyboard interaction](https://www.w3.org/W
97
97
|<kbd>Shift + H</kbd> |<kbd>Shift + H</kbd> |Enable pan mode|
98
98
|<kbd>Shift + V</kbd> |<kbd>Shift + V</kbd> |Enable text selection mode|
99
99
100
-
The PDF Viewer supports custom keyboard commands through a `commandManager`, which handles commands triggered by specific key gestures. Custom commands are defined by users and executed accordingly. The `commandManager` includes a `keyboardCommand` collection to hold custom keyboard commands. Each custom command is represented by a `KeyboardCommand` entry, containing the command name and associated keyboard combination. Additionally, the `keyboardCustomCommands` parameter utilizes an event callback to handle keyboard events and trigger methods when specific key combinations are pressed.
100
+
The PDF Viewer includes keyboard shortcuts for scrolling, zooming, text search, printing, and annotation deletion.
101
+
102
+
Additional keyboard shortcuts are available for common actions such as navigating between pages, accessing specific pages, toggling annotation tools, and displaying PDF elements (outlines, annotations, bookmarks, thumbnails).
103
+
104
+
To support custom key bindings, the viewer provides a `commandManager` configuration object that handles custom commands triggered by specified key gestures. Custom commands are defined by name and executed when their associated key gesture is detected.
105
+
106
+
The `commandManager` configuration includes a `keyboardCommand` collection that holds user-defined keyboard commands. Each command is represented by a `KeyboardCommand` object containing a `name` and an associated `gesture` describing the key combination.
107
+
108
+
The `keyboardCustomCommands` parameter is an event callback invoked when a custom key combination is detected; handlers can perform application-specific actions in response.
101
109
102
110
{% tabs %}
103
111
{% highlight html tabtitle="Composition API (Standalone)" %}
@@ -370,7 +378,7 @@ Key modifiers used in gestures:
370
378
- Shift corresponds to the Shift key (value `4`).
371
379
- Meta corresponds to the Command key on macOS or the Windows key on Windows (value `8`).
372
380
373
-
This setup enables users to perform custom actions within the PDF Viewer by pressing specific key combinations, improving navigation and interaction efficiency.
381
+
This enables custom actions within the PDF Viewer when specific key combinations are pressed, improving navigation and interaction efficiency.
Copy file name to clipboardExpand all lines: Document-Processing/PDF/PDF-Viewer/vue/content-security-policy.md
+38-19Lines changed: 38 additions & 19 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,11 +10,33 @@ domainurl: ##DomainURL##
10
10
11
11
# Content Security Policy in Vue PDF Viewer
12
12
13
-
Content Security Policy (CSP) is a security feature implemented by web browsers that helps to protect against attacks such as cross-site scripting (XSS) and data injection. It limits the sources from which content can be loaded on a web page.
13
+
Content Security Policy (CSP) is a security feature implemented by web browsers that helps protect against attacks such as cross-site scripting (XSS) and data injection. It restricts the sources from which content can be loaded on a web page.
14
14
15
-
To enable strict [Content Security Policy (CSP)](https://csp.withgoogle.com/docs/strict-csp.html), certain browser features are disabled by default. In order to use Syncfusion PDF Viewer control with strict CSP mode, it is essential to include following directives in the CSP meta tag.
15
+
When enabling strict [Content Security Policy (CSP)](https://csp.withgoogle.com/docs/strict-csp.html), certain browser features are disabled by default for enhanced security. To use the Syncfusion PDF Viewer control in strict CSP mode, specific directives must be configured in the CSP meta tag to allow the control's necessary resources.
16
16
17
-
* Syncfusion PDF Viewer control are rendered with calculated **inline styles** and **base64** font icons, which are blocked on a strict CSP-enabled site. To allow them, add the [`style-src 'self' 'wasm-unsafe' blob:;`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) and [`font-src 'self' data:;`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/font-src) directives in the meta tag as follows.
17
+
## CSP Directives Reference
18
+
19
+
The following table describes each CSP directive and its usage with the Syncfusion PDF Viewer:
|`default-src 'self';`| Sets the default policy for loading resources. `'self'` restricts loading to the same origin (same domain). |
24
+
|`script-src 'self' 'wasm-unsafe-eval' blob:;`| Defines where JavaScript and WebAssembly code can be loaded. `'self'` allows scripts from the same origin. `'wasm-unsafe-eval'` permits WebAssembly compilation from JavaScript functions. `blob:` allows loading scripts from Blob URLs. |
25
+
|`worker-src 'self' blob:;`| Controls where web workers can be loaded. `'self'` allows same-origin workers. `blob:` enables blob-based workers, which are common in PDF viewers and compute-intensive applications. |
26
+
|`connect-src 'self' data:;`| Restricts network requests (fetch, XHR, WebSockets) to specified sources. `'self'` limits requests to the same origin. `data:` allows data URIs. |
27
+
|`style-src 'self' blob:;`| Defines stylesheet sources. `'self'` restricts to the same origin. `blob:` allows dynamically generated styles necessary for runtime CSS generation. |
28
+
|`font-src 'self' data:;`| Controls font loading sources. `'self'` allows local fonts. `data:` permits inline fonts (base64 encoded), and URLs enable loading from external font CDNs. |
29
+
|`img-src 'self' data: blob:;`| Controls image loading sources. `'self'` restricts to the same origin. `data:` allows inline images (base64 encoded). `blob:` allows Blob URLs for dynamically generated images. |
30
+
31
+
## Configuring CSP for PDF Viewer
32
+
33
+
The following sections describe CSP configurations required for different PDF Viewer features.
34
+
35
+
### Styles and Fonts
36
+
37
+
The PDF Viewer is rendered with calculated inline styles and base64-encoded font icons, which are blocked in strict CSP mode. Additionally, the material and tailwind built-in themes reference the external Roboto font from Google Fonts, which must also be allowed.
38
+
39
+
Include the following directives to permit inline styles and external fonts:
* Syncfusion **material** and **tailwind** built-in themes contain a reference to the [`Roboto’s external font`](https://fonts.googleapis.com/css?family=Roboto:400,500), which is also blocked. To allow them, add the [`external font`](https://fonts.googleapis.com/css?family=Roboto:400,500) reference to the [`style-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) and [`font-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/font-src) directives in the above meta tag.
30
-
31
-
The resultant meta tag is included within the `<head>` tag and resolves the CSP violation on the application's side when utilizing Syncfusion PDF Viewer control with material and tailwind themes.
51
+
The meta tag should be placed within the `<head>` section of the HTML document to resolve CSP violations when using material or tailwind themes:
32
52
33
53
{% tabs %}
34
54
{% highlight razor tabtitle="HTML" %}
@@ -43,7 +63,9 @@ The resultant meta tag is included within the `<head>` tag and resolves the CSP
43
63
{% endhighlight %}
44
64
{% endtabs %}
45
65
46
-
* Syncfusion PDF Viewer control when images are added as **blob** and **base64**, which are blocked on a strict CSP-enabled site.To overcome this restriction, it is necessary to add the image-src data: directive in the meta tag. To allow them, add the [`style-src 'self' blob:;`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) and [`image-src 'self' data:;`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src) directives as follows.
66
+
### Images and Blobs
67
+
68
+
When images are added as blob or base64 data to the PDF Viewer, they are blocked in strict CSP mode. To permit these resources, include the [`img-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src) directive in the CSP meta tag:
47
69
48
70
{% tabs %}
49
71
{% highlight razor tabtitle="HTML" %}
@@ -57,7 +79,9 @@ The resultant meta tag is included within the `<head>` tag and resolves the CSP
57
79
{% endhighlight %}
58
80
{% endtabs %}
59
81
60
-
* Syncfusion PDF Viewer control when **web worker** and is used, which is blocked on a strict CSP-enabled site. To allow them, add the [`worker-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/worker-src) and [`connect-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/connect-src) directives in the above meta tag as follows.
82
+
### Scripts, WebAssembly, and Workers
83
+
84
+
The PDF Viewer uses WebAssembly and web workers for processing and rendering. Both are blocked in strict CSP mode. To enable these features, include the [`script-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src), [`worker-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/worker-src), and [`connect-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/connect-src) directives:
61
85
62
86
{% tabs %}
63
87
{% highlight razor tabtitle="HTML" %}
@@ -73,18 +97,13 @@ The resultant meta tag is included within the `<head>` tag and resolves the CSP
73
97
{% endhighlight %}
74
98
{% endtabs %}
75
99
76
-
N> In accordance with the latest security practices, the Syncfusion PDF Viewer control now recommends using `wasm-unsafe` in the Content Security Policy (CSP) settings to enhance the security of WebAssembly operations. This change ensures a safer execution environment while maintaining the necessary functionality. Make sure to update your CSP meta tags to reflect this change for optimal security compliance.
100
+
N> In accordance with the latest security practices, the Syncfusion PDF Viewer control recommends using `wasm-unsafe-eval` in the Content Security Policy (CSP) settings to enable secure WebAssembly compilation. This directive allows WebAssembly to be compiled from JavaScript functions while maintaining a secure execution environment. Update your CSP meta tags to reflect this change for optimal security compliance.
|`default-src 'none';`| Sets the default policy for loading resources. `'self'` means only allow resources from the same origin (same domain). |
83
-
|`script-src 'self' 'wasm-unsafe-eval' blob:;`| Defines where JavaScript (and WebAssembly) code can come from. `'self'` allows scripts from the same origin. `'wasm-unsafe-eval'` allows compilation of WebAssembly using JS eval()-like functions (security-sensitive). `blob:` allows loading scripts from Blob URLs. |
84
-
|`worker-src 'self' blob:;`| Controls where workers can be loaded from. `'self'` allows same-origin workers. `blob:` allows blob-based workers, common in PDF viewers and heavy JS applications. |
85
-
|`connect-src 'self';`| Controls where the application can make network requests, such as `fetch()`, XHR, and WebSockets. `'self'` restricts this to the same origin. |
86
-
|`style-src 'self' blob:;`| Defines the sources for stylesheets. `'self'` restricts to the same origin. `blob:` allows dynamically generated styles, which might be necessary for apps with dynamically generated CSS. |
87
-
|`font-src 'self' data:`| Controls where fonts can be loaded from. `'self'` allows local fonts. `data:` allows inline fonts (base64 embedded), and the URLs allow loading from external font CDN. |
88
-
|`img-src 'self' data:;`| Controls where images can be loaded from. `'self'` restricts to the same origin. `data:` allows inline images (base64). |
104
+
- Test CSP configurations thoroughly in development to identify blocked resources before deployment.
105
+
- Monitor browser console for CSP violations that may indicate missing directives.
106
+
- Use the most restrictive CSP possible while maintaining required functionality.
107
+
- Regularly review CSP settings when upgrading the Syncfusion PDF Viewer to the latest version.
89
108
90
109
[View sample in GitHub](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples/tree/master)
Copy file name to clipboardExpand all lines: Document-Processing/PDF/PDF-Viewer/vue/download.md
+3-5Lines changed: 3 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,15 +9,13 @@ domainurl: ##DomainURL##
9
9
---
10
10
# Download in Vue PDF viewer control
11
11
12
-
The PDF Viewer supports downloading the loaded PDF document. Use the enableDownload property to enable or disable the download option, as shown below.
12
+
The Vue PDF Viewer lets users download the currently loaded PDF. Enable the download toolbar button with `enableDownload` for both standalone and server-backed viewers. The examples below demonstrate typical configurations and how to trigger a programmatic download.
13
13
14
-
14
+
15
15
16
16
> Note: When loading documents from other origins, ensure that CORS is correctly configured on the server. In server-backed mode, the document is streamed through the serviceUrl endpoint, which must allow download requests.
17
17
18
-
19
-
20
-
You can invoke the download action using the following code snippet:
18
+
To invoke download programmatically, use the following snippet:
21
19
22
20
{% tabs %}
23
21
{% highlight html tabtitle="Composition API (Standalone)" %}
Copy file name to clipboardExpand all lines: Document-Processing/PDF/PDF-Viewer/vue/event.md
+3-1Lines changed: 3 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,7 +10,9 @@ domainurl: ##DomainURL##
10
10
11
11
# Events in Vue PDF Viewer
12
12
13
-
The PDF Viewer component triggers events for creation, page navigation, document life cycle, context menu interactions, comments, bookmarks, download and export, hyperlinks, annotation import/export, custom keyboard commands, printing, signatures, text search, and text selection. Use these events to integrate custom logic into application workflows.
13
+
The PDF Viewer component triggers events throughout its lifecycle, enabling you to respond to user interactions and document state changes. These events are organized into categories: **Component Lifecycle** (created, resourcesLoaded), **Navigation** (pageChange, pageClick), **Document Operations** (documentLoad, documentLoadFailed, downloadStart, downloadEnd, printStart, printEnd), **User Interactions** (toolbarClick, bookmarkClick, thumbnailClick), **Text Operations** (textSelectionStart, textSelectionEnd, textSearchStart, textSearchComplete), **Annotations** (commentAdd, commentEdit, commentDelete), **Forms** (buttonFieldClick, validateFormFields), and **Customization** (customContextMenuBeforeOpen, customContextMenuSelect). Subscribe to events using the `@eventName` syntax to execute custom code when specific actions occur.
14
+
15
+
## Commonly used events
14
16
15
17
The following table lists commonly used events supported by the PDF Viewer component:
0 commit comments