如何使用 tag下载外部.VTT

Question

我正在尝试创建一个按钮，单击该按钮后，它将下载一个外部.vtt文件。我有此代码：

<a href="https://bitflix-subs.herokuapp.com/subs/tt2935510/0" download>Download</a>

但是当单击时，它会将我重定向到该页面，并且无法开始下载。

Answer 1

您无法从html类型页面手动下载vtt文件。您唯一可以做的是：

<a href="bitflix-subs.herokuapp.com/subs/tt2935510/0" download>Download</a>

进行此更改后，它将尝试下载一个html页面，您可以使用一些javascript将该页面手动更改为.vtt文件

希望对您有帮助！

Answer 2

这里是使用blob下载和fetch API的解决方案：

<a name="dl" id="dl" download="download.vtt" target=_blank>clicky click</a>

<script>
fetch('https://bitflix-subs.herokuapp.com/subs/tt2935510/0')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
          }
          return response.blob();
        })
        .then(myBlob => {
            let b = URL.createObjectURL(myBlob)
            document.getElementById('dl').href = b
        })
        .catch(error => {
            console.error('There has been a problem with your fetch operation:', error);
    });

// to clean up
//window.URL.revokeObjectURL(a.href);
</script>