将下载URL传递给Bootstrap Modal

Pass Download URL to Bootstrap Modal

本文关键字：Bootstrap Modal 下载 URL      更新时间：2023-09-26

当我点击链接时，我想将文件下载URL传递到Bootstrap Modal，然后在填写了一些信息后，在Bootstrap Mode上，当我点击页脚按钮时，我想要下载该文件，如名称、电子邮件地址。我怎样才能做到这一点？

我不知道我对你的问题是否正确，但你只需按下模态页脚的按钮即可触发下载功能。看看我的样品演示。

编辑

我对你的问题的理解是，当用户点击链接时，会出现一个模态，在模态的页脚是直接下载按钮。请注意，在我的演示中，我将模态设置为对用户的提示确认。

HTML

<!-- Button that acts as a link and triggers the modal to open -->
<button class="btn btn-link" data-toggle="modal" data-target="#myModal">Download</button>
<!-- Prompt modal. Notice that this is just a confirmation for downloading the file -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Download</h4>
      </div>
      <div class="modal-body">
        <p>Do you really want to download the file?</p>
      </div>
      <div class="modal-footer">
        <!-- The download button -->
        <a href="http://s1.picswalls.com/wallpapers/2014/08/08/scottish-landscape-hd_015751702_152.jpg" download>
          <button type="button" class="btn btn-primary">DOWNLOAD</button>
        </a>
        <button type="button" class="btn btn-default" data-dismiss="modal">CLOSE</button>
      </div>
    </div>
  </div>
</div>

阅读本文以了解有关download属性的更多信息。

有很多方法。这基本上取决于您想要下载的格式。下面是一些将其下载为.txt文件的简单示例。

HTML:

<textarea>some text here to downlaod</textarea>
<p><a href="#">Export</a></p>

javascript:

var container = document.querySelector('textarea');
var anchor = document.querySelector('a');
anchor.onclick = function() {
    anchor.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(container.value);
    anchor.download = 'export.txt';
};
相关文章：