Vue—文件下载实例

目录

一、概述

二、实例

---

一、概述

针对个别文件类型，下载接口返回的数据不会立即执行下载操作，而是默认打开，为实现下载功能，需执行一系列额外操作。

1）使用原生JS创建一个隐藏的a标签, 并默认点击

2）将接口返回的数据转换成Blob数据类型, 并通过URL.createObjectURL将其转换成能被a标签识别的URL对象

3）文件下载完成后, 手动清除数据和标签

二、实例

<template>
   <button @click="btn">文件下载</button>
</template>
<script>
import { exportFile } from './fileUtil';

export default {
  methods: {
    handleExport() {
      const params = { 
        // 获取文件数据的查询参数