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);
})();