0

I'm trying to implement a PDF viewer for a Xamarin.Forms WPF application, and I'm using CefSharp to load and render the PDF file. However I've been unable to perform the necessary customizations on the default Chromium PDF Viewer, or PDFium, as far as my research goes.

This is what I need to change, and the image with the corresponding items:

  • A - Remove the toolbar.
  • B - Customize the scrollbar.
  • C - Remove the zoom items.
  • D - Change the background color.

enter image description here

I think that the scrollbar I might be able to change on the Xamarin side of things, the other items however, I'm quite sure I'll have to deal with PDFium or Chromium.

When I open a PDF file on Google chrome, I'm able to remove the toolbar and the zoom items using some simple JavaScript. This is the source that I see when I inspect the elements of the PDF viewer on Google Chrome:

enter image description here

Using these JavaScript statements in the Console Window I can remove the toolbar and zoom items (but only within Google Chrome:

Remover toolbar:

document.getElementById("toolbar").remove()

Remove zoom items:

document.getElementById("zoom-toolbar").remove()

This is the custom implementation of the CefSharp RenderProcessMessageHandler that I created in order to try to get to the source and run these JavaScript instructions and customize the control as I've been able to do within the Google Chrome browser:

class PdfRenderProcessMessageHandler : IRenderProcessMessageHandler
{
    // <other methods required by the interface>
    
    
    // Method called when the context is created
    public void OnContextCreated(IWebBrowser browserControl, IBrowser browser, IFrame frame)
    {
        frame.ExecuteJavaScriptAsync("document.getElementById('toolbar').remove()");
        frame.ExecuteJavaScriptAsync("document.getElementById('zoom - toolbar').remove()");
        frame.ViewSource(); //Display the source code
    }
}

However when I call the frame.ViewSoure() method to view the source code, this is the source code that I get:

enter image description here

So it seems pretty obvious that the code that I have when viewing a PDF file through Google Chrome and the code that I have when viewing the same file through CefSharp ChromiumWebBrowser it's pretty different.

Am I intercepting the source code at the wrong point, how can I have access to the full source when using CefSharp? Even if I can't change the background color (based on my research), removing the toolbar, zoom items and scrollbar could solve my problem.

Does anyone know how I might be able to achieve this?

amaitland
  • 4,073
  • 3
  • 25
  • 63
adamasan
  • 1,092
  • 1
  • 12
  • 33
  • 1
    Firstly CefSharp is just one of many chromium embedded framework wrappers. CEF provides the underlying chromium implementation, how it hosts pdfium would need to be improved to support what you are trying in JavaScript. Your options are quite limited, from memory pdfium supports a small set of commands passed in on the query string to say hide the toolbar. Have you considered embedding pdfium directly? – amaitland Aug 09 '20 at 20:41
  • @amaitland I see. The reason I'm going with CefSharp instead of a PDFium wrapper is that the ChromiumWebBrowser within PDFium inherits from FrameworkElement, meaning that I can use it to create Xamarin.Forms custom renderers for WPF. The viewers from packages such as PdfiumViewer, or PdfiumLight don't inherit from the FrameworkElement class, so I can't use them within a WPF custom renderer. Do you know where I can find the set of instructions that I can pass on the query string? Even though they are few, some of them may be hepful. Thank you very much! – adamasan Aug 09 '20 at 21:29
  • Just search for say chrome hide PDF toolbar. There is a paid PDF viewer that looks quite well done. Adapting one of the open source ones shouldn't be too hard either depending on your requirements. – amaitland Aug 10 '20 at 00:08
  • Alternatively you can use pdf.js in the browser to render the PDF https://mozilla.github.io/pdf.js/ – amaitland Aug 10 '20 at 00:33

1 Answers1

2

I found a solution.

In XAML just use:

    src="file.pdf#toolbar=0"

And in CodeBehind use:

    browser.Load(pathToFile + "#toolbar=0");
ouflak
  • 2,458
  • 10
  • 44
  • 49
Pureon
  • 41
  • 2