I Want to generate a link for my local woff file. With help of createobjectURL function, A link is created, however, the penalty is in the way of a blob. The URL lifetime is tied to the document in the window on which it was created. The URL runs only on my browser, and when I close relevant tab, the file disappears. So, I'm trying to find a way using js function which creates a perm link to uploaded local file. Currently I used .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>URL.createObjectURL example</title>
</head>
<body>
<input type="file">
<file>
<p class="p">The URL of file is : </p>
</body>
<script>
var Element = document.querySelector('input');
var file = document.querySelector('file');
Element.addEventListener('change', function() {
var url = URL.createObjectURL(Element.files[0]);
file.src = url;
console.log(url);
var d=document.querySelector(".p");
d.textContent+=url;
});
</script>
</html>
It creates blob:https://www.example.com/123 however I require https://www.example.com/123. I also tried Base 64 encoding. It works but the file size, and speed becomes a drawback even when it is compressed.
You're asking for one thing but giving an example of another here.
I Want to generate a permanent link for my local woff file.
You can't generate a URL to file://etc/etc since:
Browsers don't expose information about the user's file system to JS
If you could get a URL like that, then the browser wouldn't let the webpage link to it.
Access to local files is heavily restricted.
I require https://www.example.com/123
If you want the file to be available on your website: actually upload it to the website! Right now, the file only exists on the user's disk and in the memory being accessed by their browser.
You have to send the data to a server (e.g. with an Ajax POST request) where you have a webservice which reads the request, extracts the file from it, stores the file somewhere, gives it a URL, and then sends the URL back to the browser.
Related
I am working on a project, and i want to know if there's any way to change content of a html file like images, text, etc. with javascript (without any framework) by clicking on elements of another html file.
In general the browser will prevent you from editing the content of any file on your hard drive, or any page served from another domain/base url. However, if both files are in the same project as shown below, you can make temporary edits to one file from the other;
/http
|-index.html
|-template.html
|-hello.png
index.html can contain a <script> tag with the following
// first we open a popup showing the other page
let window_template = open("template.html","_blank")
// now we can do whatever we want in the popup window from the original index.html:
let new_img = window_template.document.createElement("img")
new_img.src = "hello.png"
window_template.document.body.appendChild(new_img)
This does not (and cannot) save any changes to "template.html".
To actually make changes to files, you need to run your own server. Then index.html can send a request to the server, and the server will have the ability to make edits on behalf of your browser-based app. Check out Node.js and the Express server library... I found it approachable enough as server frameworks go.
Good Afternoon,
Scenario: I am having pdf's file on local system and when user click the button, I want it to get downloaded. But after getting download the file on opening shows corrupted. While posting this query I notice the file which is getting download is of 1KB and original file size is 28KB. I didn't understand why ?
I am creating the excel file at backend and saving at user location as due to huge data it is taking a lot of time so once file is created, the user can download the file.
Below are the codes of JS .
function download() {
var filename="output.pdf";
var element = document.createElement('a');
var fileloc="C:\\ebooks\\PDF\\abc.pdf";
element.setAttribute('href','data:text/plain;charset=utf-8, ' +
encodeURIComponent(fileloc));
element.setAttribute('download', filename);
document.body.appendChild(element);
element.click();
}
Original file is good. Please correct me what I am doing it wrong .
The data: scheme URL you are creating resolves to a plain text document (not a PDF) containing the text C:\ebooks\PDF\abc.pdf.
You are saving this file with a .pdf extension so when you try to open it, your PDF reader tries to read it as a PDF (which it isn't).
If you want to save the contents of the file at the path you specified then you need to:
Have the user select the file using a <input type="file"> (because JS is not allowed access to files on the user's disk unless they select them explicitly and generating the URL using the FileReader.readAsDataURL() method.
If you are creating the file on the server, as you said, then there is no need to construct a data: scheme URL, you can just use the https: scheme URL that points to the file on the server.
i want to make a button in html page so that when a user click it an excel application get starts.
<button class="btn btn-primary" href="to popup excel sheet">click</button>
HTTP is a stateless protocol. What that means for you is that when your users download a file from the intranet via http, they are downloading a copy, rather than the original. Any changes they make will only appear in their copy, and then you end up with loads of copies of the same workbook with different, possibly overlapping changes. You don't want that!
And also ... how are your users even going to upload their changes?
You need to create a shared folder on your network and put the workbook there. You can then use the file:///SERVER/PATH/FILE.xls format in your <a /> links on your intranet to direct your user to the actual file on the server.
I would recommend you start by creating a simple html doc on your desktop to get familiar with the file:/// path format.
Eg
<html>
<head />
<body>
Click
<body>
<html>
save that in notepad and rename the extension from .txt to .html.
You can also type file:/// paths straight into windows explorer's address bar which allow for testing paths without resorting to the html document mentioned above.
UNFORTUNATELY! It seems that the browsers default behavior is to always download a link rather than open it (even if it is a local resource), so if you actually want to open it then you must resort to changing your browser intranet permissions to allow JS to access local resources, which then allows you to use the technique below.
This article (http://www.codeproject.com/Articles/113678/How-to-execute-a-Local-File-using-HTML-Application) uses
<script type="text/javascript" language="javascript">
function RunFile() {
WshShell = new ActiveXObject("WScript.Shell");
WshShell.Run("c:/windows/system32/notepad.exe", 1, false);
}
</script>
to open notepad. You can use command line arguments with Excel.exe (https://support.office.com/en-za/article/Command-line-switches-for-Excel-321cf55a-ace4-40b3-9082-53bd4bc10725) to tell it what the file path is...
Excel.exe "C:\PATH\Excel.xls"
Refer link: Open excel file through normal html link
I created a html page (stored locally) that uses Googlemaps API. My whole page is a basic google map with some customization. I want to take a screenshot every time I change some parameters in the customization so later I can easily compare.
I've found this similar answer and I got it to work on my machine. However, when I change the url from an actual webpage into my own local html file, Phantomjs only saves an entirely black image.
Here is my script.
var WebPage = require('webpage');
page = WebPage.create();
page.open('googlemaps_demo.html');
page.onLoadFinished = function() {
page.render('myScreenShot' + '.png');
phantom.exit();}
The file googlemaps_demo.html and this js script itself are in the same folder. Could someone explain to me why this code only works for an online url, but not a local html file? And how to fix it?
You probably need to specify file using a file:/// scheme and a full location of your file, e.g. file:///c:/local/page.htm
I'm trying to figure out how to call the File Save As Command in Firefox
(the one you get when you right click an image and save it) to save an image using JS (or if there is something else I can use, I would be grateful if you pointed me in that direction). I am looking for an example of how to open the Save As menu and pre-fill the file name field ... I've been searching furiously and have come up with zip. In my search I saw that you cannot directly save a file to disk, but is it impossible to call the save as function? Any suggestions would be greatly appreciated!
Edit:
I'm not looking to make this code available to everyone, and the java script is client side, I'm just writing a small script to make saving photos a little easier in terms of naming them.
-Will
No you can't do this, and really you are trying to find a solution in a way that does not embrace the internet and the way people interact with content. What you are trying to do is call on Operating System operation from Javascript. If there were anyway this would be possible, I don't think it is at all, it would be a very poor solution. Think about all the different Operating Systems Firefox is being used on. If you found a solution for Windows 7, what about an Apple Mac running Firefox?
What you should consider is that a User decides whether to Save something to their computer, not the programmer of the application. Provide a link to the file, most users know how to right click a link and select Save As. Add help tip explaining what to do as well.
To give a File a specific name or even start an automatic download when a User clicks or takes some kind of action, you can create a response from your server that is a PDF,Excel,Jpeg,Doc,Docx or many other files types. The server can load the file in memory and sent it as a response with the proper header information in the response.
For example to set a specific name for the file when the user downloads you can set your Response header with something like:
header('Content-Disposition: attachment; filename="downloaded.pdf"');
You can use the anchor element's download attribute to specify that a link is to be downloaded. Note that this is not implemented in all browsers, Chrome, Firefox, and Opera currently support it
https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement
HTMLAnchorElement.download
Is a DOMString indicating that the linked
resource is intended to be downloaded rather than displayed in the
browser. The value represent the proposed name of the file. If the
name is not a valid filename of the underlying OS, browser will adapt
it. The value is a URL with a scheme like http:, file:, data: or even
blob: (created with URL.createObjectURL).
Demo
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
var link = document.getElementById("link");
//Set href to the data url that you want downloaded
link.href = "http://placehold.it/350x350";
//set download to the default filename you want to use
link.download = "image.png";
<canvas id="canvas" width="150" height="150"></canvas>
Click to download
You can also specify a regular url to a file, but note that if the server sends a filename header: Content-Disposition ... filename... that it will overwrite whatever you have in the download attribute.