Vue+Elementui+Axios+TypeScript+downloadjs下载文件

最新推荐文章于 2024-02-29 23:31:36 发布

lihefei_coder

最新推荐文章于 2024-02-29 23:31:36 发布

阅读量745

点赞数

CC 4.0 BY-SA版权

分类专栏： typescript vue 文章标签： vue elementui axios typeScript 下载

本文链接：https://blog.youkuaiyun.com/lihefei_coder/article/details/107246609

vue 同时被 2 个专栏收录

53 篇文章

订阅专栏

typescript

10 篇文章

订阅专栏

本文介绍了一个使用Vue框架实现的下载Excel模版文件的功能。通过axios发送GET请求，并设置响应类型为blob，然后使用download.js库来触发文件下载。代码展示了如何在Vue组件中集成这些功能，以便用户能够直接下载指定的Excel模版。

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

<template>
    <el-button type="primary" size="large" @click="fileDownload">下载模版文件(Excel文件)</el-button>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import axios from 'axios';
import download from 'downloadjs';
@Component({
    name: 'FileDownload'
})
export default class extends Vue {
    
    //下载模版文件
    private fileDownload() {
        axios.get('http://www.lihefei.com/download', {
	        params: {
                id: 123456
            },
            responseType: 'blob' //设置响应数据类型为blob
        }).then(
            (resolve: any) => {
                let blob = resolve.data; //文件数据流
                let fileName = 'template.xls'; //文件名，
                let mimeType = 'application/vnd.ms-excel'; //xls格式文件对应的类型为：application/vnd.ms-excel

                download(blob, fileName, mimeType); //下载文件
            }
        );
    }
</script>