В настоящее время я создаю внутренний веб-сайт для моего офиса.Я хочу включить кнопку, которая загружает изображение при нажатии.
После некоторых исследований я узнал о новом атрибуте HTML5 download и выглядел как простое решение.Однако при нажатии на ссылку в Chrome она ведет себя как обычная ссылка, несмотря на наличие атрибута загрузки в теге <a>.Я проверил Firefox, и он, кажется, работает как задумано.
Я знаю, что на этом форуме обсуждается несколько похожих тем, но проблема в моей конкретной проблеме заключается в том, что внутренний сайт, который я создаю, на самом деле не размещенпо соображениям безопасности, и вместо этого это папка, размещенная на общем диске, к которой мои коллеги могут получить доступ.
Поскольку он не подключен к сети, я подозреваю, что это может быть причиной того, что он не работает, но пока не нашелчто-нибудь онлайн, чтобы поддержать мою теорию.Есть ли способ заставить атрибут download работать на автономном простом HTML-сайте?Есть ли альтернативы javascript, которые я могу использовать для добавления этой функциональности?
PS Я добавил пример кода на всякий случай, если я что-то пропускаю.Я использую 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>