从 javascript 表下载存储在 firebase 数据库中的文件答案

【问题标题】：Download a file stored in firebase database from a javascript table从 javascript 表下载存储在 firebase 数据库中的文件
【发布时间】：2018-03-06 07:39:26
【问题描述】：

我目前正在构建一个 Web 应用程序，我对 javascript 还很陌生，我无法自己找到解决方案。我目前正在从 firebase 数据库中拖动一些数据并将它们显示在我的网站上。我的数据库是这样的

我正在使用 html 和 javascript 创建一个包含来自 firebase 数据库的信息的表，并将其显示在我的网站上。 html是代码如下：

<h3>Files List</h3>

                    <table class="zui-table zui-table-rounded" id="tbl_users_list" border="1">
                    <thead>
                    <tr>
                    <td>#ID</td>
                    <td>NAME</td>
                    <td>DATE</td>
                    <td>LINK</td>
                    </tr>
                     </thead>
                    </table>
                  </div>

在我的 javascript 表中，我添加了另一个名为 LINK 的列。在本专栏中，我有一些 JavaScript 按钮。我想要做的是将存储在我的firebase数据库中的每个文件的url作为相应按钮的值，所以当用户单击相应文件的按钮以便能够在他的电脑中下载它但我找不到解决方案，有人可以帮帮我吗？

我的javascript源代码如下：

var tblUsers = document.getElementById('tbl_users_list');
var databaseRef = firebase.database().ref('files/');
var rowIndex = 1;

databaseRef.once('value',function(snapshot){
snapshot.forEach(function(childsnapshot) { 
var childKey = childsnapshot.key;
var childData = childsnapshot.val();

var row = tblUsers.insertRow(rowIndex);
var cellId = row.insertCell(0);
var cellName = row.insertCell(1);
var cellName2 = row.insertCell(2);
var button = row.insertCell(3);

var itd = document.createElement('input');
itd.setAttribute("type","button");
itd.setAttribute("value","Download");

cellId.appendChild(document.createTextNode(childKey));
cellName.appendChild(document.createTextNode(childData.name));
cellName2.appendChild(document.createTextNode(childData.created));
button.appendChild(itd);

rowIndex = rowIndex+1;

我的桌子是这样的

【问题讨论】：

标签： javascript firebase firebase-realtime-database

【解决方案1】：

您需要检索网址：

var childKey = childsnapshot.key;
var childData = childsnapshot.val();
var urls=childData.url;

然后单击按钮下载文件。

var itd = document.createElement('input');
itd.onclick=function () {
window.open(childData.url);
};

window.open()会按照这个下载文件：

https://developer.mozilla.org/en-US/docs/Web/API/Window/open

Using window.open() to download file, how to not remove the # in URL?

【讨论】：

【解决方案2】：

如果您改用链接，则可以使用HTML5 download 属性：

&lt;a href="https://i.stack.imgur.com/uIhLA.jpg?s=32&amp;g=1" download&gt;Click to download Peter Haddad's profile pic&lt;/a&gt;

您也可以设置文件的名称，但只要它是内部图像，就可以设置属性的值。（例如 dowload="name-of-file"）

【讨论】：