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

时间:2017-02-10 22:20:45

标签: javascript download firefox-addon firefox-webextensions

所以我试图写一个Firefox Webextension。 我想将网页的标题,网址和个人评论保存到文件myfile.txt

这就是我的意思:

enter image description here

我不希望我的“下载”文件夹快速填满,因此我想将其下载到“我的下载”文件夹中包含的文件夹中,让我们将其称为VNW。 飞,我说'下载'但这是一个虚拟下载:我动态构建文件,我设法保存这样:你不需要互联网连接。

我写了这段代码:

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';

将文件保存在我的Downloads文件夹而不是Downloads/VNW中,这是我所期待的错误,并将文件另存为VNW_myfile.txt

为什么?

问题中的问题:当我在编辑器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

最终的</LINK>标签被修剪了......我无法想象为什么...... :( 有没有办法可以静默下载文件,而不是每次都提示用户这样?

enter image description here

提前致谢!!

编辑1:

使用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');

但它不起作用...... 再次感谢

编辑2 再次感谢Daniel,我正在接近解决方案,但我还没有。

感谢您的代码,它开始下载,但它表示失败,如图像enter image description here

我检查了我的清单,下载是正确的。

在这里,

{
  "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"
}

添加所有代码以供参考。

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 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",
                                })
}

编辑3 已解决。

我实际上写了一篇博文(我的第一篇!),感谢所有的帮助。

2 个答案:

答案 0 :(得分:1)

您需要使用下载api并添加&#34;下载&#34;对清单的许可。

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

如果filename是路径,则会根据需要创建任何父文件夹。

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

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

答案 1 :(得分:0)

您是否尝试了文件目标(/ VNW / ..)前面的前导/或\或使用完整文件目的地(.. \ downloads \ VNW \ myfile.txt)您是否自行运行服务器?也许你可能需要更多地探索你的文件系统结构???您可能需要从浏览器中捕获用户选择的文件路径?