Question

我想点击一个跨度来下载HTML文件。

我在这里没有使用任何锚标签。我想通过简单点击一个跨度来做到这一点。

Url的扩展名为.html。并且html文件的url位于另一个域（Amazon s3）

如何在JavaScript中实现这一点，就像在锚标记中一样，我可以轻松地编写属性＆＃39; download＆＃39;在它。

Answer 1

这实际上是将页面的当前位置设置为data:text/attachment（在FF中）。在Chrome中，似乎设置位置不会触发文件下载。下面是我的命题，让你指定文件名以及你想要下载为html的网站部分（保留缩进）

＆＃13;

function toBase64 (str) {
  return window.btoa(unescape(encodeURIComponent(str)));
}

function triggerDownload () {
  var html = 'data:text/attachment;base64,' + toBase64(document.querySelector('html').innerHTML);
  var evt = new MouseEvent('click', {
    view: window,
    bubbles: false,
    cancelable: true
  });

  var a = document.createElement('a');
  a.setAttribute('download', 'file.html');
  a.setAttribute('href', html);
  a.setAttribute('target', '_blank');

  a.dispatchEvent(evt);
}

document.querySelector('span').addEventListener('click', function () {
  triggerDownload();
});

＆＃13;

span {
  color: green;  
  cursor: pointer;
}

＆＃13;

<h1>Click <span>here</span> to download</h1>

＆＃13;

从How to download the current page as a file / attachment using Javascript?您可以看到其他示例，其中也可以下载页面的确定部分等。（ps：该片段赢得了从stackoverflow添加的iframe中运行）

Answer 2

感谢您的回答和评论。

我现在能够下载该文件，但是违反了问题的先决条件（即锚标记用法）

我跟着this。链接中的以下方法可以完成工作

function SaveToDisk(fileUrl, fileName) {
    var hyperlink = document.createElement('a');
    hyperlink.href = fileUrl;
    hyperlink.target = '_blank';
    hyperlink.download = fileName || fileUrl;

    var mouseEvent = new MouseEvent('click', {
        view: window,
        bubbles: true,
        cancelable: true
    });

    hyperlink.dispatchEvent(mouseEvent);
    (window.URL || window.webkitURL).revokeObjectURL(hyperlink.href);
}

但是我现在需要销毁下载链接后创建的锚标记。

Answer 3

您正在尝试发出跨域请求。为此，您必须启用跨源资源共享（CORS）。幸运的是，S3支持CORS请求。您需要通过添加CORS配置来启用它。

请参阅How Do I Enable CORS on My Bucket?

上的AWS文章

在浏览器中使用AJAX下载文件

function download() {
$.ajax({
url: "https://s3.amazonaws.com/123d_test/yourHtmlFile.html",
type: "GET",
dataType: "text",
success: function (data, textStatus,jqXHR)
    { alert(data.toString()); console.log(data);},
error: function (data, textStatus, jqXHR)
    {alert("error"); console.log(textStatus);}
    });
    }

Source

Answer 4

如果您使用的是HTML5，则可以使用下载属性：

<a href="something.html" download="something.html">Download</a>

点击跨度下载html文件

4 个答案:

在浏览器中使用AJAX下载文件