vue3 下载本地文件

在Vue3中，可以通过以下步骤来实现下载本地文件：

1. 使用`<a>`标签的`download`属性进行下载。在模板中，你可以使用以下代码：

<a :href="具体的文件的地址" download>点击下载文件</a>

这会将文件下载到用户的本地设备。

2. 根据后台提供的接口URL下载文件到本地。你可以使用以下代码：

function downflie(item:any){
  let arr=item.attachments}.pdf`
      if ('download' in document.createElement('a')) {
        // 非IE下载
        const elink = document.createElement('a')
        elink.download = fileName
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href)
        document.body.removeChild(elink)
      }
    }
  })
}

以上代码通过使用`axios`库发送GET请求来获取文件的二进制数据，并将其存储为`Blob`对象。然后，创建一个`<a>`标签，设置`download`属性为文件名，设置`href`属性为通过`URL.createObjectURL()`生成的URL，将`<a>`标签添加到DOM中，模拟用户点击该标签来下载文件。

这些方法可以帮助你在Vue3中实现下载本地文件的功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [前端Vue项目中点击a标签实现下载文件到本地的功能](https://blog.csdn.net/AiGarry/article/details/124289858)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [vue3.0+TS 实现点击下载直接下载pdf文件，而不是预览。](https://blog.csdn.net/qq_43923146/article/details/127231415)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]