Windows & macOS: How to customize the PDF viewer UI?

3D WebView for Windows and macOS displays PDF files using Chromium's built-in PDF viewer, which has a toolbar that looks like this:

If you wish to customize the PDF viewer's toolbar UI, here are a few approaches you can take:

1. 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:

2. Chromium doesn't provide a dedicated way to disable or change specific parts of the toolbar, but your application can use 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:

   // Wait for the prefab to initialize.
   // https://developer.vuplex.com/webview/WebViewPrefab#WaitUntilInitialized
   await webViewPrefab.WaitUntilInitialized();
   var webView = webViewPrefab.WebView;
   
   // Use IWebView.LoadProgressChanged to detect when a new page has finished loading,
   // and then if it's a PDF file, use ExecuteJavaScript() to inject JavaScript() that
   // covers up the right side of the PDF viewer's toolbar UI with a grey rectangle.
   // https://developer.vuplex.com/webview/IWebView#LoadProgressChanged
   webView.LoadProgressChanged += (_, eventArgs) => {
       if (eventArgs.Type == ProgressChangeType.Finished && webView.Url.EndsWith(".pdf")) {
           webView.ExecuteJavaScript(
               @"const div = document.createElement('div');
               Object.assign(div.style, {
                   // Use the same shade of dark grey as the toolbar UI
                   backgroundColor: 'rgb(50, 54, 57)',
                   width: '200px',
                   height: '50px',
                   // Pin the rectangle to the top right corner
                   position: 'absolute',
                   top: '0',
                   right: '0'
               });
               document.body.appendChild(div);"
           );
       }
   };

   The result looks like this:

3. 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 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() to pass the --disable-web-security flag to Chromium to allow PDF.js to fetch the local file:

   void Awake() {
       StandaloneWebView.SetCommandLineArguments("--disable-web-security");
   }