Question

我目前正在为我的办公室建立一个内部网站。我想添加一个按钮，点击该按钮即可下载图像。

经过研究，我了解了新的HTML5 download属性，这似乎是一个简单的解决方案。但是，单击Chrome中的链接时，尽管在<a>标签中具有download属性，但它的行为类似于普通链接。我检查了firefox，它似乎按预期工作。

我知道在此论坛上这里讨论了一些类似的主题，但我要注意的一个问题是，出于安全原因，我正在构建的内部站点实际上并未托管，而是放置在共享驱动器中的文件夹我的同事可以访问。

由于它没有在线连接，我怀疑这可能是它不起作用的原因，但尚未找到任何在线支持我的理论的原因。是否有一种方法可以使download属性在脱机的纯HTML网站中工作？是否可以使用javascript替代品来添加此功能？

P.S。我添加了一些示例代码，以防万一我忽略了某些东西。我正在使用Vue来管理网站上的所有内容，另外还有一些下载按钮的动画样式，这些样式可能在不知不觉中导致了我的问题。

/*
  Used to trigger button animation.
  Possibly a factor in the download attribute not working.
*/

$('.animated-button').click(function() {
  $target1 = $('.animated-button');
  $target1.removeClass('animate');
  setTimeout(function() {
    $target1.addClass('animate');
  }, 100);
});

/*
  Used to style button and animation for the button.
  Possibly a factor in the download attribute not working.
*/

.button {
  font-family: 'Montserrat', Helvetica, Arial, Sans-Serif;
  display: inline-block;
  margin: 0;
  padding: 10px 15px;
  width: 200px;
  background: #036CE2;
  border: 2px solid #036CE2;
  border-radius: 5px;
  color: #FFF;
  font-size: 20px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
  outline: none;
}

.button:active {
  transform: scale(0.9);
}

.button:hover,
.button:focus {
  background: #004CA3;
  border-color: #004CA3;
  color: #fff;
}

.animated-button span {
  display: block;
  padding: 10px 0;
  width: 100%;
  height: 100%;
  color: white;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
}

.animated-button.animate {
  -webkit-animation: success 2s ease;
  -moz-animation: success 2s ease;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
}

.animated-button.animate span {
  -webkit-animation: success-text 1.5s ease;
  -moz-animation: success-text 1.5s ease;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
}

@-webkit-keyframes success {
    0% {}
   15% { background: #62E03C; color: #62E03C; border-color: #62E03C; }
   85% { background: #62E03C; color: #62E03C; border-color: #62E03C; }
  100% {}
}

@-moz-keyframes success {
    0% {}
   15% { background: #62E03C; color: #62E03C; border-color: #62E03C; }
   85% { background: #62E03C; color: #62E03C; border-color: #62E03C; }
  100% {}
}

@-webkit-keyframes success-text {
    0% { opacity:0; transform: translateY(20px)}
   15% { opacity:1; transform: translateY(0)}
   85% { opacity:1; transform: translateY(0)}
  100% { opacity:0; transform: translateY(-20px)}
}

@-moz-keyframes success-text {
    0% { opacity:0; transform: translateY(20px)}
   15% { opacity:1; transform: translateY(0)}
   85% { opacity:1; transform: translateY(0)}
  100% { opacity:0; transform: translateY(-20px)}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a :href="BDY0100Block.imageUrl" class="button colored full mb-5 animated-button" download>Download Img <span>Downloaded!</span></a>

Answer 1

<a href="/exact/path/to/your/file/to/be/download" class="button colored full mb-5 animated-button" download>Download Img <span>Downloaded!</span></a>

尝试使用要下载文件的确切路径进行操作

chrome下载属性在纯html中不起作用？

1 个答案: