Questions on Kendo UI for Angular Forum

1 answer

11 views

Hi Team,

Is there a possibility to render form PDF on a PDF Viewer. Also Need a option to do digital signature on the PDF form

Regards,
Christo

PDFViewer

Signature

answered on 11 Apr 2024

0 answers

19 views

npm_package error in Kendo Pdf Viewer

Hi All,

We are using angular kendo ui pdf viewer version "13.2.0"

Angular version "15.0.4"

we are getting this error when we run ng serve or ng build

Error: node_modules/pdfjs-dist/types/src/display/text_layer.d.ts:119:41 - error

TS2552: Cannot find name 'OffScreenCanvasRenderingContext2D'. Did you mean 'Canv

asRenderingContext2D'?



119         ctx: CanvasRenderingContext2D | OffScreenCanvasRenderingContext2D |

null;

                                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~



  node_modules/typescript/lib/lib.dom.d.ts:3495:13

    3495 declare var CanvasRenderingContext2D: {

                  ~~~~~~~~~~~~~~~~~~~~~~~~

    'CanvasRenderingContext2D' is declared here.

Also attaching the error snapshot and also attaching the projects package.json file

Here is the package.json file as well for your reference.

{
  "name": "test",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "serve": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng serve",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^15.0.4",
    "@angular/cdk": "^14.0.3",
    "@angular/common": "^15.0.4",
    "@angular/compiler": "^15.0.4",
    "@angular/core": "^15.0.4",
    "@angular/forms": "^15.0.4",
    "@angular/localize": "^15.0.4",
    "@angular/material": "^14.0.3",
    "@angular/platform-browser": "^15.0.4",
    "@angular/platform-browser-dynamic": "^15.0.4",
    "@angular/router": "^15.0.4",
    "@angular/service-worker": "^15.0.4",
    "@metismenu/angular": "0.0.2",
    "@ng-bootstrap/ng-bootstrap": "^12.1.2",
    "@ngx-translate/core": "^14.0.0",
    "@ngx-translate/http-loader": "^7.0.0",
    "@popperjs/core": "^2.11.5",
    "@progress/kendo-angular-buttons": "^13.2.0",
    "@progress/kendo-angular-charts": "^13.2.0",
    "@progress/kendo-angular-common": "^13.2.0",
    "@progress/kendo-angular-dateinputs": "^13.2.0",
    "@progress/kendo-angular-dialog": "^13.2.0",
    "@progress/kendo-angular-dropdowns": "^13.2.0",
    "@progress/kendo-angular-editor": "^13.2.0",
    "@progress/kendo-angular-excel-export": "^13.2.0",
    "@progress/kendo-angular-grid": "^13.2.0",
    "@progress/kendo-angular-icons": "^13.2.0",
    "@progress/kendo-angular-indicators": "^13.2.0",
    "@progress/kendo-angular-inputs": "^13.2.0",
    "@progress/kendo-angular-intl": "^13.2.0",
    "@progress/kendo-angular-l10n": "^13.2.0",
    "@progress/kendo-angular-label": "^13.2.0",
    "@progress/kendo-angular-layout": "^13.2.0",
    "@progress/kendo-angular-listbox": "^13.2.0",
    "@progress/kendo-angular-listview": "^13.2.0",
    "@progress/kendo-angular-menu": "^13.2.0",
    "@progress/kendo-angular-navigation": "^13.2.0",
    "@progress/kendo-angular-pager": "^13.2.0",
    "@progress/kendo-angular-pdf-export": "^13.2.0",
    "@progress/kendo-angular-pdfviewer": "^13.2.0",
    "@progress/kendo-angular-popup": "^13.2.0",
    "@progress/kendo-angular-progressbar": "^13.2.0",
    "@progress/kendo-angular-scheduler": "^13.2.0",
    "@progress/kendo-angular-sortable": "^13.2.0",
    "@progress/kendo-angular-toolbar": "^13.2.0",
    "@progress/kendo-angular-tooltip": "^13.2.0",
    "@progress/kendo-angular-treelist": "^13.2.0",
    "@progress/kendo-angular-treeview": "^13.2.0",
    "@progress/kendo-angular-upload": "^13.2.0",
    "@progress/kendo-angular-utils": "^13.2.0",
    "@progress/kendo-data-query": "^1.6.0",
    "@progress/kendo-drawing": "^1.17.5",
    "@progress/kendo-font-icons": "^1.8.0",
    "@progress/kendo-licensing": "^1.3.5",
    "@progress/kendo-svg-icons": "^1.8.0",
    "@progress/kendo-theme-bootstrap": "^6.6.0",
    "@progress/kendo-theme-material": "^6.6.0",
    "@types/xml2js": "^0.4.11",
    "angular-material-sidenav": "^0.1.1",
    "bn-ng-idle": "^2.0.1",
    "bootstrap": "^5.1.3",
    "copy-image-clipboard": "^2.1.2",
    "exceljs": "^4.3.0",
    "file-saver": "^2.0.5",
    "hammerjs": "^2.0.0",
    "html2canvas": "^1.4.1",
    "i": "^0.3.7",
    "moment": "^2.29.3",
    "ng-recaptcha": "^8.0.1",
    "ngx-nestable": "^0.9.4",
    "ngx-perfect-scrollbar": "^10.1.1",
    "ngx-spinner": "^13.1.1",
    "npm": "^8.13.2",
    "rxjs": "~7.5.0",
    "stimulsoft-reports-js": "^2023.2.3",
    "timers": "^0.1.1",
    "tslib": "^2.3.0",
    "xml2js": "^0.4.23",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.0.4",
    "@angular/cli": "^15.0.4",
    "@angular/compiler-cli": "^15.0.4",
    "@types/file-saver": "^2.0.5",
    "@types/jasmine": "~3.10.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~4.0.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.1.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.8.4"
  }
}

PDFViewer

updated question on 04 Apr 2024

2 answers

80 views

kendo-angular-pdfviewer build error asking for pdfjs-dist

I am having an issue with compiling angular (webpack) after adding @progress/kendo-angular-pdfviewer@14.3.0. It is referencing pdfjs-dist in the error. I do not see anywhere in the Getting Started > Dependencies about pdfjs-dist being needed. The StackBlitz demo does not contain that library either. When I try adding the pdfjs-dist module (either latest 4.0 or earlier 3.11), more errors occur related to pdfjs-dist. My tsconfig.json compilerOptions has module=es2020 and target=es2022. I do not have issues with any other @progress/kendo-angular-xxxxxx modules, and the @progress/kendo-license is included. Here is the error without pdfjs-dist module installed:

ERROR in ./node_modules/@progress/kendo-angular-pdfviewer/fesm2020/progress-kendo-angular-pdfviewer.mjs 17:0-43
Module not found: Error: Can't resolve 'pdfjs-dist/build/pdf.worker.entry' in '[path to project]\node_modules\@progress\kendo-angular-pdfviewer\fesm2020'
Did you mean 'pdf.worker.entry.js'?
BREAKING CHANGE: The request 'pdfjs-dist/build/pdf.worker.entry' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
resolve 'pdfjs-dist/build/pdf.worker.entry' in '[path to project]\node_modules\@progress\kendo-angular-pdfviewer\fesm2020'
Parsed request is a module
using description file: [path to project]\node_modules\@progress\kendo-angular-pdfviewer\package.json (relative path: ./fesm2020)
Field 'browser' doesn't contain a valid alias configuration
resolve as module

PDFViewer

answered on 13 Mar 2024

1 answer

30 views

Is it possible to draw/enrich on the kendo-pdfviewer in Angular.

Kendo UI is it possible to draw directly on the kendo-pdfviewer from the angular component library.
Things II have tried:
-embedding it in a drawing component to draw over - the problem here being that the kendo-pdfviewer is removed from the page completely to make way for the canvas
-I tried to super impose the canvas over the kendo-pdfviewer with a relative off set of -y in CSS - The problem here was that although it worked for the most part the canvas then blocked the PDF controls such as scrolling (especially if set to the same size).
-I tried to hook the canvas in the PDF to draw - here I just did not see any success. It seemed like either I was drawn over or it simply was not used. Not the canvas is height="2376" x width="1836"
Here is some rough code for the last option I tired:

public pdfLoad(pdfViewerLoadEvent: PDFViewerLoadEvent)
  {
    this.pdfViewerContext = pdfViewerLoadEvent.context;
    this.pdfViewerContext.pdfDoc.getPage(1).then(async (page)=>{
      var scale = this.pdfViewerContext.zoom;
      var viewport = page.getViewport({scale});
      var canvas: HTMLCanvasElement  = document.getElementById('the-canvas') as HTMLCanvasElement;
      var context = canvas.getContext('2d')!;

      canvas.width = Math.floor(viewport.width * scale);
      canvas.height = Math.floor(viewport.height * scale);
      canvas.style.width = Math.floor(viewport.width) + "px";
      canvas.style.height =  Math.floor(viewport.height) + "px";

      context.beginPath();
      context.arc(300, 300, 100, 0, 2);
      context.stroke();

      var transform: number[] | undefined = scale !== 1
         ? [scale, 0, 0, scale, 0, 0]
         : undefined;
      var transform: number[] | undefined = [2,0,0]

      await page.render({
          canvasContext: context!,
          transform: transform,
          viewport: viewport
      });

      context.beginPath();
      context.arc(300, 300, 100, 0, 2);
      context.stroke();
    });
  }

Drawer

Drawing

PDFViewer

updated answer on 11 Mar 2024

1 answer

44 views

PDFViewer print action does not display/print the PDF a the right size

Hello,

We have implemented the pdf viewer using : "@progress/kendo-angular-pdfviewer": "^15.0.1". It works very well for our purpose.
But there is still a small issue with the print action. As another user stated here the print action sort of adds a "padding" to the pdf, making it roughly 25% smaller than the original.

As you can see in attached files, the pdf displays correctly in the viewer, but as soon as you open the print menu, it shrinks (and becomes black and white ? maybe just displays shenanigans).

What I've tried so far: playing with zoom, playing with scales, playing with marges, but I can't make it appear "100%".

On the third attached files, you can see that the added footer seems to have the right size. Maybe it has to do with this ?

Can you help me ?

Thanks!
jls

PDFViewer

answered on 21 Feb 2024

2 answers

54 views

PDFViewer print does not take full page

When printing a document with the new PDFViewer, it seems like the document does not take the full page on print. You can look at the attachement the result I get by trying to print the document found in the Angular PDFViewer Example documentation on the telerik website. Is this a bug or is there an option to specify the document should take the full page?

PDFViewer

answered on 21 Feb 2024

0 answers

30 views

PDFViewer Rotating Image

PDFViewer is showing images rotated on some of our systems. On this particular user it shows up rotated on Chrome, Edge, and Firefox. This is happening on at least 2 computers. When they open the PDF directly, the native browser view shows the PDF in the correct orientation. I don't see a rotation function in the API. Fortunately (or unfortunately?), this isn't happening on every system. I'm at a loss to what's happening.

PDFViewer

asked on 02 Feb 2024

1 answer

54 views

<kendo-pdfviewer/> toolbar option search malfunction

I’m using Kendo PDFViewer ver 13.1.0, and this is what my codes look like:

<kendo-pdfviewer
[url]="url"
(load)="onLoad($event)"
[zoom]="0.75"
[saveFileName]="filename"
(pageChange)="onPageChange($event)"
(error)="onError($event)"
[ngStyle]="{ height: height + 'px' }"
></kendo-pdfviewer>

As you can see I didn’t set any toolbar on it and by default it should show all the toolbar options that is included by the package,

But the issue here is that if the user start to search using the ‘search’ from toolbar option, it is somehow broken as you can see in the picture. The detected key is not highlighted properly.

Can someone assist me with this concern?

Thanks!