{"pageContext":{"article":{"title":"Windows & macOS: How to customize the PDF viewer UI","id":"standalone-customize-pdf-viewer","description":"Details for how to customize the UI of the PDF viewer that is part of 3D WebView for Windows and macOS.","createdDate":"2024-11-25","updatedDate":"2026-04-15","product":"Unity.WebView.Standalone","content":"[3D WebView for Windows and macOS](https://store.vuplex.com/webview/windows-mac) displays PDF files using Chromium's built-in PDF viewer, which has a toolbar that looks like this:\n\n![PDF viewer with standard toolbar](/article-assets/20241125-standalone-customize-pdf-viewer/standard-toolbar.jpg)\n\nIf you wish to customize the PDF viewer's toolbar UI, here are a few approaches you can take:\n\n1. If you wish to hide the PDF viewer's toolbar UI completely, you can do so by appending `#toolbar=0` to the end of the PDF's URL before loading it in the webview (for example: `https://example.com/your_file.pdf#toolbar=0`). The result looks like this:\n\n![PDF viewer with hidden toolbar](/article-assets/20241125-standalone-customize-pdf-viewer/hidden-toolbar.jpg)\n\n2. Chromium doesn't provide a dedicated way to disable or change specific parts of the toolbar, but your application can use [IWebView.ExecuteJavaScript()](https://developer.vuplex.com/webview/IWebView#ExecuteJavaScript) to inject JavaScript into the page that covers up parts of the toolbar that you don't wish to show. For example, the following code uses that approach to add a grey rectangle that hides the download and print icons located on the right side of the toolbar:\n\n    ```\n    // Wait for the prefab to initialize.\n    // https://developer.vuplex.com/webview/WebViewPrefab#WaitUntilInitialized\n    await webViewPrefab.WaitUntilInitialized();\n    var webView = webViewPrefab.WebView;\n\n    // Use IWebView.LoadProgressChanged to detect when a new page has finished loading,\n    // and then if it's a PDF file, use ExecuteJavaScript() to inject JavaScript() that\n    // covers up the right side of the PDF viewer's toolbar UI with a grey rectangle.\n    // https://developer.vuplex.com/webview/IWebView#LoadProgressChanged\n    webView.LoadProgressChanged += (_, eventArgs) => {\n        if (eventArgs.Type == ProgressChangeType.Finished && webView.Url.EndsWith(\".pdf\")) {\n            webView.ExecuteJavaScript(\n                @\"const div = document.createElement('div');\n                Object.assign(div.style, {\n                    // Use the same shade of dark grey as the toolbar UI\n                    backgroundColor: 'rgb(50, 54, 57)',\n                    width: '200px',\n                    height: '50px',\n                    // Pin the rectangle to the top right corner\n                    position: 'absolute',\n                    top: '0',\n                    right: '0'\n                });\n                document.body.appendChild(div);\"\n            );\n        }\n    };\n    ```\n\n    The result looks like this:\n\n![PDF viewer with customized toolbar](/article-assets/20241125-standalone-customize-pdf-viewer/customized-toolbar.jpg)\n\n3. If you wish to make more comprehensive changes to the PDF viewer's UI (for example, completely changing its appearance), then an alternative is to display the PDF in a webview using [PDF.js](https://mozilla.github.io/pdf.js/) instead of using Chromium's built-in PDF viewer. If you use PDF.js to display a PDF saved on the local file system (for example, from the StreamingAssets folder), then it's necessary to use [StandaloneWebView.SetCommandLineArguments()](https://developer.vuplex.com/webview/StandaloneWebView#SetCommandLineArguments) to pass the `--disable-web-security` and `--user-data-dir` flags to Chromium to allow PDF.js to fetch the local file, like described [here](/articles/cors/#standalone)."}}}