Vue a-href download 不下载

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');
    }
  }
})

- Yahoo

---

这个参考链接可能对你有帮助。 https://codepen.io/nigamshirish/pen/ZMpvRa - Rushi Daxini

我已经尝试过了，但对我来说无法下载。 - Yahoo

你是否在同一域上使用此脚本？https://homepages.cae.wisc.edu/ - Rushi Daxini

如果您意思是在同一页内，那么是的。 - Yahoo

Answer 1

window.open 方法用于在新标签页中打开资源，但不会下载文件。

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

注意：URL 必须接受 CORS，否则可能会出现 CORS 错误。

为演示目的，我使用了一些从 Google 中随机选取的图片。

  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 })
      }
    }

这里是 演示链接

- Naren

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>

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

- Rushi Daxini

Answer 3

当然，要下载的资源必须来自同一个域。

在您的VueJS项目中，只需将可下载的资源放在public文件夹中。

然后，html将会是这样的：

<a href="myFile.pdf" download>
   DOWNLOAD
</a>

- Mario Mazzola