We are using Kendo MVC version: 2021.3.1109.545
When we tried to open the PDF file from the application using PDF viewer, we can see the fonts getting blurred and fuzzy as shown below.
<div id="pdfViewer">
</div>
<script type="text/javascript">
$("#pdfViewer").kendoPDFViewer({
pdfjsProcessing: {
file: ""
}
});
function loadFile() {
$("#pdfViewer").data("kendoPDFViewer").fromFile("@Url.Action("GetPDF", "Home")");
}
</script>
public ActionResult GetPDF()
{
var name = "sample.pdf";
string path = Server.MapPath("/Content/pdf/sample.pdf");
//generate a random boolean:
Random rng = new Random();
bool randomBool = rng.Next(0, 2) > 0;
if (randomBool)
{
byte[] fileBytes = System.IO.File.ReadAllBytes(path);
return File(fileBytes, System.Net.Mime.MediaTypeNames.Application.Octet, name);
}
else
{
return new HttpNotFoundResult("File not found.");
}
}
In the case where the request returns HttpNotFoundResult, a number of js errors are thrown:
util.js:417 Uncaught (in promise)
The user loses the ability to load a file, because subsequent attempts to load a file by clicking the button result in another js exception:
api.js:1114 Uncaught TypeError: Cannot read properties of null (reading 'sendWithStream')
The component should show a message that a file is not found, without throwing js exceptions and should not become unusable after a failed attempt to load a file.
Using the PDFViewer with the latest version of PDF.js (3.9.179) throws js exceptions. Version 3.4.120 is the last one, with which no js exception is thrown.
Dojo example: https://dojo.telerik.com/IHedIhur/3
The file is loaded, however, js exceptions are thrown:
The --scale-factor
CSS-variable must be set, to the same value as viewport.scale
, either on the container
-element itself or higher up in the DOM. text_layer.js:480:14
No js exceptions when using PDF.js versions newer than v3.4.120.
Currently, default zoom can be set through JavaScript in the Render event handler of the PDFViewer:
Attach the handler:
.Events(e => e.Render("onRender"))
The event handler:
<script>
var firstRender = true;
function onRender(e) {
if (firstRender) {
var combobox = e.sender.toolbar.element.find("[data-command=ZoomCommand][data-role=combobox]").data("kendoComboBox");
combobox.value("fitToWidth");
combobox.trigger("change");
firstRender = false;
}
}
</script>
A better solution would be a dedicated configuration option that allows setting the default zoom when declaring the PDFViewer.
I load a pdf on a PDFViewer component using loadDefault function, but Open event is not fired.
Also, I want to scroll to the end of the document and for that, I need to retrieve the count of the pages and activate the last page in the render event, even it's called multiple times.
How can I get the count of the pages and scroll to the end of the .pdf document after it is loaded?
@(Html.Kendo().PDFViewer().Name("documentViewer")
.PdfjsProcessing(pdf => pdf.File(Url.Content("~/Content/data/default.pdf")))
.Events(e => e
.Error("(function(e) { onDocumentViewerError(e); })")
.Render("(function(e) { onDocumentViewerRender(e); })")
.Open("(function(e) { onDocumentViewerOpen(e); })")
)
)
...
<script type="text/javascript">
...
function loadDefault() {
var docUrl = window.location.origin + window.location.pathname + "Content/data/default.pdf";
var pdfViewer = $("#documentViewer").data("kendoPDFViewer");
pdfViewer.fromFile(docUrl);
}
onDocumentViewerRender = function(e) {
console.log("render");
if (goToEnd) {
goToEnd = false;
setTimeout(function () {
var pdfViewer = $("#documentViewer").data("kendoPDFViewer");
pdfViewer.activatePage(pagesCount); // how to get pagesCount
}, 2000);
}
}
onDocumentViewerOpen = function(e) {
console.log("open"); // not shown in Console
}
...
</script>
Reproducible in the demos: https://demos.telerik.com/kendo-ui/pdfviewer/index
The zoom tool is disabled.
The zoom tool is enabled.
Currently, the search in PDF Viewer is performed on every keypress in the search input field.
The search performance of the widget could be improved if there is a possibility to perform a search on pressing "Enter". Another valuable enhancement could be a configuration that allows the search to be performed after entering a certain number of symbols.
There is empty title attribute of PDFViewer zoom level combobox
Empty "title" attribute
The "title" attribute of the combobox explains the purpose of the combobox, e. g. Zoom level combobox
A server side exception:
System.OverflowException: 'Value was either too large or too small for a Double.'
is thrown on attempting to serialize an existing .pdf file converted to FixedDocument.
public ActionResult GetInitialPdf(int? pageNumber)
{
//exception with Development plan.pdf file:
string filePath = Path.Combine(Server.MapPath("~/Content/web/pdfViewer"), "Development Plan.pdf");
//it works with the sample.pdf file:
//string filePath = Path.Combine(Server.MapPath("~/App_Data"), "sample.pdf");
FileStream stream = new FileStream(filePath, FileMode.Open, FileAccess.Read);
JsonResult jsonResult;
FixedDocument doc = FixedDocument.Load(stream);
if (pageNumber == null)
{
jsonResult = Json(doc.ToJson(), JsonRequestBehavior.AllowGet);
}
else
{
jsonResult = Json(doc.GetPage((int)pageNumber), JsonRequestBehavior.AllowGet);
}
jsonResult.MaxJsonLength = int.MaxValue;
return jsonResult;
}
The exception is thrown during the FixedDocument JSON serialization:
doc.ToJson()
at the following place: ConvertToList method in ArrayExtension class (Telerik.Web.PDF namespace)
No exceptions are thrown during serialization.
Hi,
i tested the updated pdfviewer of version 2019.3.1023, but it did not work as expected.
I have some questions about usage und customizing
https://dojo.telerik.com/EmErekOB
Regards
Christian
Bug report
Open a pdf file with links in PDF Viewer. Links are not clickable.
Reproduction of the problem
Open the demo for the PDF Viewer
Open a file, containing links
Click on a link
Current behavior
Clicking on a link does not redirect to the page
Expected/desired behavior
Clicking on a link should redirect to the link.
Environment
Kendo UI version: 2019.3.1023
Browser: [all]
The toolbar.click is not serialized correctly when a custom button is added to the ToolBar of the widget. Thus, the click event is not being executed.
@(Html.Kendo().PDFViewer()
.Name("test")
.PdfjsProcessing(pdf => pdf.File(""))
.Toolbar(t => t.Items(i =>
{
i.Add().Name("Open").Id("Open").Command("OpenCommand").Type("button").Icon("folder-open");
i.Add().Name("Print").Id("Print").Type("button").Icon("print").Click("onPrintClick");
}))
.Height(500)
)
<script>
function onPrintClick(e) {
alert(e);
}
</script>
toolbar is not serialized correctly.
toolbar.click should be serialized correctly.