Vue 中让图片链接下载而不是打开新页面
要使 Vue 中的图片链接在用户点击时下载而不是打开新页面,你可以使用 `<a>` 标签的 `download` 属性。该属性用于指定链接的目标文件名,并告诉浏览器在点击时下载文件而不是打开它。
以下是一个示例:
<template>
<div>
<a :href="imageUrl" download="image.jpg">下载图片</a>
</div>
</template>
<script>
export default {
data() {
return {
imageUrl: 'https://example.com/image.jpg'
};
}
};
</script>
在上面的示例中,当用户点击“下载图片”链接时,浏览器将下载 `https://example.com/image.jpg` 并将其保存为 `image.jpg` 文件。你可以根据需要更改链接的 URL 和文件名。
原文地址: https://www.cveoy.top/t/topic/m1GI 著作权归作者所有。请勿转载和采集!