or
1 answer
24 views
Currently I'm using kendo ui version -> 2022.3.1109
I want to download pdf from html so here's my simple code.
<body>
<div id="pdf-scope">
<p>
Assignment Order - <strong>Interview</strong> - Review & Submit
</p>
<p>
Assignment Order - <span class="bold-text">Interview</span> - Review & Submit
</p>
</div>
<button id="btn-download-pdf">
download
</button>
</body>
</html>
<script>
$("#btn-download-pdf").on("click", () => {
let pdfDom = $("#pdf-scope");
kendo.drawing.drawDOM(pdfDom, {
/*margin: "2px",*/
paperSize: "A4",
scale: 0.4,
margin: 50,
keepTogether: ".prevent-split",
forcePageBreak: ".page-break",
landscape: true,
multiPage: true
}).then(function (group) {
kendo.drawing.pdf.saveAs(group, "Interview.pdf");
});
});
</script>
Everything's fine on html view, here is the view I tried:
Until I clicked the pdf button, a strange result shown in downloaded pdf
The question is why this is happened ? Is it something wrong with my code ?I know the problem is not bold style but the tag inside <p> is being recognized as tab character, fyi I also tried another workaround such putting 2 div in-line and gave me the same result.
1 answer
27 views
Hello
We are integrating our Kendo with our Dynamics 365 platform . We cannot upload .mjs files to it since Dynamics only supports plain .js files and as such, we have uploaded both pdf.min.mjs and pdf.worker.min.mjs as regular .js files. When referencing them both in HTML we added the module type.
This is our sample code:
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="./cc_kendo.common.min.css">
<link rel="stylesheet" href="./cc_kendo.default-ocean-blue.css">
<script src="./cc_jquery.3_7_1.js"></script>
<script src="./cc_kendo.all.min.js"></script>
<script src="./cc_pdf.min.js" type="module"></script>
<script src="./cc_pdf.worker.min.js" type="module"></script>
<script src="./cc_kendo_license.js"></script>
<script type="module">
$(function() {
$("#viewer").kendoPDFViewer({
pdfjsProcessing: {
file: {
data: GetBase64()
}
},
width: "100%",
height: 1200
});
function GetBase64() {
return "JVBERi0xLjMNCiXi48/TDQoNCjEgMCBvYmoNCjw8DQovVHlwZSAvQ2F0YWxvZw0KL091dGxpbmVzIDIgMCBSDQovUGFnZXMgMyAwIFINCj4+DQplbmRvYmoNCg0KMiAwIG9iag0KPDwNCi9UeXBlIC9PdXRsaW5lcw0KL0NvdW50IDANCj4+DQplbmRvYmoNCg0KMyAwIG9iag0KPDwNCi9UeXBlIC9QYWdlcw0KL0NvdW50IDINCi9LaWRzIFsgNCAwIFIgNiAwIFIgXSANCj4+DQplbmRvYmoNCg0KNCAwIG9iag0KPDwNCi9UeXBlIC9QYWdlDQovUGFyZW50IDMgMCBSDQovUmVzb3VyY2VzIDw8DQovRm9udCA8PA0KL0YxIDkgMCBSIA0KPj4NCi9Qcm9jU2V0IDggMCBSDQo+Pg0KL01lZGlhQm94IFswIDAgNjEyLjAwMDAgNzkyLjAwMDBdDQovQ29udGVudHMgNSAwIFINCj4+DQplbmRvYmoNCg0KNSAwIG9iag0KPDwgL0xlbmd0aCAxMDc0ID4+DQpzdHJlYW0NCjIgSg0KQlQNCjAgMCAwIHJnDQovRjEgMDAyNyBUZg0KNTcuMzc1MCA3MjIuMjgwMCBUZA0KKCBBIFNpbXBsZSBQREYgRmlsZSApIFRqDQpFVA0KQlQNCi9GMSAwMDEwIFRmDQo2OS4yNTAwIDY4OC42MDgwIFRkDQooIFRoaXMgaXMgYSBzbWFsbCBkZW1vbnN0cmF0aW9uIC5wZGYgZmlsZSAtICkgVGoNCkVUDQpCVA0KL0YxIDAwMTAgVGYNCjY5LjI1MDAgNjY0LjcwNDAgVGQNCigganVzdCBmb3IgdXNlIGluIHRoZSBWaXJ0dWFsIE1lY2hhbmljcyB0dXRvcmlhbHMuIE1vcmUgdGV4dC4gQW5kIG1vcmUgKSBUag0KRVQNCkJUDQovRjEgMDAxMCBUZg0KNjkuMjUwMCA2NTIuNzUyMCBUZA0KKCB0ZXh0LiBBbmQgbW9yZSB0ZXh0LiBBbmQgbW9yZSB0ZXh0LiBBbmQgbW9yZSB0ZXh0LiApIFRqDQpFVA0KQlQNCi9GMSAwMDEwIFRmDQo2OS4yNTAwIDYyOC44NDgwIFRkDQooIEFuZCBtb3JlIHRleHQuIEFuZCBtb3JlIHRleHQuIEFuZCBtb3JlIHRleHQuIEFuZCBtb3JlIHRleHQuIEFuZCBtb3JlICkgVGoNCkVUDQpCVA0KL0YxIDAwMTAgVGYNCjY5LjI1MDAgNjE2Ljg5NjAgVGQNCiggdGV4dC4gQW5kIG1vcmUgdGV4dC4gQm9yaW5nLCB6enp6ei4gQW5kIG1vcmUgdGV4dC4gQW5kIG1vcmUgdGV4dC4gQW5kICkgVGoNCkVUDQpCVA0KL0YxIDAwMTAgVGYNCjY5LjI1MDAgNjA0Ljk0NDAgVGQNCiggbW9yZSB0ZXh0LiBBbmQgbW9yZSB0ZXh0LiBBbmQgbW9yZSB0ZXh0LiBBbmQgbW9yZSB0ZXh0LiBBbmQgbW9yZSB0ZXh0LiApIFRqDQpFVA0KQlQNCi9GMSAwMDEwIFRmDQo2OS4yNTAwIDU5Mi45OTIwIFRkDQooIEFuZCBtb3JlIHRleHQuIEFuZCBtb3JlIHRleHQuICkgVGoNCkVUDQpCVA0KL0YxIDAwMTAgVGYNCjY5LjI1MDAgNTY5LjA4ODAgVGQNCiggQW5kIG1vcmUgdGV4dC4gQW5kIG1vcmUgdGV4dC4gQW5kIG1vcmUgdGV4dC4gQW5kIG1vcmUgdGV4dC4gQW5kIG1vcmUgKSBUag0KRVQNCkJUDQovRjEgMDAxMCBUZg0KNjkuMjUwMCA1NTcuMTM2MCBUZA0KKCB0ZXh0LiBBbmQgbW9yZSB0ZXh0LiBBbmQgbW9yZSB0ZXh0LiBFdmVuIG1vcmUuIENvbnRpbnVlZCBvbiBwYWdlIDIgLi4uKSBUag0KRVQNCmVuZHN0cmVhbQ0KZW5kb2JqDQoNCjYgMCBvYmoNCjw8DQovVHlwZSAvUGFnZQ0KL1BhcmVudCAzIDAgUg0KL1Jlc291cmNlcyA8PA0KL0ZvbnQgPDwNCi9GMSA5IDAgUiANCj4+DQovUHJvY1NldCA4IDAgUg0KPj4NCi9NZWRpYUJveCBbMCAwIDYxMi4wMDAwIDc5Mi4wMDAwXQ0KL0NvbnRlbnRzIDcgMCBSDQo+Pg0KZW5kb2JqDQoNCjcgMCBvYmoNCjw8IC9MZW5ndGggNjc2ID4+DQpzdHJlYW0NCjIgSg0KQlQNCjAgMCAwIHJnDQovRjEgMDAyNyBUZg0KNTcuMzc1MCA3MjIuMjgwMCBUZA0KKCBTaW1wbGUgUERGIEZpbGUgMiApIFRqDQpFVA0KQlQNCi9GMSAwMDEwIFRmDQo2OS4yNTAwIDY4OC42MDgwIFRkDQooIC4uLmNvbnRpbnVlZCBmcm9tIHBhZ2UgMS4gWWV0IG1vcmUgdGV4dC4gQW5kIG1vcmUgdGV4dC4gQW5kIG1vcmUgdGV4dC4gKSBUag0KRVQNCkJUDQovRjEgMDAxMCBUZg0KNjkuMjUwMCA2NzYuNjU2MCBUZA0KKCBBbmQgbW9yZSB0ZXh0LiBBbmQgbW9yZSB0ZXh0LiBBbmQgbW9yZSB0ZXh0LiBBbmQgbW9yZSB0ZXh0LiBBbmQgbW9yZSApIFRqDQpFVA0KQlQNCi9GMSAwMDEwIFRmDQo2OS4yNTAwIDY2NC43MDQwIFRkDQooIHRleHQuIE9oLCBob3cgYm9yaW5nIHR5cGluZyB0aGlzIHN0dWZmLiBCdXQgbm90IGFzIGJvcmluZyBhcyB3YXRjaGluZyApIFRqDQpFVA0KQlQNCi9GMSAwMDEwIFRmDQo2OS4yNTAwIDY1Mi43NTIwIFRkDQooIHBhaW50IGRyeS4gQW5kIG1vcmUgdGV4dC4gQW5kIG1vcmUgdGV4dC4gQW5kIG1vcmUgdGV4dC4gQW5kIG1vcmUgdGV4dC4gKSBUag0KRVQNCkJUDQovRjEgMDAxMCBUZg0KNjkuMjUwMCA2NDAuODAwMCBUZA0KKCBCb3JpbmcuICBNb3JlLCBhIGxpdHRsZSBtb3JlIHRleHQuIFRoZSBlbmQsIGFuZCBqdXN0IGFzIHdlbGwuICkgVGoNCkVUDQplbmRzdHJlYW0NCmVuZG9iag0KDQo4IDAgb2JqDQpbL1BERiAvVGV4dF0NCmVuZG9iag0KDQo5IDAgb2JqDQo8PA0KL1R5cGUgL0ZvbnQNCi9TdWJ0eXBlIC9UeXBlMQ0KL05hbWUgL0YxDQovQmFzZUZvbnQgL0hlbHZldGljYQ0KL0VuY29kaW5nIC9XaW5BbnNpRW5jb2RpbmcNCj4+DQplbmRvYmoNCg0KMTAgMCBvYmoNCjw8DQovQ3JlYXRvciAoUmF2ZSBcKGh0dHA6Ly93d3cubmV2cm9uYS5jb20vcmF2ZVwpKQ0KL1Byb2R1Y2VyIChOZXZyb25hIERlc2lnbnMpDQovQ3JlYXRpb25EYXRlIChEOjIwMDYwMzAxMDcyODI2KQ0KPj4NCmVuZG9iag0KDQp4cmVmDQowIDExDQowMDAwMDAwMDAwIDY1NTM1IGYNCjAwMDAwMDAwMTkgMDAwMDAgbg0KMDAwMDAwMDA5MyAwMDAwMCBuDQowMDAwMDAwMTQ3IDAwMDAwIG4NCjAwMDAwMDAyMjIgMDAwMDAgbg0KMDAwMDAwMDM5MCAwMDAwMCBuDQowMDAwMDAxNTIyIDAwMDAwIG4NCjAwMDAwMDE2OTAgMDAwMDAgbg0KMDAwMDAwMjQyMyAwMDAwMCBuDQowMDAwMDAyNDU2IDAwMDAwIG4NCjAwMDAwMDI1NzQgMDAwMDAgbg0KDQp0cmFpbGVyDQo8PA0KL1NpemUgMTENCi9Sb290IDEgMCBSDQovSW5mbyAxMCAwIFINCj4+DQoNCnN0YXJ0eHJlZg0KMjcxNA0KJSVFT0YNCg==";
}
});
</script>
</head>
<body>
<div id="viewer"></div>
</body>
</html>When this page loads it throws an error stating -
Uncaught TypeError: UD is not a function
at bM (cc_kendo.all.min.js:9:4080756)
at init._loadPdfJSDocument (cc_kendo.all.min.js:9:4237913)
at new init (cc_kendo.all.min.js:9:4223589)
at HTMLDivElement.<anonymous> (cc_kendo.all.min.js:9:46168)
at Function.each (cc_jquery.3_7_1.js:2:3129)
at ce.fn.init.each (cc_jquery.3_7_1.js:2:1594)
at e.fn.<computed> [as kendoPDFViewer] (cc_kendo.all.min.js:9:46144)
at HTMLDocument.<anonymous> (cc_MyCustomPage.html:17:16)I also tried adding the module type to my custom script thinking it'd solve the problem and if I remove the type from both pdf files it throws an error stating - PDF.min.js is not loaded correctly
What could be causing this?
Thank you
Martin
Telerik team
answered
on
28 Jul 2025
10 answers
492 views
I am trying to use the PDFViewer for the first time. I am using PDFJS processing. In the examples it is easy to understand including the pdf.mjs and worker.mjs as type='module' along with kendo as type='module'. However, if I understand this correctly type='module' delays loading until after the cshtml page has completed. We use a common layout page that loads required script libraries (including kendo) as part of the page. Other parts of the layout and pages require kendo to be loaded and accessible, so it cannot be changed to type='module' without breaking stuff. Is it possible to load the PDFJS libraries as regular javascript includes rather than modules ?
1 answer
216 views
Hello,
I am using KENDOUI jQuery PDFViewer. PDFViewer essentially uses Mozilla's pdf.js library, and I was using version 2.5.207 of pdf.js. However, there are security vulnerabilities in this version (https://github.com/mozilla/pdf.js/security/advisories/GHSA-wgrm-67xf-hhpq). Mozilla has started using pdf.mjs and pdf.worker.mjs with version 4.x. How can I use these versions with PDFViewer?
How can I set the window.pdfjsLib.GlobalWorkerOptions.workerSrc assignment?
Martin
Telerik team
answered
on
01 Aug 2024
2 answers
168 views
Hi,
I am doing default PDF export functionality of Kendo Grid. But exported PDF file has extra characters in meta data. That results weird title of the PDF in Chrome browser. I have attached screen shot of the exported pdf and also a meta data of the file.
I found few solutions (https://www.telerik.com/forums/saving-grids-or-charts-as-pdf-and-getting-strange-characters-in-the-metadata) that mentioned that I need to have <meta Charset='UTF-8'> in my code, where grid has been initialized. But I have set UTF-8 charset only in my entire code, still facing same issue.
I have few questions:
1) Which charset value is getting used to export the grid in PDF? (i) <meta Charset='UTF-8'> written in my code or (ii) default export functionality has its own charset value
2) I am using Telerik.UI.for.AspNet.Core 2020.3.1021 version for kendo UI. Which specific library is being used for PDF generation in Telerik.UI.for.AspNet.Core 2020.3.1021 ?
3) Is there anything else to try to resolve this issue?
Angel Petrov
Telerik team
answered
on
17 Apr 2024
1 answer
288 views
I am having an issue getting my controller code to get called from the UI. Here is what I have tried.
<script type="text/javascript">
$(document).ready(function () {
$("#pdfViewer").kendoPDFViewer({
fromFile: {
url: "@Url.Action("DetailsReport", "ReportViewer")"
}
});
});
</script>
--RAZOR PAGE
@(Html.Kendo().PDFViewer()
.Name("pdfViewer")
)
Controller ActionMethod (never gets called).
returns File(bytes, mimeType).
Peter Milchev
Telerik team
answered
on
25 Dec 2023
1 answer
503 views
Hello,
I'm using PDF Viewer with PDF.js processing and want to limit the number of pages displayed when receiving a large PDF file because its rendering makes the page load very slow.
For example, I receive a file with 100 pages from the server and I want to render and display only the first 10, and if the user wants to view the rest, he can download the entire file.
I found some solution on github, but it requires changes to the source code of the kendo.js library. Can I do something similar with just the PDF Viewer API?
const MAX_PAGES = 3; PDFJS.getDocument(params).then((doc) => { Object.defineProperty(doc, 'numPages', { value: Math.min(doc.numPages, MAX_PAGES) }); this.pdfViewer.setDocument(doc); // Other stuff }
Neli
Telerik team
answered
on
07 Dec 2023
1 answer
211 views
Hello,
I got a custom button on my toolbar , which opens a modal, but , when i tried to open in mobile mode , it stops working
see the code below
$('#pdfViewer').css('width', '100%');
var request = new XMLHttpRequest();
request.responseType = 'blob';
request.onload = function () {
var reader = new FileReader();
reader.readAsDataURL(request.response);
reader.onload = function (e) {
$("#pdfViewer").kendoPDFViewer({
pdfjsProcessing: {
file: {
data: e.target.result.split(",")[1]
}
},
toolbar: {
items: [
"zoomInOut",
{
type: "button",
name: 'Description',
template: '<button type="button" onclick="openModal()" title="Description" class="k-button k-button-md k-button-flat" id="btn-Description"><span class="k-icon k-i-toc-section-level"></span></button>',
}
]
},
width: "100%",
height: 760
}).getKendoPDFViewer();
};
};
on browser desktop modal it works normally
Martin
Telerik team
answered
on
10 Oct 2023
1 answer
221 views
Hi,
I'm doing a quite simple implementation of saveAsPdf() for a grid. The actual PDF is fine, but the MetaData is a problem.
The PDF MetaData attributes for title, subject, keywords, author, creator and producer all contain strange/escape characters.
Here is an example of what I get every time.
Title: þÿ�M�o�d�e�l� �2�0�2�3
Subject: þÿ
Keywords: þÿ
Author: þÿ
Creator: þÿ�K�e�n�d�o� �U�I� �P�D�F� �G�e�n�e�r�a�t�o�r
Producer: þÿ�K�e�n�d�o� �U�I� �P�D�F� �G�e�n�e�r�a�t�o�r
The only one of these attributes I'm actually setting is the Title. The rest are just whatever is deemed a default value (I assume).
This happens when I produce the PDF from Chrome, Firefox or Edge.
Here's an example of the PDF Options I am using.
{
"title": "Model 2023",
"fileName": "Model2023.pdf",
"allPages": false,
"avoidLinks": true,
"paperSize": "A4",
"margin": {
"left": "1cm",
"top": "1cm",
"right": "1cm",
"bottom": "1cm"
},
"scale": 0.4,
"landscape": true,
"multiPage": true,
"repeatHeaders": true
}I have tried multiPage as true and false, which made no difference. I have included pako_deflate. I thought it might be a font issue, but it's MetaData. Not what's actually output on the PDF.
To make it even more confusing for me, your demo works perfectly. :)
FYI: Using version: 2022.3.913
If you can offer any ideas, I'd be grateful.
Thanks
John
1 answer
391 views
Hi. I'm using this plugin for jQuery to download a PDF via AJAX. Here's the code that fetches the PDF from ASP.NET Web API:
fetchFile: function (id) {
return new Promise(function (resolve, reject) {
$.ajax({
async: true,
dataType: "native", // Uses the jquery-ajax-native plugin for blobs.
type: "POST",
url: `https://someapp.org/api/files/file/fetch/${id}`,
xhrFields: { // Uses the jquery-ajax-native plugin for blobs.
responseType: "blob"
},
cache: false
}).done(function (data) {
return resolve(data);
}).fail(function (xhr, status, error) {
const errorObj = new Error(xhr.responseText || error);
return reject(errorObj);
});
});
}I would like to feed the BLOB data returned by the fetchPdf function to set the PDFViewer's data. Is this possible? Maybe PDFViewer can fetch via AJAX directly. Any examples?
Thank you.
Neli
Telerik team
answered
on
28 Jun 2023
