I have a one page application in angular.
To create a PDF page from the HTML content I using jsPDF library.
In the index page there is a function that create PDF from this div:
(notice, this is a ng-view div)
The div
<div id="doPDF" ng-view></div>
But it is not successful.
the error
TypeError: undefined is not a function
The Js code
$scope.createPDF=function(){
var pdf = new jsPDF('p','pt','a4')
, source = $('#doPdf')[0]
, specialElementHandlers = {
'#aaa': function(element, renderer){
return true
}
}
margins = {
top: 80,
bottom: 60,
left: 40,
width: 522
};
pdf.fromHTML(
source // HTML string or DOM elem ref.
, margins.left // x coord
, margins.top // y coord
, {
'width': margins.width // max width of content on PDF
, 'elementHandlers': specialElementHandlers
},
function (dispose) {
pdf.save('Test.pdf');
},
margins
)
}
(In other div-s the DPF generator function work without problem.)
What can I do to generate PDF page from ng-view?
(I want one function that work from the index page and take the content from the ng-view.)
Related
I have figma design 2380х3368.
So, I create pdf with such parameters:
const doc = new jsPDF({orientation: 'portrait',unit: 'px', userUnit: 300, format: [2780, 3368]});
and:
doc.html(pageTemplate.querySelector('html'), {
callback: function(doc) {
doc.save('pdf-template.pdf');
},
margin: [0,0,0,0],
});
But this size is too big for printing pdf. I want dpi 300, so it would be ok, but I can't find where to put this in jsPDF
I am trying to interact with slick grid and I used the below code
JavascriptExecutor js = (JavascriptExecutor)driver;
//Returns the DIV element matching class grid-canvas, which contains every data row currently being rendered in the DOM.
WebElement rowCount = (WebElement) js.executeScript("return grid.getCanvasNode();");
but it is returning the error saying grid not defined.
I figured out that I have to define the grid for getting the above code to work.
The definition of the grid is as below which has to be defined
var grid;
var columns = [
{id: "Date", name: "Date", field: "Date"},
{id: "tpn", name: "tpn", field: "tpn"},
];
var options = {
enableCellNavigation: true,
enableColumnReorder: true,
explicitInitialization: true
};
$(function () {
var data = [];
for (var i = 0; i < 500; i++) {
data[i] = {
Date: "20180612",
SPN:Math.random(),
};
var myGrid = $("<div id='MovementTracker' style='height: 399px; overflow: hidden; outline: 0px; position: relative;'></div>");
grid = new Slick.Grid(myGrid, data, columns, options);
myGrid.appendTo($("#app > div > div > div > div > div.size--5.padding--horizontal--double > div.size--content > div > div > div"));
grid.init();
As the definition is multiline, I am struck here how to execute this multiline javascript code in selenium to make grid initialised.
Any help would be much appreciated
This is all about Javascript scope.
I know SlickGrid, but not Selenium. The grid variable is presumably a member of Document because it's not explicitly scoped. If Selenium executes in a different scope, you'd have to reference it as a member of Document. But it depends on the order of creation of the various scopes and objects.
I want to add an animation on a new div that i created after clicking on the save button. The animation works when the div exists already on the page (on an update) but it's not working on a new div :
$scope.save(bookId) = function {
$scope.books.unshift(newBook);
var bookDivContainer = $("#bookContainer-" + bookId);
bookDivContainer.animate({ opacity: '0.4' }, "fast");
bookDivContainer.animate({ opacity: '0.9' }, "slow");
}
There's a way to call animate on a new element just created ? something like .on ?
Thanks
I'm trying to create a pdf from my view created with angular. The problem is that the pdf looks like this:
Is it not able to work out the angular markup?
var docDefinition = { content: printHtml };
pdfMake.createPdf(docDefinition).download('optionalName.pdf');
Pdfmake is doing its work correctly, it is printing all the raw html to the pdf.
You want it to print in html but pdfmake doesn't work like this, by giving html code you can not generate a formatted pdf file, you will have to create a javascript object having document definition in it, this document definition contains your content and styles.
You can follow this link for basic example and check out some more complex examples here on github page of pdfmake.
Good Luck
// use npm package and initialise the pdfMake.
const pdfMake = require('pdfmake/build/pdfmake.js')
const pdfFonts = require('pdfmake/build/vfs_fonts.js')
pdfMake.vfs = pdfFonts.pdfMake.vfs
function showPDF() {
const statHeader = { text: data in header not the Header
header,bold: true}
const content = preparePDF(yourHTML)
const statFooter = 'data in footer not Footer footer, To add a
footer check the pdfMake documentation for footer.'
const name = ''
const docDefinition = {
// Add page count
footer: function (currentPage, pageCount) {
return {
margin: 10,
columns: [{ text: currentPage.toString() + ' of ' +
pageCount, alignment: 'center' }]
}
},
header: { text: name, style: 'gameName' },
content: [
statHeader,
content,
statFooter
],
styles: {
gameName: {
fontSize: 16,
bold: true,
alignment: 'left',
margin: [40, 20, 0, 80]
}
}
}
// creates pdf formated file with give name.
pdfMake.createPdf(docDefinition).download(`${name}.pdf`)
}
Wrap it in a function like
const htmlToPDF = require('html-to-pdfmake')
function preparePDF (yourHTML) {
let htmltoPDFData = []
const html = <div>yourHTML</div>
htmltoPDFData = htmlToPDF(html)
return htmltoPDFData
}
I am creating a simple drag and drop layout that incorporates 4 columns with the use of CSS easing effects when positioning. I have tried multiple solutions but nothing solves the problem. Eventually this will be an angularjs app.
Heres the JSfiddle (this is four columns so spread your browser to view the whole layout)
You will notice when you drag a module that sometimes it will let you snap to the grid and show the "placeholder" and some times it won't.
Sometimes the ".placeholder" which is the ".marker" in my example will randomly place the .marker div above the containing li elements causing this to happen.
Link to marker image
Is there a way to force the element to always be on the bottom element of all the li items of a parent ul?
Any help would be greatly appreciated!
var stylesheet = $('style[name=impostor_size]')[0].sheet;
var rule = stylesheet.rules ? stylesheet.rules[0].style : stylesheet.cssRules[0].style;
var setPadding = function(atHeight) {
rule.cssText = 'border-top-width: '+atHeight+'px';
};
$('.button-up').click(function(){
updateWidgetData();
});
$('.main-area ul').sortable({
connectWith: '.column',
cursor: 'move',
placeholder: 'marker',
forcePlaceholderSize: true,
opacity: 0.4,
start: function(event, ui){
setPadding(ui.item.height());
},
stop: function(event, ui){
ui.item.css({'top':'0','left':'0'}); //Opera fix
if(!$.browser.mozilla && !$.browser.safari)
updateWidgetData();
var next = ui.item.next();
next.css({'-moz-transition':'none', '-webkit-transition':'none', 'transition':'none'});
setTimeout(next.css.bind(next, {'-moz-transition':'border-top-width 0.1s ease-in', '-webkit-transition':'border-top-width 0.1s ease-in', 'transition':'border-top-width 0.1s ease-in'}));
}
}).disableSelection();
function updateWidgetData() {
var items = [];
$('.column').each(function() {
var columnId=$(this).attr('id');
$('.dragbox', this).each(function(i) {
var item = {
id: $(this).attr('id'),
order : i,
column: columnId
};
items.push(item);
});
});
var sortorder = { items: items };
//Pass sortorder variable to server using ajax to save state
$.post('updatePanels.php', 'data='+$.toJSON(sortorder), function(response) {
if(response=="success")
$("#console").html('<div class="success">Saved</div>').hide().fadeIn(1000);
setTimeout(function() {
$('#console').fadeOut(1000);
}, 2000);
});
}