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
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
Rank 1
Iron
Iron
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
}
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
Rank 3
Iron
Iron
Iron
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?
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
Rank 3
Iron
Iron
Iron
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!!!
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
Rank 1
Iron
Iron
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
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.