vue实现点击按钮下载文件功能

以下是详细讲解“vue实现点击按钮下载文件功能”的完整攻略：

1. 准备工作

在实现点击按钮下载文件功能之前，我们需要先完成以下准备工作：

1.1 确定下载文件的文件路径

要下载的文件必须事先确定好其文件路径。在Vue项目中一般会将需要下载的文件放在public目录下，因为这些文件可以直接被访问。

1.2 安装file-saver库

在Vue项目中，文件下载一般会使用第三方库file-saver，它可以方便地实现文件下载功能。你可以在终端中使用以下命令进行安装：

npm install file-saver --save

1.3 引入file-saver库及Blob对象

在Vue组件中，需要在<script>标签中引入file-saver库及Blob对象。你可以使用以下代码进行引入：

import { saveAs } from 'file-saver'

// 点击下载按钮事件
export default {
  methods: {
    downloadFile() {
      // 文件路径
      const filePath = '/public/files/example.pdf'

      // 获取文件流
      axios.get(filePath, {
        responseType: 'blob'
      }).then((res) => {
        const blob = new Blob([res.data], { type: 'application/octet-stream' })

        // 保存文件
        saveAs(blob, 'example.pdf')
      })
    }
  }
}

2. 实现点击按钮下载文件功能

2.1 实现下载按钮

首先，在Vue组件中添加一个按钮，作为文件下载的触发器：

<template>
  <div>
    <button @click="downloadFile">下载文件</button>
  </div>
</template>

<script>
  // 引入file-saver库及Blob对象
  import { saveAs } from 'file-saver'

  export default {
    methods: {
      downloadFile() {
        // 文件路径
        const filePath = '/public/files/example.pdf'

        // 获取文件流
        axios.get(filePath, {
          responseType: 'blob'
        }).then((res) => {
          const blob = new Blob([res.data], { type: 'application/octet-stream' })

          // 保存文件
          saveAs(blob, 'example.pdf')
        })
      }
    }
  }
</script>

2.2 实现下载文件

当用户点击“下载文件”按钮时，会触发downloadFile方法，该方法会通过axios来获取文件流，并将其转为Blob对象，最后调用saveAs方法实现文件的下载。

以上就是完整的Vue组件实现点击按钮下载文件功能的攻略。下面给出另一个示例来更好地理解这个功能是如何实现的。

3. 另一个示例

假设现在有一个节点列表，列表中的每个节点都有一个附件，用户可以点击下载按钮来下载这个附件。实现方法如下：

3.1 节点列表

首先，需要在页面中显示节点列表，可以使用v-for指令来循环渲染列表，给每个节点添加下载按钮。以下是示例代码：

<template>
  <div>
    <ul>
      <li v-for="(node, index) in nodeList" :key="index">
        {{ node.name }}
        <button @click="downloadFile(node.attachment)">下载附件</button>
      </li>
    </ul>
  </div>
</template>

<script>
  // 引入file-saver库及Blob对象
  import { saveAs } from 'file-saver'

  export default {
    data() {
      return {
        nodeList: [
          { id: 1, name: '节点1', attachment: '/public/files/attachment1.pdf' },
          { id: 2, name: '节点2', attachment: '/public/files/attachment2.pdf' },
          { id: 3, name: '节点3', attachment: '/public/files/attachment3.pdf' },
        ]
      }
    },
    methods: {
      downloadFile(filePath) {
        // 获取文件流
        axios.get(filePath, {
          responseType: 'blob'
        }).then((res) => {
          const blob = new Blob([res.data], { type: 'application/octet-stream' })

          // 保存文件
          saveAs(blob, filePath.split('/').pop())
        })
      }
    }
  }
</script>