vue+ts+elementUI:后端返回文件流，前端下载pdf文件到本地

最新推荐文章于 2025-05-19 15:26:42 发布

Hello_Wade

最新推荐文章于 2025-05-19 15:26:42 发布

阅读量1.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js 笔记文章标签： js html vue

本文链接：https://blog.csdn.net/Hello_Wade/article/details/110821541

js 同时被 2 个专栏收录

8 篇文章

订阅专栏

笔记

6 篇文章

订阅专栏

vue+ts+elementUI:后端返回文件流，前端下载pdf文件到本地

1.配置接口

//下载天气信息pdf
export const downWeatherPdfService = (paramsData: any) => {
    const res: any = service.post('/weaapi/api/dispatch/weather_pdf', paramsData,{responseType: 'blob'});
    return res;
}

2.js方法

 async downWeatherInfoPdf() {
        let parms = {
            FILE_INFO: this.weatherTitleInfo
        }
        const self = this;
        const resData = (await downWeatherPdfService(parms)).data;

        if (resData) {
            const blob = new Blob([resData], { type: "application/pdf" })
            const fileName = this.weatherTitleInfo.replace(/-/g,"").replace(" ","_") + ".pdf";
            let url = window.URL.createObjectURL(blob);
            let link = document.createElement('a');
            link.style.display = 'none';
            link.href = url;
            link.setAttribute('download', fileName);
            document.body.appendChild(link);
            link.click();
        } else {
            this.$message.warning('下载失败');
        }
    }

3.html调用方法

<el-button type="info" size="small" class="right-btn" @click="downWeatherInfoPdf()">保存</el-button>