This is a migrated thread and some comments may be shown as answers.

Send PDFExportComponent output to blob/file

8 Answers 577 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Ron
Top achievements
Rank 1
Iron
Ron asked on 26 Sep 2018, 09:16 PM

Right now I have two things up and running 1) the Kendo Angular pattern for using .saveAs(filename) to generate pdfs from html elements and 2) a way of saving File objects to a document library in SQL.I'd like to see if I can bridge the two by saving the finished pdfs directly to SQL by passing them to my upload component as File objects.

Is there a way to catch the finished pdf at the saveAs method invocation as a File or Blob object? Is the export method what I'd need instead and if so could you show me a demo of what the syntax should look like? If you can advise me on how to capture the file or file body correctly I can take it from there.

8 Answers, 1 is accepted

Sort by
0
Svet
Telerik team
answered on 28 Sep 2018, 01:16 PM
Hi Ron,

We can use the export method of the PDF Export component, which returns a promise with the dataUri. Then we can convert the dataUri to base64 or to a File object using the function demonstrated in the following StackOverflow question:
https://stackoverflow.com/questions/35940290/how-to-convert-base64-string-to-javascript-file-object-like-as-from-file-input-f

Check the following example demonstrating this approach:
https://stackblitz.com/edit/angular-mpxzai-7zgdkc?file=app/app.component.ts

I hope this points you in the right direction of achieving the desired custom functionality.

Regards,
Svetlin
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Ron
Top achievements
Rank 1
Iron
answered on 01 Oct 2018, 03:37 PM

Svetlin,

 

Thank you. I was able to tweek some things and get a variation on the stackblitz example working.

The code below is an example with two buttons, saveAs() doing the normal export and asyncSaveToLibrary() taking on the blob creation and handoff to uploadToLibraryService.uploadsingleton:

 

  async asyncSaveToLibrary() {
    let pdfSave = await this.pdfSaveAs()
    let file2export = await this.export(this.pdf)
    this.uploadToLibraryService.uploadsingleton(file2export)
  }

  async pdfSaveAs() {
    this.filename = 'test.pdf'
    this.pdf.fileName = this.filename
    this.pdf.saveAs(this.filename)
  }

  async export(pdfComponent: any) {
    let processedUri: any
    let baseprocess = await pdfComponent.export().then((group: Group) => exportPDF(group)).then((dataUri) => {
      const base64 = dataUri.replace('data:application/pdf;base64,', '');
      processedUri = dataUri
    });
    const fileObject = await this.dataURLtoFile(processedUri, this.filename);
    return fileObject
  }

  async dataURLtoFile(dataurl, filename) {
    let file: any
    let dataURL = new Promise(resolve => {
      var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      let newFile = new File([u8arr], filename, { type: mime });
      file = newFile
      resolve(newFile)
    })
    return file
  }

0
Svet
Telerik team
answered on 03 Oct 2018, 07:27 AM
Hi Ron,

I am glad, that the provided information helped you to achieve the desired custom functionality. I will set this case to solved now. In case further assistance is required, you can reopen the thread by sending a new message to it.

Regards,
Svetlin
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Benedikt
Top achievements
Rank 3
Iron
Iron
Iron
answered on 27 Jan 2020, 10:47 AM

Hi,

i tried to recreate this. But i always get an error when calling the exportPDF() Function: "TypeError: Cannot read property 'bbox' of undefined" (more details in the attached file)

Is the some updates / changes i have to consider? 

0
Svet
Telerik team
answered on 29 Jan 2020, 10:36 AM

Hi Benedikt,

Thank you for the provided screenshot of the error.

However, I am a bit confused as the Kendo UI for Angular PDFExport component provides an export() method rather than an exportPDF() function. Thus calling the exportPDF() method should throw an error that such function doesn't exist.

Could you provide some more relevant details about the implemented code, so that we can understand the control/component that is used in this case. Thank you in advance.

I would also like to add, that opening a new private support ticket about the specifically used component seems better in such scenarios. That would help us to keep a clean history of the forum and provide a better support service in general.

Regards,
Svetlin
Progress Telerik

Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Benedikt
Top achievements
Rank 3
Iron
Iron
Iron
answered on 03 Feb 2020, 08:20 AM

I tried to implement the stackblitz example mentioned in the post above.

https://stackblitz.com/edit/angular-mpxzai-7zgdkc?file=app/app.component.ts

There is the exportPDF() function in use. Imported from progress.

import { exportPDF, Group } from '@progress/kendo-drawing';

This is, why i didnt open a new thread, because I refered to the posts above. Sorry for the inconvenience!

Can you tell me, if there any changes to the function exportPDF() ?

Thanks for the help!!!

0
Svet
Telerik team
answered on 04 Feb 2020, 12:56 PM

Hi Benedikt,

I will provide some general information on this case.

The export() function of PDFExportComponent returns a promise that provides the content as a Group available for any further processing:

https://www.telerik.com/kendo-angular-ui/components/pdfexport/api/PDFExportComponent/#toc-export

The exportPDF() function is used to export a Group of drawing elements as demonstrated in the following article:

https://www.telerik.com/kendo-angular-ui/components/drawing/api/pdf/exportPDF/

The source code of that function hasn't been changed recently.

One possible reason for the demonstrated error is if some data-visualizing Kendo UI widgets for jQuery are tried to be exported. Indeed, such functionality is listed as a limitation of the Kendo UI for Angular drawing api:

https://www.telerik.com/kendo-angular-ui/components/drawing/limitations-browser-support/

I opened a new private ticket 1452194 where we can keep any further communication in order to clarify what is required. That will help us to better understand the use-case scenario and provide further assistance on this case. Let's keep any future communication there. Thank you in advance.

Regards,
Svetlin
Progress Telerik

Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Dev
Top achievements
Rank 1
Iron
Iron
answered on 11 Jun 2021, 06:51 AM

hi

can i use the same way in kendo-grid-pdf ?

 

like this

https://stackblitz.com/edit/angular-ivy-gwocuf?file=src%2Fapp%2Fapp.component.ts

 

 

Regards,
Svetlin
Progress Telerik

Svet
Telerik team
commented on 11 Jun 2021, 12:15 PM

Hi,

The export() method is available for the PDF Export component:

https://www.telerik.com/kendo-angular-ui/components/pdf-export/api/PDFExportComponent/#toc-export

The same method isn't provided by the kendo-grid-pdf component:

https://www.telerik.com/kendo-angular-ui/components/grid/api/PDFComponent/

Thus you would need to rely on the PDF Export to achieve the requirement.

 

Tags
General Discussions
Asked by
Ron
Top achievements
Rank 1
Iron
Answers by
Svet
Telerik team
Ron
Top achievements
Rank 1
Iron
Benedikt
Top achievements
Rank 3
Iron
Iron
Iron
Dev
Top achievements
Rank 1
Iron
Iron
Share this question
or