I'm trying to export the html generated by the Kendo Vue Native Editor to a PDF document, using the Kendo Vue Native PDF Processing (I'm not using the Editor's embedded pdf export button, because I need to send this PDF to the backend).

I can't see any documentation about how to this. This is what I first tried:

const iframe = document.querySelector(".k-editor-content .k-iframe");
      const htmlElementContent = iframe.contentWindow.document.querySelector("html")

      savePDF(htmlElementContent, {
        paperSize: "A4"
      });

But then I got this error: "DOMException: Failed to execute 'insertBefore' on 'Node': Only one element on document allowed."

To bypass this error, I tried to manipulate the Iframe content first:

const iFrameDocument = document.querySelector(".k-editor-content .k-iframe").contentWindow.document;
      const iFrameRootHtml = iFrameDocument.querySelector("html")
      const newSection = iFrameDocument.createElement('section');
      newSection.appendChild(iFrameRootHtml);
      iFrameDocument.appendChild(newSection);

      const newRoot = newSection.querySelector("html");

      savePDF(newRoot, {
        paperSize: "A4"
      });

With the above code I'm able to generate an PDF, but with no embedded fonts at all. Also, if I try to drag an image into the editor (the editor transforms it into a base64 string) and then generate the PDF, I got this error: "DOMException: Failed to execute 'appendChild' on 'Node': Only one element on document allowed."

Still regarding the fonts, I'm declaring them in the style section of the html that is inside the iframe content, using the onLoaded event of the Editor (https://www.telerik.com/kendo-vue-ui/components/editor/styling-content/). I'm also declaring them on the outer content (the main website). The fonts are hosted on my own website. Still, no embedded fonts on the generated PDF.

Also, to the Telerik forum admins, I just noted that there is no tag available neither for the Native Editor or the native PDF Processing, so I'm forced to tag this question with wrong/generic tags.

Any help will be appreciated, thanks in advance.

I can't export my grid to Pdf. On console, this error shows up:

TypeError: allVue.extend is not a function
    at KendoDrawingAdapter.convertPageTemplateToHtml (KendoDrawingAdapter.js?cc56:50:1)
    at eval (core.js?4739:362:1)
    at eval (core.js?4739:466:1)
    at Array.forEach (<anonymous>)
    at doPageBreak (core.js?4739:465:1)
    at next (core.js?4739:1168:1)
    at whenImagesAreActuallyLoaded (core.js?4739:1164:1)
    at handlePageBreaks (core.js?4739:450:1)
    at eval (core.js?4739:308:1)
    at next (core.js?4739:1168:1)

Trying to replicate the issue, I forked this working example from kendo website (https://www.telerik.com/kendo-vue-ui/components/grid/pdf/) into StackBlitz and just changed the Vue package version to the latest v2 (https://stackblitz.com/edit/twqkkz?file=src%2Fmain.vue,package.json).

By just doing that the page has broken with the following error:

TypeError: (0 , vue_1.createTextVNode) is not a function
    at templateFn (main.vue:7:60)
    at Object.eval (main.vue:144:1)
    at eval (main.vue:170:4)
    at eval (main.vue:171:3)
    at eval (<anonymous>)
    at Qt (webcontainer.4131d213adf6116ed795350ac232389585e09527.js:15:30145)
    at webcontainer.4131d213adf6116ed795350ac232389585e09527.js:15:38799
    at U (webcontainer.4131d213adf6116ed795350ac232389585e09527.js:15:13565)
    at webcontainer.4131d213adf6116ed795350ac232389585e09527.js:15:13207
    at Object.eval (main.js:7:36)

So I'm not sure about what is happening, but it seems to be an incompatibility issue with Vue 2.

Hi

I have a question about scheduler's pdf export style.

I am using eventTemplate to show multiple lines of additional information in one event.

And when exporting to pdf, using .k-pdf-export to increase the font size of additional information in the event.

And I added the code below to increase not only the font size, but also the height of the scheduler table and the height of each event.

As a result, the height size increased as desired, but the height gap between the events did not widen, resulting in an unnatural appearance (see attached file).

When exporting in pdf, how can I increase the font size, event height, table height, and the interval between events to be constant as I want?

It seems to me that I need to modify the "top" property(css style) of each event div in the scheduler.

Anyway, I would be grateful if you could tell me how to do it.

Hi,

Here is the example.

https://stackblitz.com/edit/tobv8y?file=src%2Fmain.vue

The column "ProductID" is locked.

When I export PDF, this column doesn't show on PDF file. (As pic)

How can I export PDF with locked column?
Thank you!

Here (below) is my attempt to "use" the Grid's PDF export feature.   I'm getting the error:   Property 'save' does not exist on type 'Vue | Element | Vue[] | Element[]'.
Property 'save' does not exist on type 'Vue'.Vetur(2339)

here is my function...

    private exportPDF() {
      (this.$refs.GridPdfExport).save(this.rosterItems);
    }

So is this because the GridPdfExport requires Vue 3.0?   (we are currently on Vue 2.0 current)

PS C:\Dev Projects\HealthQlix\Scheduler> npm install --save @progress/kendo-vue-pdf
npm WARN @progress/kendo-vue-excel-export@1.1.0 requires a peer of vue@^3.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @progress/kendo-vue-common@1.1.0 requires a peer of vue@^3.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN vue-jest@3.0.6 requires a peer of babel-core@^6.25.0 || ^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @progress/kendo-vue-pdf@1.1.0 requires a peer of vue@^3.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @progress/kendo-vue-common@1.1.0 requires a peer of vue@^3.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\mochapack\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\fork-ts-checker-webpack-plugin\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ @progress/kendo-vue-pdf@1.1.0
updated 1 package and audited 2057 packages in 16.163s

I tried to export PDF with method in my project(using vue). But , the following error occurred.

ttf.js:50 Uncaught Error: Table loca not found in directory
    at Directory.readTable (ttf.js:50:1)
    at TTFFont.parse (ttf.js:1210:1)
    at new TTFFont (ttf.js:1202:1)
    at eval (core.js:267:1)
    at req.onload (core.js:246:1)

How can I solve this problem?

Hi i want to ask about editor in native component like in this demo Link
so i have 2 problem so far when implementing editor.
first question is when i set value in v-model and load page, i can get value after load finish but i cant type anything in editor
this is my setup code :

second question is that popup tools css like insert image or insert code looks broken when i open it
i upload screenshot for your reference about my second question

you can ask more detail if my question is confusing
thanks

So this is my datasource... I would assume the schema is what it would read to render the properties in the sheet, but it's just verbatim taking the JSON object and plopping it in.  So example, there's a LastUpdated property on each object, it's not defined in the schema... but it's rendering in the sheet.

Am I missing something?

 dataSource: {
            transport: {
                dataType: "json",
                read: {
                    url: this.baseUrl + "/groups?format=json",
                    type: "GET",
                    data: function () {
                        return {
                            cohort: $editorData.cohort
                        };
                    }
                },
                /*
                update: {
                    url: baseUrl + "/groups?format=json",
                    dataType: "json",
                    type: "POST"
                },
                */
            },
            requestEnd: function (e) {
                var response = e.response;
                var type = e.type;
                
                console.log("requestEnd", type, response);
            },
            schema: {
                model: {
                    id: "UserId",
                    fields: {
                        UserName: { type: "string", editable: false },
                        FirstName: { type: "string", editable: false },
                        LastName: { type: "string", editable: false },
                        Campus: { type: "string", editable: false },
                        Cohort: { type: "number", editable: false },
                        MF1: { type: "number" },
                        MF3: { type: "number" },
                        MF4: { type: "number" },
                        MF2: { type: "number" },
                        MF5: { type: "number" },
                        ClerkshipGroup: { type: "number" },
                        PediatricsStream: { type: "number" },
                        ProCompGroup: { type: "number" }
                    }
                }
            },

            <kendo-spreadsheet 
              ref="spreadsheet"
             :toolbar="false" 
             :sheetsbar="false"
             :excel-proxy-URL="'/RestApi/utility/proxy/save'"
             :pdf-proxy-URL="'/RestApi/utility/proxy/save'"
             :columns="15"
             :rows="300"
             style="width: 100%; height: 800px">
                        <kendo-spreadsheet-sheet 
                            :name="'Groups'" 
                            :data-source="dataSource"
                            :rows="rows"
                            :columns="columns"
                        >
                        </kendo-spreadsheet-sheet>
            </kendo-spreadsheet>

I am loading the kendo vue ui chart and displaying that in bootstrap cards (which is inside the bootstrap tab).
But some reason that that doesn't cover the entire width of the cards and render being so small.
There is already the style as: width: 100%; height: 100%; in the SVG of the chart but that doesn't expand. But when I changed some data then it occupies the full width.

Why it is not rendering properly initially? What's the issue causing this and what is the workaround for this?

http://jsfiddle.net/pdLncxoy/