jquery : html2canvas alternative

497 Views Asked by At

I'm currently using the jquery library (https://cdnjs.com/libraries/jquery/3.6.0) in order to export a google visualization table to pdf. However, when executing the javascript file in a so called Sap Analytics Cloud I receive multiple errors for the library when initializing the library: /jquery/3.6.0/jquery.min.js

The errors I receive are the following:

  • TypeError: Cannot read properties of undefined (reading 'getObject')
  • Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'log')
  • Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'encodeHTML')
  • TypeError: Cannot read properties of undefined (reading 'getUriParameters')
  • Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'getUriParameters')
  • Uncaught TypeError: Cannot read properties of undefined (reading 'containsOrEquals')
  • Uncaught TypeError: Cannot read properties of undefined (reading 'assert')
  • Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'encodeHTML')
  • ...

When executing the js library in a test.html I don't receive any of those errors. I also tried to use different versions of the respecitve library but I always receive the same errors. Hence, I'm wondering if there's an alternative to those library I could use in order to export my html table to PDF.

My Code:

(function () {

**I implemented the raw content of the respective librarys at this place**
**https://www.gstatic.com/charts/loader.js
https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js**


    let template = document.createElement("template");
    template.innerHTML = `

            <style>
                :host {
                    display: block;
                    overflow-x:auto;
                
                } 
            </style> 

            <div>
            <a id="exportCSV" href="">Excel</a> 
            <div id="chart_div"></div>
            </div>
           
        `;


    class HelloWorld1 extends HTMLElement {



        constructor() {
            super();
            let shadowRoot = this.attachShadow({
                mode: "open"
            });


            shadowRoot.appendChild(template.content.cloneNode(true));
            this.addEventListener("click", event => {
                var event = new Event("onClick");
                this.dispatchEvent(event);
            });


            this._props = {};


        }




        //Fired when the widget is added to the html DOM of the page
        connectedCallback() {





            google.charts.load('current', {
                'packages': ['Table']
            });
            google.charts.setOnLoadCallback(function () {
                drawTable();
            });


            var ctx = this.shadowRoot.getElementById('chart_div');

            function drawTable() {


                var data = new google.visualization.DataTable();

                data.addColumn('string', 'Name');
                data.addColumn('number', 'Salary');
                data.addColumn('boolean', 'Full Time Employee');
                data.addRows([
                    ['Mike', {
                        v: 10000,
                        f: '$10,000'
                    }, true],
                    ['Jim', {
                        v: 8000,
                        f: '$8,000'
                    }, false]

                ]);

                var table = new google.visualization.Table(ctx);


                table.draw(data, {
                    showRowNumber: false,
                    width: '100%',
                    height: '100%'
                });



            }

        }

        //Fired when the widget is removed from the html DOM of the page (e.g. by hide)
        disconnectedCallback() {



        }

        //When the custom widget is updated, the Custom Widget SDK framework executes this function first
        onCustomWidgetBeforeUpdate(oChangedProperties) {


        }



        //When the custom widget is updated, the Custom Widget SDK framework executes this function after the update
        onCustomWidgetAfterUpdate(oChangedProperties) {




        }

        //When the custom widget is removed from the canvas or the analytic application is closed
        onCustomWidgetDestroy() {}


        //When the custom widget is resized on the canvas, the Custom Widget SDK framework executes the following JavaScript function call on the custom widget
        // Commented out by default
        /*
        onCustomWidgetResize(width, height){
        }
        */

        redraw() {


        }
    }
    customElements.define('com-sap-sample-helloworld1', HelloWorld1);
})();
0

There are 0 best solutions below