根据接口返回不同数据，前端(vue)实现下载功能（实时记录）

最新推荐文章于 2024-07-12 09:36:48 发布

Amily8512

最新推荐文章于 2024-07-12 09:36:48 发布

阅读量203

点赞数 1

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/Amily8512/article/details/138175769

版权

本文介绍了如何在Vue应用中处理后端接口返回的URL地址，实现无浏览器预览的PDF下载功能，通过axios发送GET请求并设置responseType为blob来下载文件。

摘要由CSDN通过智能技术生成

在Vue中需要实现文件下载功能时，我们会根据后端返回的数据类型，来实现不同的下载方式

需求一：后端接口返回URL地址，要求不打开文件，直接实现PDF下载

实现方法：

<template>
 <el-table :data="userList" stripe>
        <el-table-column label="操作" width="210" >
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-download" @click="handleDownload(scope.row)">下载</el-button>
          </template>
        </el-table-column>
      </el-table>
</template>
<script>
export default {
  methods: {
    /** 下载 */
    handleDownload (row) {
      const data = {
        contentId: row.id,
        fileType: 5,
      }
      this.$confirm("是否确认下载这条数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        return getSysFileInfo(data); //这是后端提供的下载接口
      }).then(res => {
        const fileName = res.data.oldFileName
        const url = res.data.filePath;   //返回的url下载地址  https://***.com/law-20240424111703-1713928623467.docx?e=1714011917&token=Ky3hFo-oWCjJvvvqVVeA2xIe2NeNITdw5m5rXgic:hP4lVWLoezPdOG54T76friE6MD8=
        //调下载方法
        this.downloadFile(url, fileName)
      }).catch(() => { });
    },
    /** 根据接口返回的url实现下载 */
    downloadFile (url, fileName) {
      axios({
        url,
        method: 'GET',
        responseType: 'blob', // 重要
      }).then((response) => {
        const blob = new Blob([response.data]);
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = fileName; // 文件名
        link.click();
      }).catch((error) => {
        console.error(error);
      });
    },
  }
};