I am trying to print lwc component to pdf, don't want to use vf page as it will require us to maintain field additions in both lwc as well as vf page.
I tried using jspdf library , but can't query element and print. Below is the js function I have been trying to work,
generatePdf(){
var source = window.document.getElementsByTagName('c-org_roll-entry-details');
var specialElementHandlers = {
'#hidden-element': function (element, renderer) {
return true;
}
};
const { jsPDF } = window.jspdf;
const pdf = new jsPDF({
});
pdf.fromHTML(source, 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
pdf.save('summary.pdf');
//console.log(pdf.output('datauristring'));
}
Related
I'm getting this error while I try to convert certain part of my page into a PDF (the page is like a group of charts and all of them are surrounded by a container called custom-view)
This is how my function looks like:
export function handleDownloadPdf() {
const element = document.getElementsByClassName("custom-view")[3];
html2canvas(element).then(canvas => {
const imgData = canvas.toDataURL("image/png");
const pdf = new jsPDF({
unit: "px",
format: [500, canvas.height],
});
pdf.addImage(imgData, "JPEG", 0, 0);
pdf.save("download.pdf");
});
}
I'm exporting this function from a component where all of my functions are to another component where the button to start the conversion exist. The reason why I put this: const element = document.getElementsByClassName("custom-view")[3]; as a index [3] is because I have other elements with custom-view class. The height of this custom-view container is dynamic, it gets changed based on the amount of charts there are in a custom view part.
The error I get is this one:
The browser I use is: Mozilla Firefox.
I made a method « numberMatch » that push a gif, that is stored in a variable, in a tab on click. The method works well, but when i call the tab in the template instead of the gif it’s the path of the gif that shows as a string value.
Can someone tell me how to make the gif appear properly on the page instead?
The div that show the image in the tab in the template is this one:
<div>{{this.gifTab}}</div>
<script>
export default {
name:'Body',
data() {
return {
luckyNumber:'',
randomNumber:'',
number: 0,
gifCharles:require("../assets/jpg/isolation-charles.png"),
gifTab:[],
scoresTab:[],
total:0,
}
},
methods: {
RandomNumbGenerator(){
this.randomNumber = Math.floor(Math.random()*11);
return this.randomNumber
},
InputValue(){
this.luckyNumber = document.getElementById("input_lucky_numb").value;
},
NumberMatch(){
if(this.randomNumber == this.luckyNumber){
var tabGif = this.gifTab.push(this.gifCharles)
return tabGif
}
}
},
};
</script>
You need to add an image element.
Replace
{{this.gifTab}}
with
<img :src="gifTab"/>
Following is the AngularJS Code that I have used for Test Automation for a Web Application using Protractor... for example I want to click on dropdown item 3 and verfiy that I have selected option 3.
How should I do it ?
The code doesn't show any error. I'm trying to automate using Angular JS
function seldrop(element, optionNum) {
console.log('in seldrop');
var selectDropdownbyNum = function ( element, optionNum ) {
if (optionNum){
var options = element.querySelectorAll('.dropdown-toggle')
.then(function(options){
options[optionNum].click();
});
}
}
}
it('put in values', function() {
const selector = seldrop(element,'3');
console.log('\n ✓ element selected') }});
});
In my website, in order to load diferent pages (to be multipage website) I have a main panel that has the id 'content-panel'.
When I want to load a diferent page I have a javascript function that is called 'loadPage' that loads the page (panel) that I want to the 'content-panel'.
But the page that I want to load has to have this code:
Ext.require(['*']);
Ext.onReady(function() {
...
var panel = Ext.Cmp('content-panel');
panel.add(loginPanel);
panel.layout.setActiveItem(loginPanel);
panel.doLayout();
panel.setLoading(false);
});
In this case it is loading the page/panel that is loginPanel, that is defined inside Ext.onReady
For me this is fine, I don't know of any other way of my website being multi-page.
But everytime that I want to go to a page it loads that page to the 'content-panel', even if it already been loaded before. I want a way to only add the page to 'content-panel' if it is not inside 'content-panel' items.
UPDATE:
Here is the loadPage
function swap(parent, replacement, url) {
var alpha = document.querySelector(parent);
var target = alpha.childNodes[0];
var omega = document.createElement(replacement);
omega.src = url;
omega.type = 'text/javascript';
alpha.replaceChild(omega, target);
}
function loadPage(panel, toPanel) {
toPanel.setLoading(true);
swap('head', 'script', panel);
}
it is used like this: loadPage('Ctl_base/view_admin/mainPage', Ext.getCmp('panel'));
I'm using CodeIgniter with ExtJS.
What I have already tried:
I want to do panel.add(loginPanel) only if the loginPanel doesn't exist.
I have tried:
if(panel.getComponent(loginScreen) == undefined) { panel.add(loginPanel); }
and it adds the component even when panel already has that component.
I have also tried:
function hasComponent(parent, child) {
parent.items.items.forEach(function(item) {
if(item == child){
return true;
}
});
return false;
}
if(!hasComponent(panel, loginPanel)) { panel.add(loginPanel); }
and it also doesn't work.
I have manage to tackle this question by putting and itemId on the panel that I want to load, and on panel.layout.setActiveItem(loginPanel); I have put panel.layout.setActiveItem('itemIdOfPanel');
I am trying to either override or extend an existing component - the Rally.ui.PercentDone component. I want to provide it with a portfolio item with all the data necessary to render it using the same color coding Rally native apps use (the Rally Health Color Calculator).
I really just need the function to pass the correct record. Here is my idea so far:
Ext.define('Custom.PercentDone', {
requires: ['Rally.ui.renderer.template.progressbar.PortfolioItemPercentDoneTemplate', 'Rally.util.HealthColorCalculator'],
extend : 'Rally.ui.PercentDone',
alias : 'widget.cpercentdone',
config: {
record: null
},
constructor: function(config) {
config = this.config;
this.renderTpl = Ext.create('Custom.renderer.template.progressbar.PercentDoneTemplate', {
calculateColorFn: Ext.bind(function(recordData) {
console.log('called my custom coloring fn');
var colorObject = Rally.util.HealthColorCalculator.calculateHealthColorForPortfolioItemData(config.record, config.percentDoneName);
return colorObject.hex;
}, this)
});
this.renderData = config;
this.mergeConfig(config);
this.callParent([this.config]);
}
});
var custom = Ext.create('Custom.PercentDone', {
record: item,
percentDoneName: 'PercentDoneByStoryPlanEstimate',
});
but my calculate color function is not being called instead of the default.
I got it to work by overriding:
var percentDoneByStoryCountEl = Ext.create("Rally.ui.PercentDone", {
record: item,
percentDoneName: "PercentDoneByStoryCount",
percentDone: item.PercentDoneByStoryCount
});
tpl = percentDoneByStoryCountEl.renderTpl;
tpl.calculateColorFn = function (recordData) {
var colorObject = Rally.util.HealthColorCalculator.calculateHealthColorForPortfolioItemData(item, "PercentDoneByStoryCount");
return colorObject.hex;
};
Ext.override(percentDoneByStoryCountEl, {
renderTpl: tpl
});
but I would like to figure out how to do it via extending the component instead.
Thanks for your help.