I have tried to load (embed) the .doc file into the html page using object tag. And it doesn't show the word toolbar. My requirement is to allow the user to print the doc from print option in word.
Is there a possible way in javascript to enable the word toolbars??
And I have tried another approach using the ActiveXObject.. but this method opens the document in winword.exe.. is there a way to embed the .doc file through javascript..?
EDIT:
I was looking for other possibilities, but nothing works
Anybody got an idea about the list of params available for the Word ActiveX?
Maybe that could contain the property to enable toolbars on load..
I used the below code to load .doc content to ActiveX Word Document control
var objWord = new ActiveXObject("Word.Application");
objWord.Visible=false;
var Doc=new ActiveXObject("Word.Document");
Doc=objWord.Documents.Add("c:\\test.doc", true);
Is there a way to render the DOC element directly into HTML.. like putting this element in iframe or whatever??
I was assigning the iframe source property directly to the doc file, like this
<iframe id="sam" src="c:\\test.doc">
this loads the doc into browser, but this prompt to open a downloader window.
I'd really appreciate any hint that lead me to some direction.
<HTML>
<HEAD>
<TITLE>MSWORD App through JavaScript</TITLE>
</HEAD>
<BODY>
<script>
var w=new ActiveXObject('Word.Application');
var docText;
var obj;
if (w != null)
{
w.Visible = true; // you can change here visible or not
obj=w.Documents.Open("C:\\A.doc");
docText = obj.Content;
w.Selection.TypeText("Hello");
w.Documents.Save();
document.write(docText);//Print on webpage
/*The Above Code Opens existing Document
set w.Visible=false
*/
/*Below code will create doc file and add data to it and will close*/
w.Documents.Add();
w.Selection.TypeText("Writing This Message ....");
w.Documents.Save("c:\\doc_From_javaScript.doc");
w.Quit();
/*Don't forget
set w.Visible=false */
}
As far as I know there's no way to force this to be opened in a browser. Simply because the server will send the mime type of a word document, from that point on it is up to the client to decide what to do with it and a majority are set to download. There are however some registry tweaks that you can do on a client machine to force the client machine to view word documents inside of internet explorer.
Related
i have this iframe here, and i want to doanload the window page with pdf inside, js function print() only shows the page, i want to download it automatically, bellow is the full code (i tryed with jspdf too).
<iframe id="conteudoIframe" src="https://eproc.trf4.jus.br/eproc2trf4/controlador.php?acao=acessar_documento_publico&doc=41625504719486351366932807019&evento=20084&key=0562cc6eddee0cc4a81dd869f92328dceab34deeaa59f4a33c43da6361cf42d6&hash=08920b364dc8433ad071d6b10c7e3817" name="superior" width="100%" height="560px"></iframe>
<script>
downloadPdfFromIframe();
function downloadPdfFromIframe() {
var script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js';
document.head.appendChild(script);
script.onload = () => { setTimeout(download(), 20000); };
function download() {
var myIframe = document.getElementById("conteudoIframe").contentWindow;
myIframe.focus();
myIframe.print();
myIframe.close();
var pdf = new jsPDF();
pdf.fromHTML(myIframe);
pdf.save('test.pdf');
return false;
}
}
</script>
Iframes are only a window to remote objects thus while viewing they are showing both the already downloaded html surround and the already downloaded PDF but the PDF is independent It may be downloaded before or after the frame, you can see the pdf behind the print html dialog. So the PDF is in a different application as seen in the second browser view of your HTML.
Thus you have to save/print either one at a time. Frame object or Pdf object, to get both is not impossible, just needs to be done with a suitable application (not browser). So just like here I have ScreenShots, those canvases can be easily saved or printed as PDF.
A Chrome based Browser viewing the iFrame for printing
A Firefox based Browser viewing the iFrame to print using any other method like open in a second application window.
If you need to download the two parts outside a browser then use two Download Commands so here is my.pdf
curl -o my.pdf "https://eproc.trf4.jus.br/eproc2trf4/controlador.php?acao=acessar_documento_implementacao&doc=41625504719486351366932807019&evento=20084&key=0562cc6eddee0cc4a81dd869f92328dceab34deeaa59f4a33c43da6361cf42d6&hash=08920b364dc8433ad071d6b10c7e3817&termosPesquisados="
EDIT
The source of this problem is the behavior of the Edge browser, as identified by Sami. Firefox does the same thing, but Chrome works fine.
Original Question
I have a drop container for users to drag and drop an image to set an <input type="file"> with the image.
If the image is being dragged and dropped from a different page, the image is recognized as a file. However, if the image is dragged and dropped from the same page with the drop container, it is recognized as a URL.
Why isn't the image being recognized as a file when it is dragged and dropped from the same page as the drop container?
Here is the fiddle with the drop container and image file. When you drag the image file on this page into the drop container, it is recognized as a URL although I want it to be recognized as a file.
https://jsfiddle.net/nadf9c82/1/
Next, try dragging the image on this fiddle https://jsfiddle.net/7sqb5r0f/1/ into the drop container on the other fiddle and you will see it is recognized as a file, which is what I want.
Why do images on the same page as the drop container evaluate as URLs and not files? Is there a fix to make them recognized as files and not URLs?
Here is the code for reference
<div class="dropContainer" id="dropContainer">Drop Here</div>
<div id="imagetwo">
<img src="http://a.mktgcdn.com/p/khxNbcdQcr1HQKNgk9cPNUyWUprmZ5Dryx9P5MAV0SE/2669x3840.jpg" />
</div>
<script>
dropContainer.ondrop = function(evt) {
//evt.preventDefault();
if(evt.dataTransfer.files[0]){
console.log("is a file");
const dT = new DataTransfer();
dT.items.add(evt.dataTransfer.files[0]);
fileInput.files = dT.files;
}else{
// Try dataTransfer url second
var dataTransferUrl = evt.dataTransfer.getData('url');
if(dataTransferUrl){
console.log('is a url, not a file');
console.log(dataTransferUrl);
}
}
};
</script>
I think you can do it, but it won't work in Fiddle due to The page at 'https://jsfiddle.net/' was loaded over HTTPS, but requested an insecure resource ... the content must be served over HTTPS due to your HTTP request
Here's what I think, whenever you drop the image, it'll receive an URL instead of the file like you want. Then just make it into a file.
It's called convert your URL image to File object, if my way is not working, it's the keyword for you to have a look more, I hope it'll give you some ways to work around since I'm not good at this, too.
Replace this code of mine into your Try dataTransfer URL second part, but be warned that it'll fire an error on Fiddle due to HTTP request. So I've to replace the HTTP with HTTPS, but it'll get you the CORS Block, so if you have the extension to unblock CORS, it'll work, for development or testing purposes, of course.
let url = evt.dataTransfer.getData('url');
const urlArray = Array.from(url)
urlArray.splice(4, 0, 's')
const urlFinal = urlArray.join('')
fetch(urlFinal)
.then(async (res) => {
const contentType = await res.headers.get('Content-Type')
const blob = await response.blob()
const file = new File([blob], "image.jpeg", { contentType })
})
}
When I drop an image to Drop Here box, it'll create an Object File, so it'll count as a file instead of an URL, I think that's what you want, hope I can help you somehow.
Take an URL as an Object File after Dragging Image and Drop it into Drop Here Box
I'm writing a Google Chrome extension and I want to show the first image of a webpage (for instance: a blog) in the popup.htm. So far I know how to implement the favicon so I was trying to work backwards and edit the favicon into the first image of the page. The problem is the favicon was so simple! All I had to write for a given variable was
function favicon(a)
{
return "chrome.../" +a;
}
Now, I can find the img.src of a background page. But I'm not sure how to find one of a unique page (submitted by the user). I've googled every way my vocabulary permits and so far have come up with this...
function getLavicon(a)
{
/*
find first image on page requested
get url of first image
return url
*/
return $(localStorage.getItem(a)).find('img').first().attr('src');
}
It returns a blank image. Let me know if screenshots are necessary.
Why use jQuery for this ? You can get the first image url on the page by using the following code:
var firstImage = document.getElementsByTagName("img")[0];
console.log(firstImage.src) // This will print out the source of the image on the console
Now you can use the source of the first image whenever you want just by using firstImage.src
Pretty sweet and clean huh ? :)
i'm currently working on a function (started after Buttonclick) to print a document in Lotus Notes (IBM Domino Designer 9.0 Social Edition Release 9.0). I have a custom control which creates a new document to the database. After saving the document its opened in read-only-Mode. There you have a button which will redirect you to a new window where the same contents are displayed without any layouts and something else (just the Text). Now its possible to print the page with Ctrl+P. There are two differen xPages for that.
Distribution.xsp
DistributionPrint.xsp
First of all i'm using
path = facesContext.getExternalContext().getRequest().getRequestURL();
to get the current page URL. After that there is an option to replace the current Page of the path (Distribution.xsp) into DistributionPrint.xsp.
var replacePage = #RightBack(path, "/");
path = #ReplaceSubstring(path, replacePage, "DistributionPrint.xsp");
When im testing it the replacement successfully worked. After that i'm bulding a new URL for the specific document to open with the new path. Finally everything is placed into the view.postScript method:
var docid = docApplication.getDocument().getUniversalID();
view.postScript("window.open('"+path.toString() + "?documentId=" + docid + "&action=openDocument"+"')")
Now my Problem starts. At 99% of my trys the new window is opened like i said the programm to do. But there are some kind of documents where i click on the button and he doesn't open a new window and trys to open the old Distribution.xsp url. I already tested out the path he wants to open at these kind of documents by using the debugtoolbar. The result of the button click returns the completly correct URL which should be opened. I can also copy that url and paste it manually into my browser => it works! But if i want to open that URL by a buttonclick and viewPostScript nothing happens.
Has anybody expierenced the same problem like me? Maybe one of you can help me through that problem. Its really annoying that everything works finde at 99% of my documents but at some documents it doesn't work although the given url is 100 percent correct.
Thanks for everyones help!
Try adding you code into a javascript function on the page and call that function from your view.postscript code
Or as Panu suggested add it to onCompete code
If the URL is correct then it sounds like a problem with view.postScript. Try with <xp:this.onComplete>.
Other things to try:
Use var w = window.open(... Plain window.open may change the URL of
current window.
Double check the URL with an alert();
You might be barking up the completely wrong tree. Did you try, instead of creating a second page for printing, create a second CSS stylesheet?
Using #Media Print you can tell the browser to use that stylesheet for printing. There you set all navigational elements to display : none and they won't print.
Removes the need to maintain a separate XPage for the printing stuff.
Thank you everyone for your suggestions. The solution of Fredrik Norling worked for me. I placed the Code into a function and called it at the buttonclick. Now every page is opened as expected. Thank you very much for the help!
Sorry, I'm don't know the right terminology to look this up by keyword...
So, as a simple newbie exercise, I tried to make a file "test.html" (just on my desktop) such that when I load it my browser and click the button that appears on the page, the article count from Wikipedia's main page will appear on the page under the button.
Somebody told me to try using an iframe, and I came up with this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"">
function get_count(){
var articlecount = document.getElementById("wiki_page").contentWindow.document.getElementById("articlecount").getElementsByTagName("a")[0].innerHTML;
document.getElementById("put_number_here").innerHTML = articlecount;
}
</script>
</head>
<body>
<iframe id="wiki_page" style="display:none" src="http://en.wikipedia.org/wiki/Main_Page"></iframe>
<input type="button" onclick="get_count()" />
<p id="put_number_here"><p>
</body>
</html>
It doesn't work, and when I test this in the scratchpad (using Firefox 17), I get this:
var x = document.getElementById("wiki_page").contentWindow.document.getElementById("articlecount").getElementsByTagName("a")[0].innerHTML;
alert(x);
/*
Exception: Permission denied to access property 'document'
#Scratchpad:10
*/
(And alert(document.getElementById("articlecount").getElementsByTagName("a")[0].innerHTML); works perfectly on http://en.wikipedia.org/wiki/Main_Page directly, so I know that's not the problem. Copying the source of the wikipedia main page to a new file "test2.html", and setting that as the src of the iframe, that also works.)
Am I just trying to do this in completely the wrong way?
You cannot access any elements inside an iFrame unless, the iFrame is referring the same domain.
for same domain calls, use this link for reference :
Calling a parent window function from an iframe
for different domain, user this link for reference :
How do I implement Cross Domain URL Access from an Iframe using Javascript? script
You can reference the other frame by using:
window.frames["wiki_page"]
Then you can reference the element in the DOM by using:
window.frames["wiki_page"].document.getElementById ("articlecount");
So in your case you could try:
var targetFrame = window.frames["wiki_page"];
Then Access the elements using:
targetFrame.document.getElementById("IDOfSomething");
Make sure your iframe is still named wiki_page etc...