如何在 html 页面上单击提交时下载文件？答案

【问题标题】：How to Download file on clicking submit on an html page?如何在 html 页面上单击提交时下载文件？
【发布时间】：2020-11-24 01:05:06
【问题描述】：

我有一个单选按钮，其中列出了我的 google 驱动器中的文件名。我希望能够选择一个文件并使用下载 url 将其下载到我的本地设备。我使用来自 Drive API 的 ajax /jquery 使用 HTTP GET 请求获取下载 url。这是我的 get 请求中的成功函数。

    success: function (data) {
                   console.log(data);
                   console.log(data.items[0].alternateLink);

                   $.each(data.items, function(key, value) {
                    
                    const uri = value.alternateLink;
                    var uri_dec = decodeURIComponent(uri);
                    
                    
                    $('ul').append('<li class="list-group-item"> <input type="radio" name="recording" id="recording" value="' +uri_dec+ '">  '+value.title+' </li>');
                    //$("ul").append("<li class=\"list-group-item\">"+value.title+"</li>");
                    console.log(uri_dec);
                    
                    document.getElementById("Decoded").innerHTML = uri_dec;

}}

【问题讨论】：

这能回答你的问题吗？ Download File Using Javascript/jQuery

标签： javascript html jquery ajax

【解决方案1】：

你需要渲染单选按钮吗？如果没有，这个 sn-p 将创建一个下载链接列表：

const uri = value.downloadUrl;  // try this or value.webContentLink

$('ul').append('<li class="list-group-item"><a href="' + uri + '">'+value.title+' </a></li>');

您应该能够单击任何链接下载文件。

阅读 Google Drive API 文档，我认为 downloadUrl 或 webContentLink 可能是您正在寻找的属性：

https://developers.google.com/drive/api/v2/reference/files

如果您仍需要帮助，请查看 Google 指南：

https://codelabs.developers.google.com/codelabs/gsuite-apis-intro/#0

【讨论】：

【解决方案2】：

你需要添加下载属性

const uri = value.downloadUrl;

$('ul').append('<li class="list-group-item"><a href="' + uri + ' download ">'+value.title+' </a></li>');

如果你想给你的文件命名，你也可以像这样为下载属性赋值：-

$('ul').append('<li class="list-group-item"><a href="' + uri + ' download ='theFileName' ">'+value.title+' </a></li>');

【讨论】：