GridPdfExport in Vue export base64

[Sebastian]

Hi!

I would like to know how it would be possible to export base64 from the `save` function when exporting from a component.

this.$refs.gridPdfExport.save(itemsToExport);

The default behavior is to just download a pdf, I dont want this functionality.

Thanks!

[Vessy]

Hi, Sebastian,

Currently, getting the base64 string of the exported PDF is possible only when you are using directly the Kendo UI for Vue Drawing library (not gridPRDExport). You can see a sample demonstrating this approach in the following demo:

• https://www.telerik.com/kendo-vue-ui/components/pdf-processing/base64string/ 

    exportPDFWithMethod: function() {
      let gridElement = document.getElementsByClassName('k-grid')[0];

      drawDOM(gridElement, { paperSize: "A3", margin: 100 }).then((group) => {
          return exportPDF(group);
      }).then((dataUri) => {
          console.log(dataUri.split(';base64,')[1]);
      });    
      }

Kind regards,
Vessy
Progress Telerik

[Sebastian]

Hi Vessy!

Thank you, this is what I've resorted to using, was hoping there would be a quick way to configure it just to spit out the base64 and pipe it somewhere else.
My final solution:

           const PageTemplateComponent = Vue.component("div", {
              render: function (createElement) {
                return createElement("div", [
                  createElement(
                    "h1",
                    {
                      style: {
                        fontSize: "20px",
                        position: "absolute",
                        top: "10px",
                        right: "80px",
                      },
                    },
                    "Date Range:",
                  ),
                  createElement(
                    "h1",
                    {
                      style: {
                        fontSize: "15px",
                        position: "absolute",
                        top: "35px",
                        right: "60px",
                      },
                    },
                    exportedDateRange,
                  ),
                  createElement(
                    "h1",
                    {
                      style: {
                        fontSize: "20px",
                        position: "absolute",
                        top: "10px",
                        left: "80px",
                      },
                    },
                    "Report",
                  ),
                  createElement(
                    "h1",
                    {
                      style: {
                        fontSize: "15px",
                        position: "absolute",
                        top: "35px",
                        left: "80px",
                      },
                    },
                    "Location"
                  ),
                  createElement(
                    "p",
                    {
                      style: {
                        fontSize: "10px",
                        position: "absolute",
                        bottom: "20px",
                        left: "80px",
                      },
                    },
                    "Page " + this.pageNum + " of " + this.totalPages,
                  ),
                  createElement(
                    "p", 
                    {
                      style: {
                        fontSize: "10px",
                        position: "absolute",
                        bottom: "10px",
                        left: "80px",
                      },
                    },
                    "Build:" + config.global_version_number, 
                  ),
                  createElement(
                    "p",
                    {
                      style: {
                        fontSize: "10px",
                        position: "absolute",
                        bottom: "20px",
                        right: "80px",
                      },
                    },
                    "Date: " + moment().format("MM/DD/YYYY"), 
                  ),
                ]);
              },
              props: {
                pageNum: Number,
                totalPages: Number,
              },
            });

            // Instantiate and mount the component
            const templateFunction = (context: {
              pageNum: number;
              totalPages: number;
            }): string => {
              const instance = new PageTemplateComponent({
                propsData: {
                  pageNum: context.pageNum,
                  totalPages: context.totalPages,
                },
              }).$mount();
              return instance.$el.outerHTML;
            };

            let gridElement = document.getElementsByClassName(
              "grid",
            )[0] as HTMLElement;

            drawDOM(gridElement, {
              paperSize: "A4",
              template: templateFunction,
              landscape: true,
              margin: {
                top: "1cm",
                bottom: "1cm",
                left: "1cm",
                right: "1cm",
              },
              scale: 0.4,
            })
              .then((group) => {
                return exportPDF(group);
              })
              .then((dataUri) => {
                this.exportBase64 = dataUri;
              });

[Vessy]

Hi, Sebastian,

Thank you for sharing your solution with us and the community - I believe it will prove helpful for the other clients facing the same issue.

Regards,
Vessy