I am trying to implement pdf preview functionality.
This is my angular js code:
//preview document
FileUploader.prototype.preview = function (file) {
var ctrl = this;
var pdfFile = file;
var file = new Blob([(pdfFile)], { type: 'application/pdf' });
var fileURL = URL.createObjectURL(file);
console.log(fileURL);
ctrl.content = ctrl.services.$sce.trustAsResourceUrl(fileURL);
var myWindow = ctrl.services.$window.open(ctrl.content);
myWindow.document.title = "custom file name";
}
I am able to preview the document but I am unable to give a custom title to the $window.open
I think the unique identifier is set automatically if the title is empty in the document properties.
How can I override the title?
Related
i want to give the file location url for the code to get my file instead of using input file in html part , to pass the file to the code
the code pasted below works if i use " input type= "file" " to get the file, but if i use url (like below) it gives a error
fileInput1.addEventListener is not a function
at window.onload
here is the code
window.onload = function() {
var z ="C:/Users/akash/Desktop/riidl/UTham.txt"
var fileInput1 = z;
if (fileInput1){
fileInput1.addEventListener('change', function(e) {
var file = fileInput1.files[0];
var textType = /text.*/;
if (file.type.match(textType)) {
var reader = new FileReader();
reader.onload = function(e) {
spamdata=reader.result;
document.getElementById('here').onclick = console.log(spamdata);
}
reader.readAsText(file);
}
});
}
}
Accessing local files is not allowed in JavaScript for security purposes.
Pl refer to this answer for more details.
https://stackoverflow.com/a/372333/3626796
I have a bootstrap modal( bootbox ), on which confirm action, i want to create a file which contains some numbers and download the file as a text file.
I have already referred Create a file in memory for user to download, not through server but its not helpful in my case.
Here is the code :
bootbox.confirm("Item not found! Do you want to download the text file?", (yes) => {
var items = response.itemNumbers;
this.href = "data:text/plain;charset=UTF-8," + encodeURIComponent(items);
});
I have tried this as well :
bootbox.confirm("item not found! Do you want to download the text file?", (yes) => {
var itemNumbers = response.itemNumbers;
var textFile = null;
var data = new Blob([itemNumbers], { type: 'text/plain' });
// deleting old text file
if (textFile !== null) {
window.URL.revokeObjectURL(textFile);
}
textFile = window.URL.createObjectURL(data);
var link = $(textFile).attr("href");
document.location.href = link;
});
EDIT : When I run this, first code runs and nothing happens. Second gives error about Blob conversion : Syntax error, unrecognized expression: blob:http%3A//localhost%3A51876/028f2122-1646-4b2e-ae2c-2a1b588fdd8d
Got it! thanks #kb. for helping. The link you provided had the answer. Just posting here for future visitors: below code would create a file which contains "abcd,wxyz" and prompt for download :
var items = "abcd,wxyz";
var json = JSON.stringify(items);
var blob = new Blob([json], {type: "octet/stream"});
var url = window.URL.createObjectURL(blob);
window.location.assign(url);
reference : JavaScript blob filename without link
I'm trying to create a function where I can generate a blob .json file, which I then want to download.
I've checked around and found one way to do it.
function download_rapport(){
var data = geojson.features.map(function(row) { return row.properties; });
var json = JSON.stringify(data);
var blob = new Blob([json], {type: "application/json"});
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.download = "backup.json";
a.href = url;
a.textContent = "Download backup.json";
document.getElementById('content_test').innerHTML = a.outerHTML;
// 'çontent_test' is a <div>
};
This works pretty well, however, this method uses a link to download. I would prefer to use a button, because it fits better with the rest of my application.
I used multiple methods to try and get a download button, but I always end up with a button that sends me to a new page with the data that I need shown as a string.
Is there a way to change my function so that it generates a downloadbutton instead of a downloadlink?
EDIT:
I've edited my code a bit with help from Midas. However, when I alter the data in my var json and try to download the "new" file, it will always download the "first" var json.
What I would like, is to be able to alter the var json data, and always download the "latest" version of it.
window.onload = function testreer() {
var data = geojson.features.map(function(row) { return row.properties; });
var json = JSON.stringify(data);
var blob = new Blob([json], {type: "application/json"});
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
var b = document.createElement('button');
a.download = blob;
a.href = url;
b.innerText = 'Download';
document.getElementById('content_test').appendChild(b);
b.appendChild(a);
b.addEventListener('click', function() {
a.click();
});
}
Try this I have append a button in a link if that what you want.
function download_rapport(){
var data = geojson.features.map(function(row) { return row.properties; });
var json = JSON.stringify(data);
var blob = new Blob([json], {type: "application/json"});
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.download = "backup.json";
a.href = url;
// 'çontent_test' is a <div>
var btn = document.createElement('button');
btn.value="download";
btn.innerHTML = "Download JSON";
a.appendChild(btn);
document.getElementById('content_test').innerHTML = a.outerHTML;
};
You can convert it it a button if you like
replace
document.createElement('a');
with
document.createElement("BUTTON");
I decided to give up on changing the link to a button. Instead, I will use CSS to style the link as a button. After checking around I found out that, although it is possible to change a link to a button, it is way faster to just use CSS to style it.
I edited my code a tiny bit by adding a.id = "downloadLink" to give the generated <a> an ID. This ID is then styled in my CSS file.
var a = document.createElement('a');
a.download = "backup.json";
a.href = url;
a.id = "downloadLink";
a.textContent = "Download backup.json";
Since a button has no href attribute like an a tag, you have to assign the desired action to the onclick event on the fly. An example is as follows:
window.onload = function()
{
var url = 'http://lipsum.com';
var btn = document.createElement('button');
btn.innerText = 'Download';
document.getElementById('content_test').appendChild(btn);
btn.addEventListener('click', function(){
window.location.href = url;
});
}
<div id="content_test"></div>
Edit:
Since the file is not coming from a server, you can create both the a tag and the button tag, triggering the link programmatically when the button is clicked:
window.onload = function() {
var url = 'http://lorempixel.com/400/300/technics/';
var a = document.createElement('a');
var b = document.createElement('button');
a.download = 'technics.jpg';
a.href = url;
b.innerText = 'Download';
document.getElementById('content_test').appendChild(b);
b.appendChild(a);
b.addEventListener('click', function() {
a.click();
});
}
<div id="content_test"></div>
However, In normal circumstances you would set Content-Disposition: attachment on the server side, to tell the browser that the file is to be downloaded.
I'm working on a project to encrypting data and sent it to the server, so I need to store the data in a file and then sent it to the server(php). the user then grab the file on the client side to decrypt it. But I'm runing into the problem of storing the data in the text file or open it.
I have no problem creating the file, but when I open the file/use FileReader(), it said: [objectFile] instead of the data.
What am I doing wrong? Here is an example below, I try to make it as simple as possible.
note: I can't read jquery.
<!DOCTYPE html>
<html>
<head>
<script>
function createdTextFile(){
var date = new Date();
var file = new File(["text text text text text text"], "textfile.txt", {type: "text", lastModified: date});
/*
sent file to server
var formdata = new FormData();
formdata.append("Uploaded_file", file);
*/
//Created download link
var uriContent = "data:application/octet-stream,"+file;
var div_idFileDownload = document.getElementById("file_dowload");
div_idFileDownload.innerHTML = "";
var createElement_aFileDownload = document.createElement("a");
createElement_aFileDownload.setAttribute("download", "textfile.txt");
createElement_aFileDownload.setAttribute("href", uriContent);
div_idFileDownload.appendChild(createElement_aFileDownload);
var nm = document.createTextNode("textfile.txt");
createElement_aFileDownload.appendChild(nm);
}
//open text file: [objectFile]
//Need the text file to say: text text text text text text
</script>
</head>
<input type="file" id="upload_img">
<input type="button" onclick ="createdTextFile()" value="download">
<div id="file_dowload"><div/>
</html>
Try it, you can test see this working here:
function createdTextFile(){
var date = new Date();
var file = new File(["text text text text text text"], "textfile.txt", {type: "text", lastModified: date});
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
//Created download link
//var uriContent = "data:application/octet-stream,"+file;
var uriContent = reader.result;
var div_idFileDownload = document.getElementById("file_dowload");
div_idFileDownload.innerHTML = "";
var createElement_aFileDownload = document.createElement("a");
createElement_aFileDownload.setAttribute("download", "textfile.txt");
createElement_aFileDownload.setAttribute("href", uriContent);
div_idFileDownload.appendChild(createElement_aFileDownload);
var nm = document.createTextNode("textfile.txt");
createElement_aFileDownload.appendChild(nm);
};
}
I'm using an HTML5 site to create a log per-say within a textarea element. I need to pull the data from that area with the click of a button, and download it to my computer via a .txt file. How would I go about doing this if it is possible??
HTML:
<input type="button" onclick="newBlob()" value="Clear and Export">
Javascript:
function newBlob() {
var blobData = document.getElementById("ticketlog").value;
var myBlob = new Blob(blobData, "plain/text");
blobURL = URL.createObjectURL(myBlob);
var href = document.createElement("a");
href.href = blobURL;
href.download = myBlob;
href.id = "download"
document.getElementById("download").click();
}
I figure if I make the Blob, create a URL for it, map the URL to an "a" element then auto-click it then it should work in theory. Obviously I'm missing something though. Any help would be fantastic. 1st question on this site btw:p
The simplest way I've come up with is as follows:
function download(text, filename){
var blob = new Blob([text], {type: "text/plain"});
var url = window.URL.createObjectURL(blob);
var a = document.createElement("a");
a.href = url;
a.download = filename;
a.click();
}
download("this is the file", "text.txt");
List of possible blob filestypes: http://www.freeformatter.com/mime-types-list.html
const downloadBlobAsFile = (function closure_shell() {
const a = document.createElement("a");
return function downloadBlobAsFile(blob, filename) {
const object_URL = URL.createObjectURL(blob);
a.href = object_URL;
a.download = filename;
a.click();
URL.revokeObjectURL(object_URL);
};
})();
document.getElementById("theButton").addEventListener("click", _ => {
downloadBlobAsFile(new Blob(
[document.getElementById("ticketlog").value],
{type: "text/plain"}
), "result.txt");
});
The value of a download property of an <a> element is the name of the file to download, and the constructor of Blob is Blob(array, options).
I used this approach that doesn't involve creating an element and revokes the textFile after the browser showed the text file
var text = 'hello blob';
var blob = new Blob([text], { type: 'text/plain' });
let textFile = window.URL.createObjectURL(blob);
let window2 = window.open(textFile, 'log.' + new Date() + '.txt');
window2.onload = e => window.URL.revokeObjectURL(textFile);