MVC PDF Viewer Control Component
C#: how to display, view PDF file, customize ASP.NET MVC PDF viewer component UI in asp.net web application
Online Guide for customizing ASP.NET PDF Viewer & Editor using C#, html, javascript
Web viewer width and height settings
It is easy to define Editor width and height with absolute size or relative site.
Editor width and height with absolute size:
<div style="width: 1200px; height: 800px;">
<iframe name="edgepdf" src=" http://localhost" style="width: 100%; height: 100%"></iframe>
</div>
Editor width and height with relative size:
<div style="width: 90%; height:600px;">
<iframe name="edgepdf" src="http://localhost" style="width: 100%; height: 90%"></iframe>
</div>
Web viewer startup form view
By default, when editor starts, it will display a form with several tabs to allow users to
- upload a pdf file
- upload and convert other files to pdf
- open an online pdf file
- combine multiple files to pdf document
Sometimes, you do NOT ALLOW users to upload their own files. You can change editor startup status to "NOFILE".
In {EdgePDF Demo Project}/ RasterEdge_Resource_Files/Javascript/RasterEdge_WebApp.js,
Go to function setDialog, change value to "NOFILE".
setDialog(“NOFILE”);
// valid values: UPLOAD-PDF, CONVERT-2-PDF, OPEN-ONLINE-PDF, COMBINE-FILES-2-PDF, NOFILE
You can also remove certain tabs in the startup form:
In {EdgePDF Demo Project}/ RasterEdge_Resource_Files/Javascript/RasterEdge_WebApp.js,
setEditorUploadMethod(["CONVERT-2-PDF", "OPEN-ONLINE-PDF", "COMBINE-FILES-2-PDF", "UPLOAD-PDF"]);
Web viewer HTML page title
By default, Web Editor html page title will show current displayed document file name. You can disable this feature.
In {EdgePDF Demo Project}/ RasterEdge_Resource_Files/Javascript/RasterEdge_WebApp.js
Go to function setWebTitle, use the following JS code:
true: it will show current displayed document file name.
false: it will not.
setWebTitle("EdgePDF Editor: online view, comment, redact, edit, convert PDF documents.", true);
Define your own web viewer toolbar and commands
It is really easy to define your own toolbar and commands. Navigate to {EdgePDF Demo Project}/ RasterEdge_Resource_Files/Javascript/RasterEdge_WebApp.js.
All toolbar, command, command groups are defined in this file. You can delete, re-order any of them.
