接口返回一个.txt,.pdf,.jpg文件，前端实现下载

努力站桩的奶酪呦

于 2023-05-25 16:20:53 发布

阅读量282

点赞数

文章标签： pdf 前端

本文链接：https://blog.youkuaiyun.com/liuli0927/article/details/130869935

版权

该代码片段展示了在Vue.js中如何创建一个文件下载功能。通过`el-form-item`组件展示文件名，并提供一个链接触发下载。当用户点击链接时，使用fetchAPI获取文件内容，转换为blob对象，然后创建一个链接元素进行下载操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-col :sm="12">
          <el-form-item label="附件:" prop="file">
            {{ form.file ? "" : "-" }}
            <!-- {{form.file | filterName}} -->
            <el-link
              :underline="false"
              v-if="form.file"
              @click="downloadFile(form.fileName, form.file)"
              type="primary"
              > {{ form.fileName ? form.fileName: "点击下载" }}</el-link
            >
          </el-form-item>
        </el-col>


script:
async downloadFile(fileName, url) {
      if (!url) {
        return;
      }
      let response = await fetch(url); 
        let blob = await response.blob();  
        let objectUrl = window.URL.createObjectURL(blob);
        let a = document.createElement('a');
        a.href = objectUrl;
        a.download = fileName;
        a.click()
        a.remove(); 

    },