Question

我想让用户通过单击下载图标来下载图像：

图像文件已从服务器获取并显示：

<img  :src="currentMediaUrl">

该按钮用于强制浏览器下载上面的图像：

 <i @click="downloadMedia(currentMediaUrl)" class="fa fa-download"> </i>

这是我尝试过的：

downloadMedia(media) {
  let uriContent = "data:application/octet-stream," + encodeURIComponent(media);
  window.open(uriContent, 'neuesDokument');

},

但是它会下载一个包含媒体URI的文件，而不是一个文件。

我该如何解决？

Answer 1

您将执行与普通html5中相同的操作，即使用link元素，设置download属性，然后...瞧！

<a href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAnElEQVR42u3RAQ0AAAgDIE1u9FvDOahAJzXFGS1ECEKEIEQIQoQgRIgQIQgRghAhCBGCECEIQYgQhAhBiBCECEEIQoQgRAhChCBECEIQIgQhQhAiBCFCEIIQIQgRghAhCBGCEIQIQYgQhAhBiBCEIEQIQoQgRAhChCAEIUIQIgQhQhAiBCEIEYIQIQgRghAhCBEiRAhChCBECEK+W0L3+TnU7375AAAAAElFTkSuQmCC"
  download="myImage.png"
  target="_blank"
>
  Download
</a>

在您的情况下，它将是：

<a :href="currentMediaUrl" download="myPrettyFileName.png">
  <i class="fa fa-download" aria-hidden="true"></i> 
</a>

Answer 2

考虑到您是在对URL本身而不是其内容进行编码，这是正常现象。

您可以通过其他方式获得期望的结果：

<a :href="currentMediaUrl" download><i class="fa fa-download"></i></a>

如何强制浏览器使用vue.js下载文件？

2 个答案: