时间戳

首页 > 解决方案 > 为什么我的下载属性不起作用？

javascript - 为什么我的下载属性不起作用？

问题描述

我有一个简单的 HTML 文件。我正在尝试在我的 HTML 上放置一个可下载的图像文件。为此，我在这里使用了代码。

我的代码如下所示：

<!DOCTYPE html  >
<html lang="en" style="background:  #fffff0;">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body >
    <div style="padding-left: 400px;padding-top: 200px;padding-right: 400px;"><p style="    line-height: 130%; padding-left: 10px;padding-top: 10px;padding-right: 10px;padding-bottom: 10px;background: white; border-radius: 15px; border-style: groove"><b>Aufgabe 3</b><br><br>

some text....
<br><br>

<a href="Hoffest.jpg" download="Hoffest.jpg">
  <img src="Hoffest.jpg" width="150" height="120">
</a>

<br><br>

some more text...
<br><br><button type="button" id="weiter" value="weiter"  style="font-size : 26px; width: 9%; height: 36px; border-radius: 7px"
                 onclick="window.location.href='{{ url_for( 'test' ) }}'">weiter</button></p></div>
</body>
</html>

当我打开 html 文件时，我还可以看到一些文本和图像视图。当我点击图片时，我希望它会像上面的链接一样被下载。而是单击在同一选项卡上打开此图像文件，从我的 html 文件更改。我也试过用按钮来做。所以，而不是<img src="Hoffest.jpg" width="150" height="120">我把<button>Download Image</button>. 同样的事情也发生了。当我单击该按钮时，它只是在同一选项卡上打开了图像而不下载它。我究竟做错了什么？

标签： javascripthtml

解决方案

根据您对我的评论的回答，我假设您是通过在浏览器中打开 HTML 文件直接尝试此操作。

该download属性对原点有很强的限制。它必须相同（blob:和方案除外），但如果您直接打开文件（使用）data:，它也不起作用file://

您可以做的是运行本地 HTTP 服务器（我个人使用 npm 包http-server，或者您可以运行 Apache 或 Nginx 等经典 Web 服务器）并使用 HTTP 协议通过服务器访问您的文件。

推荐阅读