当前位置：文江博客话题详情

如何使用 HTML/JavaScript 强制下载？

发布于 2024-08-22 03:45:24 字数 185 浏览 6 评论 0原文

我有一个链接，如果用户单击它，我需要发生两件事：

向用户发送正确的 HTTP 响应（尤其是 Content-Type: video/mp4）
和视频文件将自动开始下载。

我在 PHP 中见过类似的东西，但是只有 HTML/JavaScript 才可能吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

生生不灭 2024-08-29 03:45:24

您可以使用下载属性

<a href="http..." download></a>

或使用查看更多指定文件名

<a href="http..." download="filename.pdf"></a>

： https:// /developer.mozilla.org/en/HTML/element/a#attr-download

you can use the download attribute

<a href="http..." download></a>

or specify a filename using

<a href="http..." download="filename.pdf"></a>

see more: https://developer.mozilla.org/en/HTML/element/a#attr-download

回复收藏 0 原文

锦爱 2024-08-29 03:45:24

自动很大程度上取决于浏览器及其选项。但是您可以通过 Content-Disposition 响应中的标头。例如，将其设置为 attachment;filename=blah.mp4 在大多数浏览器上，将邀请用户下载它（使用该文件名），即使浏览器通常会尝试显示/播放其自己的界面中的内容。详细信息请参阅链接。（下载可能是 mp4 文件的默认设置，但这取决于用户；我发现这在提供 HTML 文件的下载链接时很有帮助。）

如果您不使用服务器端，则可以通过 Web 服务器中的配置设置标头脚本（正如你所说，你不是）。例如，使用 Apache，您可以使用与这些视频文件的 URL 匹配的规则，并使用 标头指令。

回复收藏 0 原文

三五鸿雁 2024-08-29 03:45:24

不，这是不可能的（至少对于仅限于客户端 JavaScript 的 JavaScript 值而言）。

如果要覆盖浏览器处理 HTTP 资源的默认行为，则需要使用 HTTP 标头来实现。如果您想正确执行此操作，请使用内容处置标头（带有附件价值）。

您可以使用服务器端 JavaScript 或（几乎）任何其他服务器设置此标头侧面环境。

回复收藏 0 原文

不乱于心 2024-08-29 03:45:24

我找到了使用库Axios强制下载的可靠方法

<script src=
"https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<button onclick="download()">Download</button>
<script>
    let downloadUrl  = 'https://example.com/image.jpg';
    let downloadName = 'image.jpg';
    function download(){
        axios({
            url: downloadUrl,
            method:'GET',
            responseType: 'blob'
        })
        .then((response) => {
            const url = window.URL.createObjectURL(new Blob([response.data]));
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', downloadName);
            document.body.appendChild(link);
            link.click();
        });
    }        
</script>

I found a reliable way of forcing a download using the library Axios

<script src=
"https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<button onclick="download()">Download</button>
<script>
    let downloadUrl  = 'https://example.com/image.jpg';
    let downloadName = 'image.jpg';
    function download(){
        axios({
            url: downloadUrl,
            method:'GET',
            responseType: 'blob'
        })
        .then((response) => {
            const url = window.URL.createObjectURL(new Blob([response.data]));
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', downloadName);
            document.body.appendChild(link);
            link.click();
        });
    }        
</script>

回复收藏 0 原文

~没有更多了~