vue a-href 下载不下载

Question

嘿，我对 Vue 真的很陌生，对于这个项目，我有一个下载按钮，用户可以从中下载文件。当我单击“下载”按钮时，它会继续在同一浏览器中打开文件而不是下载它。a-href他们是制作或button function下载文件的方法吗？

我在 jsFiddle https://jsfiddle.net/ez36jmx5/10/上的代码。

看法

<div id="app">
  <a href="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" download>DOWNLOAD</a>
  <br><br>
  <button v-on:click="clickedDownload()"> <!-- opens files in new tab -->
   DOWNLOAD
  </button>
</div>

方法

new Vue({
  el: "#app",
  data: {
  
  },
  methods: {
        clickedDownload(){
        var fileName='https://homepages.cae.wisc.edu/~ece533/images/airplane.png';
      window.open(fileName, 'Download');
    }
  }
})

Answer 1

window.open方法在新选项卡中打开资源，它不会下载文件。

要下载图像，请尝试以下代码。要了解更多信息，请阅读这些答案

注意：URL 必须接受 CORS，否则您可能会收到 CORS 错误。

为了演示目的，我使用了来自谷歌的一些随机图像

  async clickedDownload(){
        const fileName = 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png';
      
      try {
        const response = await fetch(fileName)
        const blob = await response.blob();
        const url = await URL.createObjectURL(blob)

        const a = document.createElement("a");
        a.href = url;
        a.download = "myImage.png";
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      } catch(err) {
        console.log({ err })
      }
    }

演示链接在这里

Answer 2

为了下载文件，图像必须上传到托管 HTML 页面/js 的同一域下。

您可以通过 JS 或 Vue.js 创建锚标记并强制下载文件。

以下是更新后的工作代码片段，用于通过锚标记以及 JS/Vue.js 下载文件。

new Vue({
  el: "#app",
  data: {
  
  },
  methods: {
        clickedDownload(){
        const link = document.createElement('a');
      link.href = 'https://homepages.cae.wisc.edu/~ece533/images/airplane.png';
      link.setAttribute('download', 'file.png'); //or any other extension
      document.body.appendChild(link);
      link.click();
    }
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <a href="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" download>DOWNLOAD</a>
  <br><br>
  <button v-on:click="clickedDownload()"> <!-- opens files in new tab -->
   DOWNLOAD
  </button>
</div>

download 属性仅适用于同源 URL。因此，如果 href 与站点的来源不同，它将无法工作。换句话说，您只能下载属于该网站的文件。该属性遵循同源策略中相同的规则概述。