Question

我目前正在构建一个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;

我的表格看起来像这样

Answer 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?

Answer 2

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

＆＃13;

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

＆＃13;

您也可以设置文件的名称，但只要设置内部图像，就可以设置属性的值。（例如，dowload =＆＃34;文件名称＆＃34;）

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

2 个答案: