Vue 点击下载图片 - 使用 <a> 标签实现下载功能
在 Vue 中，可以使用 `` 标签的 `download` 属性来实现点击下载图片。首先，需要在 `` 中添加一个 `` 标签，并设置 `href` 属性为图片的 URL，`download` 属性为要下载的文件名。然后，使用 `@click` 事件监听点击事件，在点击时触发下载。
以下是一个示例代码：
<template>
<div>
<a :href="imageURL" download="image.jpg" @click="downloadImage">下载图片</a>
</div>
</template>
<script>
export default {
data() {
return {
imageURL: 'https://example.com/image.jpg' // 替换为实际的图片URL
};
},
methods: {
downloadImage() {
// 如果需要在下载之前进行一些操作，可以在这里添加代码
// 使用JavaScript模拟点击下载链接
const link = document.createElement('a');
link.href = this.imageURL;
link.download = 'image.jpg';
link.click();
}
}
};
</script>
在上面的示例中，当点击'下载图片'链接时，会触发 `downloadImage` 方法。该方法中使用 JavaScript 动态创建一个 `` 标签，并设置其 `href` 和 `download` 属性，然后模拟点击该链接，从而实现下载图片的功能。
原文地址: https://www.cveoy.top/t/topic/m1k8 著作权归作者所有。请勿转载和采集!