Develop Reference

printToPDF does not print all webContent view

I am using the code below to save the webContents view into PDF file.
saveReport() {
const remote = require('electron').remote;
const webContents = remote.getCurrentWebContents();
webContents.printToPDF({
pageSize: 'A3',
landscape: false
}, (err, data) => {
remote.require('fs')
.writeFile(TEMP_URL, data);
});
},
The view is a report and have a really long content inside it (see below).
Instead of showing a full view, I see a partial view inside a single page with a scrollbar. Below is the screenshot for the generated PDF,
Expected behavior
Just like a real browser, the generated PDF should contain all the view if a single page does not provide enough space, multiple pages should be generated.
I am thinking probably something wrong with my css.

I had a similar requirement for my current project and i've noticed that when you use this api , you can customize how the pdf will be rendered by adding a css file to your main html with the media query set to print media="print".
this css stylesheet will be applied only if you print something or export it to pdf via the api method printToPdf().
if you are using some ui kit like photon or bootstrap , try to disable it and see if it helps.
last tip: try to use the css property page-break-before: always;
Hope this helps

Pre-load images before DOM [duplicate]

I have a ruby on rails web app, and in some views i have many heavy images( <img> ) to render .The <img> are generated in a Helper.
The problem is that the css is loaded first, then the js, then the heavy images , and then finally the css refereneced background images.
It takes quite a while for all of the heavy images to load, which therefore holds the whole site up.
I want to load first the css background images then load the other images, as they obviously hold visual structure of the page.
rails version: 2.3.8
EDIT:
Thank you guys, I apologize for not having shared the code earlier.
I have two models : Categories and Images, each Category has many images.
In the view i have a list of categories, which is generated by a helper :
categories.each do |cat|
html << "<a href='##{cat.id}' class='mapcat' >#{cat.libelle}</a>"
end
and when I click on the category the images are displayed
categories_images.each do |i|
html << "<div id='#{i.id}' class='#{css}'><img src='/images_moi/categories/#{cat.libelle}/#{i.path_file_name}' />"
end
I have css background image associated to the list of category
The problem is that the images (<img>) is displayed before the css background images of the list of categories.

We need to assume things because you haven't shared your code.
Coming to your query, for now you can preload images using jQuery:
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
// Alternatively you could use:
// (new Image()).src = this;
});
}
// Usage:
preload([
'img/imageName.jpg',
'img/anotherOne.jpg',
'img/blahblahblah.jpg'
]);
This saves the loading time of loading images.

Use a base64 string.
Example:
background-image: url(data:image/png;base64,*CONVERTED IMAGE DATA HERE*);
without: **
online converter: http://webcodertools.com/imagetobase64converter
note: I only would suggest this if the image size is not too heavy.

Solution: Do not use the img tag.
Create a sprite containing all your images. Load the sprite in your application.html layout once.
Use data uris to transmit the data directly in the html. See http://css-tricks.com/data-uris/

My approach is to lazy load the images using jquery and data- tags. This approach also allows me to choose different images based on device width and spare tablet/mobile users.
<img src="" data-src="/img/graphic-desktop.jpg" data-smallsrc="/img/graphic-smaller.jpg" alt="Graphics" class="lazy" />
<!-- the following would be in your js file -->
$lazy = $('img.lazy');
$(window).load(function(){
// window load will wait for all page elements to load, including css backgrounds
$lazy.each(function(){
// run thru each img.lazy on the page. spare the jquery calls by making $this a variable
$this = $(this);
// if the window is greater then 800px wide, use data-src, otherwise, use the smaller graphic
($(window).width() >= 800) ? $this.attr('src', $this.attr('data-src')) : $this.attr('src', $this.attr('data-smallsrc'));
});
});

Change the body's property "zoom" value in external css file using javascript

I'm trying to change the value of the zoom property which I have in a external css file on the body selector. This zoom is set to 100% and is general for all HTML documents that has the css file linked in. What I want to do is:
I have this a link in my HTML document.
<a onClick="zoom('80%')">80%</a>
The javascript function is this one:
function zoom(zoom)
{
$("a").click(function()
{
$('body').css('zoom','80%');
});
}
What I want this to do is, by clicking the link, it will call the function and sending in 80% into the function. What I then want the function to do, is to go into my external css and replace 100% with 80%:
body
{
zoom: 100%;
}
I don't really know how to do this, so I'm asking you guys! This is a part of my final task for the webdesign course that I'm taking, so I would really want this to work!

Are you asking to do this: How can I scale an entire web page with CSS?
That's done with javascript like this, but with the proper style taging:
document.getElementById('image').style.width = "80%";
document.getElementById('image').style.height = "80%";

Print Highstock with custom html

I am using Highstock V 1.2.5
I want to print chart with some custom HTML details on top of it.
I have created a div in my JSP with custom HTMLand tried adding it before body.appendChild(container); into exporting.js But, It didn't work.
Second, I have tried creating HTMl file and adding $("#tab2").html(); where tab2 is my container. But, No luck with that.
When I open the exported HTML its different than what I get from console.log($("#tab2").html()) and the copy it into HTML.
Is there any way to get container HTML into .js ?

You can edit source in that way: http://jsfiddle.net/3bQne/497/
// some custom code
$(body).append('<div style="width:50px;height:50px; background-color: red"></div>');
body.appendChild(container);
// print
win.focus(); // #1510
win.print();

Export CSS Styles in a seperate .css file, after being manipulated with JS/jQuery?

I have to create a customized and basic SVG Editor using HTML5/JS/jQuery/CSS.
Input for the Editor are two files x.svg and its associated x.css file.
The x.svg will be loaded in the HTML Page, with its styles from x.css applied. Then styles like stroke, width... will be manipulated using JS/jQuery, all fine so far.
My problem is that after the user make some changes to the style and want to save those changes permanently in the x.css file, I dont know how to do that, I can write the
Attribute: Value pairs easily to a file, but the x.css files has selectors, braces and so on...the output of the program should be a prober x.css file, notice that the x.svg will remain the same. How can I handle this problem, an detailed idea with no code is sufficient, thanks.

Ok here is the answer, I achieved it with the help of FileSaver.min.js and BlobBuilder.min.js from Eli grey, the function is attached to the click event of an anchor element, when user clicks a dialog comes, asking you to insert file name and where to store.
Tested on Chrome 23, on version 24 it didnt work.
function exportCSS()
{
//stop anchor link from taking us anywhere
event.preventDefault();
//index is chosen for test sofar, need next to iterate over all sSheets and pick the right one depending on svg file name
sSheet = document.styleSheets[2];
myRules = sSheet.cssRules;
len = myRules.length;
for (i = 0; i < 50; i++) {
cssOutputString = cssOutputString + myRules[i].cssText + "\n";
}
console.log(cssOutputString);
//save the file
var blob = new Blob([cssOutputString]);
saveAs(blob, "file.css");
}

You cannot save files to a client's hard drive using Javascript for security reasons.