单击 span 下载 html 文件

Question

我想通过单击跨度下载 HTML 文件。

我没有在其中使用任何锚标记。我想通过单击跨度来执行此操作。

Url 有 .html 扩展名。 url 到 html 文件在另一个域 (Amazon s3)

如何在 JavaScript 中实现这一点，因为在锚标记中我会很容易在其中写入属性 'download'。

Answer 1

如果您正在使用 HTML5，您可以使用下载属性：

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

Answer 2

这实际上是在 Firefox 中将页面的当前位置设置为 data:text/attachment 的问题。在 Chrome 中，设置位置似乎不会触发文件下载。下面是我的提议，它允许您指定文件名以及您要下载的网站部分 HTML（保留缩进）。

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();
});

span {
  color: green;
  cursor: pointer;
}

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

从How to download the current page as a file / attachment using Javascript?你可以看到其他例子，其中也可以下载页面的确定部分等。（ps：代码片段不会运行来自 Stack Overflow 添加的 iframe。

Answer 3

感谢您的回答和评论。

我现在可以下载文件了，但是违反了问题的先决条件（即锚标记的使用）

我关注了this。 link 中的以下方法可以完成工作

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);
}

但是我现在需要销毁下载 link 后创建的锚标签。

Answer 4

您正在尝试进行跨域请求。为此，您必须启用跨源资源共享 (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

单击 span 下载 html 文件

Download a html file on click of span

html

javascript

amazon-s3

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