Javascript 将即时生成的 BLOB 文件下载到特定文件夹中

Question

So I'm trying to write a Firefox Webextension.所以我正在尝试编写一个 Firefox Webextension。 I want to save title, url and a personal comment of a webpage into a file, myfile.txt我想将网页的标题、网址和个人评论保存到文件myfile.txt

Here it is what I came to:这是我来的：

I don't want my Downloads folder to become rapidly full, so I would like to download them in a folder contained inside my Downloads folder, let's call it VNW .我不希望我的 Downloads 文件夹很快变满，所以我想将它们下载到我的 Downloads 文件夹中包含的文件夹中，我们称之为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. FIY 我说的是“下载”，但它是一个虚拟下载：我即时构建文件并设法像这样保存：您不需要互联网连接。

I wrote this code:我写了这段代码：

var textToSave = "<TITLE>" + titolo + "</TITLE>"  + "<COMMENT>" + comment + "</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坏事它将文件保存在我的Downloads文件夹中，而不是我期望的Downloads/VNW ，并将文件保存为VNW_myfile.txt

Why?为什么？

Question in the question: When I open in an editor myfile.txt I'm getting,for example:问题中的问题：当我在编辑器中打开myfile.txt ，例如：

<TITLE>How to download silently with javascript - Stack Overflow</TITLE><COMMENT>My comment</COMMENT><LINK>http://stackoverflow.com/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?最后</LINK>标记被修剪的地方...我无法想象为什么...:(有没有办法可以静默下载文件，而不会每次都提示用户？

Thanks in advance!!提前致谢！！

EDIT 1:编辑 1：

Using Daniel Herr comment I'm writing (I am a Javascript beginner)使用我正在写的 Daniel Herr 评论（我是 Javascript 初学者）

var comment = document.getElementById('COMMENT').value;
var titolo=document.getElementById('TITLE_TAB').value;
var indirizzo=document.getElementById('URL_TAB').value;
var textToSave = "<TITLE>" + titolo + "</TITLE>"  + "<COMMENT>" + comment + "</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.编辑 2再次感谢丹尼尔，我正在接近解决方案，但我不在那里。

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 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 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 comment = document.getElementById('COMMENT').value;
    var titolo=document.getElementById('TITLE_TAB').value;
    var indirizzo=document.getElementById('URL_TAB').value;
    var textToSave = "<TITLE>" + titolo + "</TITLE>"  + "<COMMENT>" + comment + "</COMMENT>" + "<LINK>" + indirizzo + "</LINK>" + "\n"; 

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

EDIT 3 Solved.编辑 3解决了。

I actually wrote a blog post (my very first!), thanks for all the help.我实际上写了一篇博文（我的第一篇！），感谢所有的帮助。

Answer 1

You will need to use the downloads api and add the "downloads" permission to the manifest.您将需要使用下载 API 并向清单添加“下载”权限。

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.如果filename是路径，则将根据需要创建任何父文件夹。

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

Subfolders require Firefox 51+ https://bugzilla.mozilla.org/show_bug.cgi?id=1280044子文件夹需要 Firefox 51+ https://bugzilla.mozilla.org/show_bug.cgi?id=1280044

Answer 2

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?您是否尝试过在文件目标 (/VNW/..) 前面使用前导 / 或 \\ 或使用完整的文件目标 (..\\downloads\\VNW\\myfile.txt) 您是否在自己的服务器上运行它？ 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 将即时生成的 BLOB 文件下载到特定文件夹中

问题描述

2 个解决方案

解决方案1
1 2017-02-10 22:49:52

解决方案2
0 2017-02-10 22:30:17

Javascript 将即时生成的 BLOB 文件下载到特定文件夹中

问题描述

2 个解决方案

解决方案1 1 2017-02-10 22:49:52

解决方案2 0 2017-02-10 22:30:17

解决方案1
1 2017-02-10 22:49:52

解决方案2
0 2017-02-10 22:30:17