i am trying to run this code before converting html to pdf to give all elements the same height.
<script>
var rowWrappArr = [...document.querySelectorAll(".block__row-wrapp")];
rowWrappArr.forEach((currentRow, index) => {
var currentRowWrappHeight = rowWrappArr[index].offsetHeight;
var currentRowElemsArr = [...currentRow.children];
currentRowElemsArr.forEach((currentRowChild) => {
var currentRowChildElem = [...currentRowChild.children][0];
if (currentRowChildElem && currentRowChildElem.style) {
currentRowChildElem.style.height = currentRowWrappHeight + "px";
}
});
});
</script>
i use command
wkhtmltopdf ../../test.html --enable-javascript --javascript-delay
10000 test.pdf
but i get only white sheet as a result. I'm not sure if I understand correctly how wkhtmltopdf works with javascript. I also tried using var according to one of the tip it did not help. wkhtmltopdf version is 0.12.5
Related
I am stuck with a problem and I cannot figure out what the cause is, I have created a small js script that modifies a table element, but every time it does I see flickering of the elements, I checked the HTML elements and there is no white space or whatsoever.
Short video: https://i.imgur.com/86RODJL.mp4
Is it possible an css property that causes this behavior ?
Tried to troubleshoot by inspecting the html elements for white space or similar.
JS function:
function correctOrderQtyMinus(element) {
var elementTR = element.parentNode.parentNode.parentNode;
var totalExBTW = document.getElementById('totalExBTW');
var totalBtw = document.getElementById('totalBtw');
var btwAmount = document.getElementById('btwAmount');
if(document.getElementById('checkoutForm')) {
if(element.parentNode.querySelector('#productQty').value > 1) {
var newAmount =+ parseFloat(elementTR.querySelector('#productPriceTotalBtw').innerText) - parseFloat(elementTR.querySelector('#productPriceWithBtw').innerText);
elementTR.querySelector('#productPriceTotalBtw').innerText =+ newAmount.toFixed(2);
totalExBTW.innerText =+ (parseFloat(totalExBTW.innerText)- parseFloat(elementTR.querySelector('#productPriceExBtw').innerText)).toFixed(2);
totalBtw.innerText =+ (parseFloat(totalBtw.innerText) - parseFloat(elementTR.querySelector('#productPriceWithBtw').innerText)).toFixed(2);
btwAmount.innerText = parseFloat(totalBtw.innerText - totalExBTW.innerText).toFixed(2);
totalBtw.innerText = parseFloat(totalBtw.innerText).toFixed(2);
totalExBTW.innerText = parseFloat(totalExBTW.innerText).toFixed(2);
elementTR.querySelector('#productPriceTotalBtw').innerText = parseFloat(elementTR.querySelector('#productPriceTotalBtw').innerText).toFixed(2);
} else {
console.log('Cannot go less than 1');
}
}
event.preventDefault();
}
www.baxter.com source page, shows most of the href links starting with the word baxter, like this -
href="/baxter/corporate.page?">About Baxter<
So the way I can construct an absolute url from the above is by combining the base url, www.baxter.com and the relative url /baxter/corporate.page?giving me www.baxter.com/baxter/corporate.page? which results in 404, cause the actual url is www.baxter.com/corporate.page?
I know how to generally parse relative URLs in PHP but is there a way to sense and remove words from relative urls like these?
Also mouseover on About Baxter on www.baxter.com web page displays the correct url, www.baxter.com/corporate.page? at bottom left of the page - where is this coming from? can it be accessed?
Will deeply appreciate any help/pointers...
EDIT on Nov 7:
In main.js, they are removing /baxter:
var fixer = function() {
var init = function() {
var digitasFinder = /(proto)|(cms-)|(teamsite-)/
, baxterFinder = /(\/baxter\/)/
, $allAnchors = $("a")
, $allForms = $("form");
digitasFinder.test(location.host) || ($allAnchors.each(function() {
var $this = $(this)
, actualHref = $this.attr("href");
if (baxterFinder.test(actualHref)) {
var newHref = actualHref.replace(baxterFinder, "/");
$this.attr("href", newHref)
}
}
),
$allForms.each(function() {
var $this = $(this)
, actualAction = $this.attr("action");
if (baxterFinder.test(actualAction)) {
var newAction = actualAction.replace(baxterFinder, "/");
$this.attr("action", newAction)
}
}
))
}
;
return {
init: init
}
}
Looks like some JavaScript executed on page load is modifying the hrefs of the links.
You could try duplicating the effects of the JS code (ie. remove '/baxter' from the links), or for a more generic solution, you could use a headless browser to execute the JS code and then evaluate the resulting DOM. Look into the Mink project for a PHP-based solution.
I'm trying to run Snap.svg locally, but the Snap.load() function makes an AJAX request, which isn't allowed locally (in Chrome, anyways). Below is my code:
window.onload = function () {
var s = Snap("#headDiv");
Snap.load("emotions.svg", function(f) {
eyes = f.select("#eyes");
lids = f.select("#lids");
head = f.select("#head");
s.append(f);
});
};
So while this works fine from a server, I'd like to get this to run locally. What would be my best option to include my emotions.svg file without making an AJAX request?
I know it's easy to just throw the SVG in the DIV, but I wasn't able to access the fragments that way with my current script. Any ideas?
Changing:
window.onload = function () {
var s = Snap("#headDiv");
Snap.load("emotions.svg", function(f) {
eyes = f.select("#eyes");
lids = f.select("#lids");
head = f.select("#head");
s.append(f);
});
};
To simply:
window.onload = function () {
eyes = Snap.select("#eyes");
lids = Snap.select("#lids");
head = Snap.select("#head");
};
And then placing the actual SVG script in the target DIV worked great.
I'm playing about with PDF.js, and can't seem to find a solution to my problem.
I have a PDF with a trim area and bleed, I need to get the trim area so that I can crop the PDF image data in HTML canvas.
I see that Acrobat has javascript that can return the Trim based on getPageBox("Trim"). Is there any equivalent in PDF.js?
I cant seem to find a reference when inspecting the Javascript PDF Object in the console.
I was able to get it after editing pdf.worker.js. Tested with 1.7.225. First, Add get trimBox() after get cropBox() like this:
get trimBox() {
var trimBox = this.getInheritedPageProp('TrimBox', true);
if (!isArray(trimBox) || trimBox.length !== 4) {
return shadow(this, 'trimBox', this.mediaBox);
}
return shadow(this, 'trimBox', trimBox);
},
Now, in handler.on('GetPage', function ... of WorkerMessageHandler, add a few lines like this:
handler.on('GetPage', function wphSetupGetPage(data) {
return pdfManager.getPage(data.pageIndex).then(function (page) {
var rotatePromise = pdfManager.ensure(page, 'rotate');
var refPromise = pdfManager.ensure(page, 'ref');
var userUnitPromise = pdfManager.ensure(page, 'userUnit');
var viewPromise = pdfManager.ensure(page, 'view');
var trimBoxPromise = pdfManager.ensure(page, 'trimBox'); //added
return Promise.all([
rotatePromise,
refPromise,
userUnitPromise,
viewPromise,
trimBoxPromise //added
]).then(function (results) {
return {
rotate: results[0],
ref: results[1],
userUnit: results[2],
view: results[3],
trimBox: results[4] //added
That's it. Now you can get the trim box in your app by page.pageInfo.trimBox.
In addition to the excellent answer from #Sangbok Lee,
If you use the latest PDF.js version, the this.getInheritedPageProp function has changed to
this._getInheritableProperty('TrimBox', true)
Figured it out.
For anyone else who may be interested in pdf.worker.js on line 2654 I added the following that exposed the trimBox.
tboxX = this.pageDict.map.TrimBox[0];
tboxY = this.pageDict.map.TrimBox[1];
tboxW = this.pageDict.map.TrimBox[2];
tboxH = this.pageDict.map.TrimBox[3];
I'm sure there is a neater way, but it works.
I have a hotfix app which generates HTML slides. The modules are built in Jquery with the background as inline CSS (the best solution i could come up with since they are unique per instance).
The problem is that firefox converts the quotes in the style attribute into:
<div style="background-image: url("bigspace-template.jpg");"
class="nuiOpenspace t1 skin1">
The webkit browsers have no issues with this.
They only way i have been able to get the background attribute is by:
// Build function, shortened
openspace.build = function(){
// ...
var bgstr = 'background-image: url('+ this.val_image + ')';
$o = $('<div class="nuiOpenspace"></div>').attr('style', bgstr);
// ...
}
This is then output appended to the document:
function Sandbox(){
var $sandbox = $("#sandbox");
this.fill = function(o) {
$sandbox.empty();
$sandbox.append(o);
};
// ...
}
I then get the HTML from the dom, convert to string and then output it in a textarea:
function Source(){
this.print = function(o, c_val){
//var parsed_html = this.parse(o, c_val);
//var pretty_html = "";
//pretty_html = style_html( parsed_html );
//console.info(x.replaceAll('&qout;', 'x'));
$code.text( style_html($("#sandbox").html()) );
};
}
var source = new Source();
I´ve tried search and replace but firefox keeps changing to / adding ". Any ideas?
As far as I know, the " is a ", so you have " inside something that is in between its own ". That can never work like this I think.
If you would've changed the origional code (the one that didn't work in firefox) to valid code (using either escapes or a combination of ' and " instead of "nested" "), wouldn't you be closer to a solution?