使用vue从本地文件夹下载文件

Question

几个小时前，我注意到 <a href='path' download></a> 在 vue 中不起作用，就在我想完成我的项目之前。我已经搜索了将近 4 小时的解决方案，但我什么也没找到，这就是我来这里的原因。

我想使用 vue 从服务器上的本地文件夹 docs 下载文件（pdf、doc、docx）。这是文件夹树：

|--src
    |--app.vue
    |--docs
        |--file.doc
        |--file.pdf
        |--file.docx

所以有模板部分：

<v-row justify="center">
      <v-col
      v-for="(docs, i) in info"
      :key="i"
      cols="10"
      >
        <v-card>
          <v-row>
            <v-col
            cols="10"
            >
              <v-icon large>mdi-file-document-outline</v-icon> {{ docs.name }}
            </v-col>
            <v-col
            cols="2"
            >
              <v-row><a :href="docs.file" download><v-icon color="green" large>mdi-download</v-icon></a></v-row>
            </v-col>
          </v-row>
        </v-card>
      </v-col>
    </v-row>

...和脚本部分：

  import axios from 'axios'
  export default {
    data () {
      return {
        info: null,
      }
    },
    mounted () {
      axios
        .get('http://localhost:8080/Project/Orders/')
        .then(response => {this.info = response.data.data})
        .catch(error => console.log(error))
    },
 }

我正在使用 axios 通过 Django（后端）从数据库（id、名称、文件=路径）获取数据。我想在没有 Django 的情况下从 docs 文件夹下载文件，但如果有人认为使用它会更好，我也会很感激。

Answer 1

改为使用以下内容：

/ ...
const link = document.createElement("a");
link.href = '... path to donwload';
link.setAttribute("download", "file.doc");
link.click();

您的 public 目录中需要您的文档文件夹。

使用vue从本地文件夹下载文件

Downloading file from local folder using vue

django

download

vue.js