Some test text!
Web / Guides / Blazor
Platform
Documentation
Welcome to Apryse. You can start working with WebViewer using our Blazor sample from scratch, or integrate it into an existing application.
This guide will help you integrate a free trial of WebViewer into Blazor applications from scratch. It will help you clone the Blazor sample repository, walk through the project structure, and show you how to call other WebViewer API. Your free trial includes unlimited trial usage and support from solution engineers.
Server sample
Client (WebAssembly) sample
by executing
```git
# blazor server sample
git clone https://github.com/PDFTron/webviewer-blazor-sample.git
# blazor wasm sample
git clone https://github.com/PDFTron/webviewer-blazor-wasm-sample.git
```
Once cloned, navigate into the webviewer-blazor-sample
or webviewer-blazor-wasm-sample
directory and install all the required dependencies by executing
npm install
npm will also download the Apryse WebViewer and extract it to /wwwroot/lib
.
You are now ready to run the sample or use more WebViewer APIs.
After initial setup, the webviewer-blazor-sample
or webviewer-blazor-wasm-sample
directory should look something like this:
webviewer-blazor-sample
├───App.razor
├───BlazorWebViewerServer.csproj
├───Program.cs
├───Startup.cs
├───Data
│ └───...
├───Pages
│ ├───Counter.razor
│ ├───Error.razor
│ ├───FetchData.razor
│ ├───Index.razor
│ ├───WebViewer.razor
│ └───_Host.cshtml
│
├───Properties
│ └───launchSettings.json
│
├───Shared
│ ├───MainLayout.razor
│ └───NavMenu.razor
└───wwwroot
| ├───webviewer-demo.pdf
| ├───css
| │ ├───site.css
| | └───...
| ├───js
| │ └─── webviewerScripts.js
| ├───lib
| | └───...
| └───...
└───...
Notable files and directories include:
File/Folder Name | Description |
---|---|
wwwroot | Contains all the static files and WebViewer library |
Shared | Contains the main layout for all the pages |
Pages | Contains the html and C# code for all the pages |
Startup.cs | Contains the configuration for the ASP.NET server |
_Host.cshtml | Contains the main HTML layout for the application |
In short, webviewerScripts.js
contains the JavaScript code for instantiating and interacting with WebViewer. WebViewer.razor
then calls those functions via JavaScript interop.
To run the sample, navigate to your webviewer-blazor-sample/
or webviewer-blazor-wasm-sample
directory and execute
npm start
Then navigate to https://localhost:5001/webviewer
or http://localhost:5000/
. You should see the application load on your browser.
To call more WebViewer API's, navigate to /wwwroot/js/webviewerScripts.js
and add the API calls in the callback of the WebViewer constructor(you may need to make one if it is not provided).
initWebViewer: function () {
const viewerElement = document.getElementById('viewer');
WebViewer({
path: 'WebViewer/lib',
initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf'
}, viewerElement).then(instance => {
// call apis here
})
}
For example, you can add instance.setTheme('dark')
to change the WebViewer UI theme to dark. If you stop the server, and execute dotnet run
again, then reload the page, you should see the theme change:
MIME issues
Enable MIME type mappings for WebViewer to load documents.
Server-side document operations with .NET Core SDK
Handle document operations through the JavaScript interop by passing its base64 data.
Get the answers you need: Support