vue js 多种类型文件下载

在Vue.js中，可以通过设置responseType为'blob'来实现多种类型文件的下载。在项目中，可以使用axios或其他HTTP请求库发送请求并设置responseType为'blob'。以下是一个示例代码：

// 在Vue组件中的方法中进行文件下载
downloadFile() {
  axios({
    url: 'your_download_url',
    method: 'GET',
    responseType: 'blob' // 设置响应类型为blob
  }).then(response => {
    const blob = new Blob(\[response.data\]);
    const link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    link.download = 'your_file_name';
    link.click();
    window.URL.revokeObjectURL(link.href);
  }).catch(error => {
    console.error(error);
  });
}

在上述代码中，通过设置responseType为'blob'，可以获取到文件的二进制数据。然后，创建一个Blob对象，并使用URL.createObjectURL方法生成一个下载链接。最后，创建一个a标签，设置链接和下载属性，模拟点击a标签进行文件下载。

请注意，'your_download_url'是你要下载的文件的URL，'your_file_name'是你要保存的文件名。你可以根据实际情况修改这些值。

希望这个示例能帮到你！
#### 引用[.reference_title]
- *1* [在Vue中如何下载各种文件类型(excel、doc、docx)](https://blog.csdn.net/cjj88195/article/details/123346933)[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^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [vue在线预览各类型文件](https://blog.csdn.net/weixin_63456913/article/details/130823365)[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^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [vue通过文件流下载文件，多种类型文件和指定类型文件](https://blog.csdn.net/m0_46782232/article/details/127566292)[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^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]