我目前正在为我的办公室建立一个内部网站。我想包括一个按钮，下载一个图像点击。
在做了一些研究之后，我了解了新的HTML5download属性，这似乎是一个简单的解决方案。但是，当单击chrome中的链接时，尽管<a>标记中有下载属性，但它的行为与普通链接类似。我检查了firefox，它似乎按预期工作。
我知道这个论坛上也讨论了一些类似的话题，但我的具体问题需要注意的是，出于安全原因，我正在构建的内部网站实际上并不是托管的，而是放在共享驱动器中的一个文件夹，我的同事可以访问。
因为它没有在线连接，我怀疑这可能是它不起作用的原因，但我还没有在网上找到任何支持我理论的东西。有没有一种方法可以让download属性在离线的纯HTML网站中工作？有没有javascript替代方案可以用来添加此功能？
附言：我添加了一些示例代码，以防我忽略了一些内容。我使用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><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>
用要下载的文件的确切路径试试这个东西