I am attempting to create a pdf of a page from my meteor powered site. The page contains quite a bit of styling and some d3 charts.
I have added chipcastledotcom:jspdf and new3rs:html2canvas to accomplish my goal. My plan is to use jsPDF's .addHTML() function to add the non chart html to the pdf. My issue is that unless I pass in document.body as the source for .addHTML() the rendered element is blacked out in the pdf. Using document.body I am able to see the currently viewable material on the webpage but nothing else (the page has quite a bit of content and requires scrolling). Is there some lack of support in jsPDF for certain levels of complexity w.r.t. to the webpage layout/styling?
More importantly, is there a fix/work-around for this?
Here is a jsfiddle (works perfectly) that demonstrates what I'm trying to accomplish: https://jsfiddle.net/jdcast/tqfdkusp/.
To be clear, the .addHTML() in the fiddle works well:
doc.addHTML(document.getElementById('div1'), 0, 0, function() {
console.log('callback');
doc.save('sampler-file.pdf');
});
However, in my site's code which is verbatim what is in the fiddle, I have to use the following to see any output that ISN'T blacked out:
doc.addHTML(document.body, 0, 0, function() {
console.log('callback');
doc.save('sampler-file.pdf');
});
Note also that I have used jsPDF's .text() function and it seems to behave properly so I don't think I have installed it incorrectly.
Thanks!
Related
I am trying to debug a Wordpress issue where a is being auto inserted before the end of the <script> tag, hence breaking the javascript.
If I view the element with the inspector, I can see a as shown below:
However if I viewsource, or download the html page and look at it, there is no :
});
});
setTheRepeaterButton();
});
</script></p>
At first i thought it was a chrome bug, but I get the exact same behaviour in firefox.
I would think there is no , however the script is broken which implies there is one. Which is correct, the inspector or the page source?
It looks like there is a hidden/invisible character before the final } in the script. Depending on your code editor, you can toggle a setting to view hidden characters or add a plugin (e.g. nbsp-vscode for VS Code).
Or the easiest solution is to delete the space between that } and the preceding ; and redo the code formatting.
this bit of code }); has appeared in the very top of my wordpress site. Not really a coder, but looked to see if I could find it in any of the template files and no joy. When you inspect it in Chrome, it is right at the top of the body after all of the css classes.
This is the full code from the page that has the random bit displaying.
the code I see on inspection
On my website (which is under construction) I'm using "Before-After MultiX Slider". It's working fine, but I'm trying to have all the separators "collapsed" on the right (or left).
For example here
I've tried to use css to change width of some classes as follows:
.wmg-image.wmg-image-3.first.ui-resizable {
width: 91.6379%!important;
}
.wmg-image.wmg-image-2.ui-resizable {
width: 95%!important;
}
.wmg-image.wmg-image-1.ui-resizable {
width: 98.3621%!important;
}
If I don't use !important nothing happens. If I use it, I get what I want
but the slider stops working and the images don't resize by scrolling separators.
Any idea on how to achieve this?
I can't find any failure there and digged a little deeper into the problem... Therefore I post a second answer, because the nature of the problem is somehow different after all, the code is working but not as expected for the following reason:
If you load scripts async the page will continue to render while the scripts are still loading, so it is possible that other none async scripts comming afterwards will start to load earlier than some async ones still in query...
Here we don't have async ones, BUT it seems to be like even if the async keyword is not present though the scripts will come in the query one after an other depending on their order nevertheless the server will load round about 3 or 4 scripts parallel!
-> So it happens that shorter scripts may be finished to load before longer ones allthough they've started to load later...
On my research I could not find a definite solution for that problem, because it simply seems to be quite hard to control that loading process in detail! (You i.e. can find some topics about that phenomena here on the board...)
I will present some different approaches, you will have to test them yourself, because I don't have that slider PlugIn so I could try:
Solution 1:
Try to use the "defer" keyword, this should be so to say the opposite of "async" and cause scripts to be not loaded before the page is parsed completly, but sadly I'm not sure if that works, never used it before and it sounds like it is the same as using "document.ready" which is not working in this case...
Important thing is that you must insert the script externally otherwise the keyword won't do anything, i.e:
<script src="demo_defer.js" defer></script>
Solution 2:
A surely working solution would be to add our script as a callback to the call of the slider script, but I guess that this is no suitable solution here because you'll have to change the PlugIn code which is not update safe!
Solution 3:
Maybe you can play with a timeout to make sure that the execution will start later, but the problem is that you cannot really know how long this timeout must be! (i.e. have a look here: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout)
WORKAROUND:
I thought up a way to get around that problem, but as said before the code is untested, maybe try that and give me a notice when you have included this script, so I can have a look how it works...
In this way it is supposed that a class which does the positioning with the !important-statement is added and then removed on the first click, just then the elements are positioned again without !important and of course after that on every further click the positioning won't be manipulated again!
function sr_custom_width_for_slides()
{ ?>
<style type="text/css">
.notClicked .wmg-image.wmg-image-3.first.ui-resizable {
width: 91.6379% !important;
}
.notClicked .wmg-image.wmg-image-2 {
width: 95% !important;
}
.notClicked .wmg-image.wmg-image-3 {
width: 98.3621% !important;
}
</style>
<script type="text/javascript">
jQuery( document ).ready(function() {
var firstClicked = false;
jQuery(".wmg-before-after").addClass("notClicked");
jQuery(".wmg-before-after").click(function() {
if ( !firstClicked ) {
jQuery(".wmg-image.wmg-image-3.first.ui-resizable").css("width","91.6379%");
jQuery(".wmg-image.wmg-image-2.ui-resizable").css("width","95%");
jQuery(".wmg-image.wmg-image-1.ui-resizable").css("width","98.3621%");
jQuery(".wmg-before-after").removeClass("notClicked");
firstClicked = true;
}
});
});
</script>
<?php }
add_action( 'wp_footer', 'sr_custom_width_for_slides', 1000 );
EDIT REGARDING YOUR LAST COMMENT:
I checked the site again and in my case it sadly does not work at all, because the click event is never fired! I guess that the JS code of the PlugIn binds some events which maybe stop our script from working... (See the function "stopPropagation()" for more infos.) So my final clue is to simply bind another event which hopefully is not manipulated by the PlugIN in that way! As far as I can see this could be "mouseenter" or "mouseover"...
So just change
jQuery(".wmg-before-after").click(function() {
...
});
to
jQuery(".wmg-before-after").mouseover(function() {
...
});
the problem is quite simple... The width is set inline via js, so this will override any changes you made in your css file!
If you set the styles with an !important-statement it will work, but the sliders script cannot set the new width anymore...
So after all the most easy way to achieve what you want is to insert a small script which sets the styles AFTER the slider scripts have been loaded, so maybe at the very bottom of the footer of the page after the "wp_footer" call, because most plug ins enter their js over this hook, somehow like this:
<script>
jQuery(function() {
jQuery(".wmg-image.wmg-image-3.first.ui-resizable").css("width","91.6379%");
jQuery(".wmg-image.wmg-image-2.ui-resizable").css("width","95%");
jQuery(".wmg-image.wmg-image-1.ui-resizable").css("width","98.3621%");
});
</script>
I can't test it, but I'm quite sure that this will work, if the script is inserted at the correct position! :)
EDIT: I made a quick test via the console of the FF inspector and it works as expected, but as mentioned above, if the slider script will load later than this script it won't work at all!
I am trying to load html file in CKEditor in asp.net but for some reason I don't know how to put the html code from the code behind file.
CKEditor1.FilebrowserBrowseUrl = url;
CKEditor1.BasePath = url;
CKEditor1.Text = content;
none of that helped
Any advice? Thanks in advance, Laziale
I'm not sure which version you are using, but let's suppose that it's 3.x. I was playing around with the control and didn't find any possible way of doing this from code behind. However, I managed to make it work like this:
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "fckInitialization", #"
window.onload = function () {
var oEditor = CKEDITOR.instances['" + txtPost.ClientID + #"'];
oEditor.insertHtml('<strong>This is a bold text.</strong>');
};
", true);
I tried it in IE 8 and the last version of Mozilla (I think it was 9) and it worked. I also tried the same thing, but instead of window.onload I used the jQuery $(document).ready() and it worked only in IE. The reason is that you have to wait for everything to load in order to use the functions from the CKEditor API. I played with Firebug and the insertHTML worked.
If you are using 2.x, you can see somewhere in Google the same approach, but with a different API. I just can't find the link right now.
Another problem will be here, as you may figure out, that if you want to initialize a long text, you will have to write everything in a script, which is not really nice.
Maybe a possible solution for you will be to convert the HTML to BBCode first and then just set the Text property. This, of course, depends on the way you use the control, because BBCode does not contain all possible tags, but you can always modify the bbcode plugin of CKEditor to meet your needs. And I tested it and it works.
PS. Probably you can do it with the JavaScript method and an AJAX call.
Hope this helps!
Assuming ckeditor is being initialized from a textarea field, you can simply populate the body of the textarea.
I'm creating a hidden iframe specifically to be used for printing in IE6.
Here's a basic outline of the code with some HTML population cut out:
$('body').append('<iframe id="printIFrame"></iframe>');
$("iframe#printIFrame").attr('style','position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
$("iframe#printIFrame").load(function()
{
document.getElementById("printIFrame").contentWindow.document.title = "My Title";
var iframe = document.getElementById("printIFrame");
iframe.contentWindow.focus();
iframe.contentWindow.print();
$("iframe#printIFrame").remove();
});
This is working quite well, except for the ugly "about:blank" that shows at the bottom left hand of each printed page. I guess since I'm making this iframe on the fly the source (as IE6 sees it) is about:blank. Is there any way to fake the src or change what gets printed there? I tried setting the src right before printing, but obviously that changes the iframe to a new page and prints that. Any ideas?
You can not get this done without changing the src ahead of time, like you described. This is IE we're talking about. It's the single browser least likely to support anything fancy it could get away with not supporting.
(Though, for the record, I haven't heard of being able to override print metadata in any other browser, either.)
I did find an ActiveX plugin which claims you can modify the header/footer of the printout on the fly.
http://www.meadroid.com/sx_intro.asp
Alternatively, it can be changed permanently by going to Page Setup from the File menu in IE6. However I'm trying to avoid an ActiveX plugin if possible; I'm wondering if there is an easy way to change the header or footer through javascript. Any other ideas?