将下载URL传递给Bootstrap模式

Question

我想将文件下载URL传递给 Bootstrap Modal ，当我点击链接然后在Bootstrap Modal上填写一些信息，如名称，emailaddress当我点击页脚按钮我要下载该文件我怎么能实现这个目标？

Answer 1

我不知道我对你的问题是否正确，但你只需按下模态页脚的按钮即可触发下载功能。请参阅我的样本demo。

修改

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

<强> 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>

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

Answer 2

有很多方法可以做到这一点。它主要取决于您要下载的格式。将其下载为.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';
};