javascript - print a pdf file - javascript

I have pdf files stored on my server.
I would like the user to be able to click a link/button and have a print dialog popup so they can print the pdf. I tried convincing them that its not a big deal to click download, then print it from the browser tab in which it opens, but they are fickle. :)
I have tried a few javascript solutions, mostly what I end up with is:
contentWindow is not defined
My js snippet is as follows
a = $("a:contains('Download PDF')")
url = a.attr('href')
uid = unique_id()
uid = "abc_" + uid
ifrm = $("<iframe width='500px' src='" + url + "' id='" + uid + "' name='" + uid + "' onload='this.contentWindow.print()'></iframe>")
$('body').append(ifrm)
I have also tried
...
ifrm = $("<iframe width='500px' src='" + url + "' id='" + uid + "' name='" + uid + "' ></iframe>")
$('body').append(ifrm)
pdf = document.findElementById(uid)
pdf.contentWindow.print();
And a few other variations with the same result. Or I get a print of "About:Blank" presumably because print is called before the document is loaded in the iframe.
The pdf opens and renders in the iframe.
Any ideas

Related

Add params to URL if page gets reloaded

Heyho, I want to add GET params like?USER_NAME=Max&USER_ID=01 to the URL if the page gets reloaded. I already got a few snippets for changing the URL / adding params. But I need something to detect the page reload and execute a function. Or a way to change the path of the Url directly if the page gets reloaded.
I tried several things like beforeunload and navigation types.
$(window).bind('beforeunload', function() {
// EDIT: vars like uname etc are defined
var newurlgetstring = "?USER_NAME=" + uname + "&USER_EMAIL=" + uemail + "&LAST_NAME=" + lname + "&PRE_NAME=" + fname + "&UTITEL=" + utitel + "&U_ID_T=" + uidt + "&MV=" + mv + "&V=" + uv ;
var newurl = window.location.protocol + "//" + window.location.host +window.location.pathname + newurlgetstring;
window.history.pushState({path:newurl},'',newurl);
});
But I want able to execute a function with beforeunload. I was just able to display a return question.

SharePoint ToC script - changing link style to headers

I'm working on online SharePoint site, where I want to have Table of Contents on my pages. It went successful, but I'm not satisfied with links to headers, which are in this style: PageName#heading_[number], where I would like to have PageName#{headingName}.
Is it possible? Here is link to my script: https://pastebin.com/MVsJf0hr . I suppose that it must be written somewhere here:
$(this).attr("id", "heading_" + i);
$("#theTOC").append("<a href='#heading_" + i + "' title='" + theLevel + "'>" + theLevelString + " " + $(this).text() + "</a><br />");

Image Print option in html

I have 6 images in PHP page.
Below each image there is button named print.
Now how to give command in PHP or Javascript to the button so that when it is clicked print window is there with only respective image (not whole HTML)
My button:
<button type='print'>Print<\button>
You can try this way
<script type="text/javascript">
function ImagetoPrint(source) {
return "<html><head><script>function step1(){\n" +
"setTimeout('step2()', 10);}\n" +
"function step2(){window.print();window.close()}\n" +
"</scri" + "pt></head><body onload='step1()'>\n" +
"<img src='" + source + "' /></body></html>";
}
function PrintImage(source) {
Pagelink = "about:blank";
var pwa = window.open(Pagelink, "_new");
pwa.document.open();
pwa.document.write(ImagetoPrint(source));
pwa.document.close();
}
PRINT
You can use JS libraries like
http://projects.erikzaadi.com/jQueryPlugins/jQuery.printElement/
$('img#some_id').printElement();

How to add Youtube Video Image to Blog?

I want to add a clickable YouTube video's image to my blog. I used the following code:
if (vidid == ""){
var imgvid ="<a href='" + pURL + "#post-title" + "' title='" + pTITLE + "'>"
+ '<img class="no-thumbnail" src="img.youtube.com/vi/undefined/default.jpg"; />'
+ "</a>";
}else{
var imgvid ="<a href='" + pURL + "#post-title" + "' title='" + pTITLE + "'>"
+ '<span class="play-button"></span><img class="'+ vidid
+ '" src="img.youtube.com/vi/'+vidid
+ '/default.jpg"; width="196px" height="147px"/>' + "</a>";
};
div.innerHTML = imgvid + '<div class="truncated-title"><h2>'
+ post_URL+'</h2></div>';
}
But it's not working. How can I resolve this?
Did you try using the YouTube integration API? You can get some more info in the documentation here and here. Using it that way, Youtube will automatically generate and show the preview image, player controls etc.
Additionally, there might already be an extension for showing Youtube Videos on your blog - do you use Wordpress or a different standard Blogging platform?
Edit
Now that I know you are using Blogger - you should be able to add the youtube video to any post by default, please refer to this manual for details.

Create something like facebook wall

I want to create something like Facebook wall. Currently I am getting the data in a json format and displaying using jQuery $each and then appending it to the main div. I am looking for an alternative way of doing this.
The problem in the current code is that i cannot use the div class to call any method like on.click . The on.click method need to be inside the $each to be get called and it gets called the number of object present in data.
And if i want to update the wall then i need to update the data and has to refresh the whole structure. Is there any other way by which i can add the new post to the wall without rebuilding the structure.
$.each(data, function () {
var status_id = this['Id'];
var like_id = "like" + status_id;
var commennt_id = "commnet-tem" + status_id;
var likes = 0;
$("<div class=\"post-indi\" id=\"post-item" + status_id + "\">" +
"<div class=\"post-content\">" +
" <div class=\"status-profile\" >" +
"<img src="">" +
"</div>" +
"<div class=\"content\">" + this['status'] + "</div>" +
"</div>" +
"<div class=\"commentbox-info\">" +
"<a id=\""+like_id+"\" href=\"#\" class=\"postddlike\">Like</a><img </div></div>").appendTo("div.post");

Categories

Resources