时间戳

首页 > 解决方案 > 我正在尝试制作一个下载文件的标签，但它下载的是文件的链接，而不是实际的文件

html - 我正在尝试制作一个下载文件的标签，但它下载的是文件的链接，而不是实际的文件

问题描述

我想在其中创建一个<a>标签，点击函数将在打字稿文件中执行一个名为 downloadFile() 的函数，以便下载一个日志文件。它不是下载日志文件，而是下载有效的日志文件的链接，但我想让下载显示实际的日志信息。

downloadFile() {
    const blob = new Blob(['blablabla.log'], {type: 'text/log'});
    const dataURL = window.URL.createObjectURL(blob);
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
      window.navigator.msSaveOrOpenBlob(blob);
      return;
    }
    const link = document.createElement('a');
    link.href = dataURL;
    link.download = 'export file.log';
    link.click();
    setTimeout(() => {
      window.URL.revokeObjectURL(dataURL);
    }, 100);
  }

标签： htmlangulartypescriptdownload

解决方案

这不是通过单击从 Blob 下载文件的方式。以下是您应该如何进行：

  1. 用一些文件内容和一些类型创建一些 blob
  2. 创建一个 URL 对象。您将此值传递给<a> href属性
  3. 创建一个<a>并将其download属性设置为所需的文件名
  4. 使元素不可见，将其添加到 DOM，然后单击它

下面的例子：

const downloadFile = () => {
  const blob = new Blob(
    ['Some file content'],
    {type:'text/log'}
  );
  const url = window.URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href=url;
  a.download='some-file-name.log';
  a.style.display='none';
  document.body.appendChild(a);
  a.click();
  window.URL.revokeObjectURL(url);
}
<a onclick="downloadFile()">Click me!</a>

推荐阅读