Javascript download an on-the-fly generated BLOB file into specific folder

So I'm trying to write a Firefox Webextension. I want to save title, url and a personal ment of a webpage into a file, myfile.txt

Here it is what I came to:

I don't want my Downloads folder to bee rapidly full, so I would like to download them in a folder contained inside my Downloads folder, let's call it VNW. FIY I'm saying 'download' but it is a dummy download: I construct the file on the fly and I managed to save like this: You don't require Internet connection.

I wrote this code:

var textToSave = "<TITLE>" + titolo + "</TITLE>"  + "<COMMENT>" + ment + "</COMMENT>" + "<LINK>" + indirizzo + "</LINK>" + "\n"; 
var hiddenElement = document.getElementById('SAVE');
hiddenElement.href = 'data:attachment/text,' + encodeURI(textToSave);
hiddenElement.download = 'VNW/myfile.txt';

Bad things it saves the file in my Downloads folder instead of Downloads/VNW as I'm expecting, and it saves the file as VNW_myfile.txt

Why?

Question in the question: When I open in an editor myfile.txt I'm getting,for example:

<TITLE>How to download silently with javascript - Stack Overflow</TITLE><COMMENT>My ment</COMMENT><LINK>

Where the final </LINK> tag is trimmed...and I can't imagine why...:( Is there a way I can download the file silently, without prompting the user every time like this?

Thanks in advance!!

EDIT 1:

Using Daniel Herr ment I'm writing (I am a Javascript beginner)

var ment = document.getElementById('COMMENT').value;
var titolo=document.getElementById('TITLE_TAB').value;
var indirizzo=document.getElementById('URL_TAB').value;
var textToSave = "<TITLE>" + titolo + "</TITLE>"  + "<COMMENT>" + ment + "</COMMENT>" + "<LINK>" + indirizzo + "</LINK>" + "\n"; 
var downloading;
var txt_saving =  'data:attachment/text,' + encodeURI(textToSave);
downloading = browser.downloads.download(url : txt_saving,filename : 'VNW.txt');

But it doesn't work... Thanks again

EDIT 2 Thanks again to Daniel, I'm approaching the solution, but I'm not still there.

Thanks to your code, it starts the download but it says it failed like in the image

I checked my manifest, downloads is correctly there.

Here it is,

{
  "browser_action": {
    "browser_style": true,
    "default_title": "TENTATIVO",
    "default_popup": "save_url.html"
  },
  "description": "TENTATIVO",
  "manifest_version": 2,
  "name": "TENTATIVO",
  "permissions": [
    "tabs",
    "downloads",
    "activeTab"
  ],
  "page_action": {
    "default_icon": "save.png",
    "default_title": "TENTATIVO"
  },
  "version": "1.0"
}

Adding also all the code for reference.

save_url.html

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="tabs.css"/>
  </head>

<body onload="save_url.js">
  <div style="margin-left:5%" id="BODY">
  <form>
  <br>
  <strong>TITOLO:</strong>
  <br>
  <input type="text" value="" id="TITLE_TAB" style="width:90%;"></input>
  <br>
  <strong>URL:</strong>
  <br>
  <input type="text" value="" id="URL_TAB" style="width:90%;"></input>
  <br>
  <strong>DESCRIZIONE:</strong>
  <br>
  <textarea rows="5" cols="5" placeholder="Descrizione.." style="width:90%;" id="COMMENT"></textarea>
  <br>
  <center>
  <a href="" id="SAVE" style="width:90%;" value = "" >SALVA</a>
  </center>
  <br>
  <br>
  </form>
  </div>
  <script src="save_url.js"></script>
  <script src="FileSaver.js"></script>
</body>

</html>

save_url.js

browser.tabs.query({'active': true, 'lastFocusedWindow': true}, function (tabs) {
    var url = tabs[0].url;
    var title = tabs[0].title;

    var x = document.getElementById("URL_TAB");
    x.value = url;
    var y = document.getElementById("TITLE_TAB");
    y.value = title;
});

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("SAVE").addEventListener("click", salva);
});

function salva()
{
    var ment = document.getElementById('COMMENT').value;
    var titolo=document.getElementById('TITLE_TAB').value;
    var indirizzo=document.getElementById('URL_TAB').value;
    var textToSave = "<TITLE>" + titolo + "</TITLE>"  + "<COMMENT>" + ment + "</COMMENT>" + "<LINK>" + indirizzo + "</LINK>" + "\n"; 

    browser.downloads.download({
                                url: URL.createObjectURL(new Blob([ textToSave ])),
                                filename: "test/test.txt",
                                })
}

EDIT 3 Solved.

I actually wrote a blog post (my very first!), thanks for all the help.

So I'm trying to write a Firefox Webextension. I want to save title, url and a personal ment of a webpage into a file, myfile.txt

Here it is what I came to:

I wrote this code:

var textToSave = "<TITLE>" + titolo + "</TITLE>"  + "<COMMENT>" + ment + "</COMMENT>" + "<LINK>" + indirizzo + "</LINK>" + "\n"; 
var hiddenElement = document.getElementById('SAVE');
hiddenElement.href = 'data:attachment/text,' + encodeURI(textToSave);
hiddenElement.download = 'VNW/myfile.txt';

Bad things it saves the file in my Downloads folder instead of Downloads/VNW as I'm expecting, and it saves the file as VNW_myfile.txt

Why?

Question in the question: When I open in an editor myfile.txt I'm getting,for example:

<TITLE>How to download silently with javascript - Stack Overflow</TITLE><COMMENT>My ment</COMMENT><LINK>http://stackoverflow./questions/37781938/how-to-download-silently-with-javascript

Where the final </LINK> tag is trimmed...and I can't imagine why...:( Is there a way I can download the file silently, without prompting the user every time like this?

Thanks in advance!!

EDIT 1:

Using Daniel Herr ment I'm writing (I am a Javascript beginner)

var ment = document.getElementById('COMMENT').value;
var titolo=document.getElementById('TITLE_TAB').value;
var indirizzo=document.getElementById('URL_TAB').value;
var textToSave = "<TITLE>" + titolo + "</TITLE>"  + "<COMMENT>" + ment + "</COMMENT>" + "<LINK>" + indirizzo + "</LINK>" + "\n"; 
var downloading;
var txt_saving =  'data:attachment/text,' + encodeURI(textToSave);
downloading = browser.downloads.download(url : txt_saving,filename : 'VNW.txt');

But it doesn't work... Thanks again

EDIT 2 Thanks again to Daniel, I'm approaching the solution, but I'm not still there.

Thanks to your code, it starts the download but it says it failed like in the image

I checked my manifest, downloads is correctly there.

Here it is,

{
  "browser_action": {
    "browser_style": true,
    "default_title": "TENTATIVO",
    "default_popup": "save_url.html"
  },
  "description": "TENTATIVO",
  "manifest_version": 2,
  "name": "TENTATIVO",
  "permissions": [
    "tabs",
    "downloads",
    "activeTab"
  ],
  "page_action": {
    "default_icon": "save.png",
    "default_title": "TENTATIVO"
  },
  "version": "1.0"
}

Adding also all the code for reference.

save_url.html

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="tabs.css"/>
  </head>

<body onload="save_url.js">
  <div style="margin-left:5%" id="BODY">
  <form>
  <br>
  <strong>TITOLO:</strong>
  <br>
  <input type="text" value="" id="TITLE_TAB" style="width:90%;"></input>
  <br>
  <strong>URL:</strong>
  <br>
  <input type="text" value="" id="URL_TAB" style="width:90%;"></input>
  <br>
  <strong>DESCRIZIONE:</strong>
  <br>
  <textarea rows="5" cols="5" placeholder="Descrizione.." style="width:90%;" id="COMMENT"></textarea>
  <br>
  <center>
  <a href="" id="SAVE" style="width:90%;" value = "" >SALVA</a>
  </center>
  <br>
  <br>
  </form>
  </div>
  <script src="save_url.js"></script>
  <script src="FileSaver.js"></script>
</body>

</html>

save_url.js

browser.tabs.query({'active': true, 'lastFocusedWindow': true}, function (tabs) {
    var url = tabs[0].url;
    var title = tabs[0].title;

    var x = document.getElementById("URL_TAB");
    x.value = url;
    var y = document.getElementById("TITLE_TAB");
    y.value = title;
});

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("SAVE").addEventListener("click", salva);
});

function salva()
{
    var ment = document.getElementById('COMMENT').value;
    var titolo=document.getElementById('TITLE_TAB').value;
    var indirizzo=document.getElementById('URL_TAB').value;
    var textToSave = "<TITLE>" + titolo + "</TITLE>"  + "<COMMENT>" + ment + "</COMMENT>" + "<LINK>" + indirizzo + "</LINK>" + "\n"; 

    browser.downloads.download({
                                url: URL.createObjectURL(new Blob([ textToSave ])),
                                filename: "test/test.txt",
                                })
}

EDIT 3 Solved.

I actually wrote a blog post (my very first!), thanks for all the help.

Share Improve this question edited Feb 12, 2017 at 14:43 asked Feb 10, 2017 at 22:20 Jacquelyn.Marquardt 6302 gold badges14 silver badges32 bronze badges

@DanielHerr Thanks. Think I came to that link but abandoned since I'm a beginner. However, can you please suggest how can I make the download? What do I pass to url in that function? It isn't a url, instead a mechanism I use to save the content of a JS variable to a file. – Jacquelyn.Marquardt Commented Feb 10, 2017 at 22:58

Add a ment |

2 Answers 2

Sorted by: Reset to default 3

You will need to use the downloads api and add the "downloads" permission to the manifest.

browser.downloads.download({
 url: URL.createObjectURL(new Blob([ textToSave ])),
 filename: "test/test.txt",
 saveAs: false,
})

If the filename is a path, any parent folders will be created if needed.

https://developer.mozilla/en-US/Add-ons/WebExtensions/API/downloads/download

Subfolders require Firefox 51+ https://bugzilla.mozilla/show_bug.cgi?id=1280044

Have you tried a leading / or \ in front your file-destination (/VNW/..) or use a full file-destination (..\downloads\VNW\myfile.txt) Are you running this on your own server? Maybe you may need to explore your file system structure a little more??? You might need to capture the users chosen filepath from the browser?

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

Javascript download an on-the-fly generated BLOB file into specific folder - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)