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

最新推荐文章于 2025-02-19 11:15:06 发布

原创

最新推荐文章于 2025-02-19 11:15:06 发布 · 1.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#js #html #vue

本文介绍如何使用 Vue、TypeScript 和 ElementUI 实现从后端获取 PDF 文件流，并在前端下载 PDF 文件到本地的功能。主要通过配置 API 接口实现文件流的接收与处理。

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方法

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Hello_Wade

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
3
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue2 - 实现上传本地视频到后端服务器及在线预览播放视频+移除视频+进度条上传，vue上传单个或多个视频文件及大文件，将已选视频上传服务端并可预览视频和删除功能（支持Element、Antd组件）

🏆 前端领域优质创作者

04-26

4663

vue2，VUE使用Element上传视频及预览，上传视频和删除视频功能，实现视频文件上传视频回显，VUE+element上传视频，vue2上传视频并预览、上传多个视频，vue实现上传视频功能+预览，上传显示视频功能，移动端h5网页视频上传并预览效果，vue上传视频预览移除，vue2批量上传视频，vue2上传视频到后端，视频上传与实时预览功能，upload上传组件，视频流上传播放功能，视频播放器，批量上传多个视频，如何选择本地视频上传至网页，vue elementUI视频预览上传组件，vue上传超大视频文件

Vue - 超详细 “纯前端“ 将文件上传到阿里云 OSS 对象存储，最新阿里云 SDK 上传音频、视频、图片、文档、office 等（保姆级详细示例源码教程，每行代码都有注释小白一看就懂）

🏆 前端领域优质创作者

02-27

2288

vue上传阿里云oss，vue项目中上传文件到阿里云oss方法适合小白的教程，vue如何将本地文件上传到阿里云OSS存储，纯前端vue实现阿里云OSS上传图片、视频，vue上传文件到阿里云OSS，vue上传阿里云oss简易详细教程，Vue纯前端直传至阿里OSS对象存储小白教程，vue3，vite，阿里云oss存储，vue3前端直传oss，vue3上传图片/office文档/音视频/zip压缩包到阿里云oss，vue3项目中上传文件到阿里云oss详细教程，vue3如何将本地文件上传到阿里云OSS存储，vue

3 条评论您还未登录，请先登录后发表或查看评论

3 条评论

码媛小白 2022.07.12
作者写的这不错，2篇文章预览和下载都用上了

weixin_45425042 2021.06.02
因为不知道封装responseType

weixin_45425042 2021.06.02
我想看一下你axios怎么封装的

vue+ts+elementUI:后端返回文件流，前端预览pdf文件

Hello_Wade的博客

12-15

1676

vue+ts+elementUI:后端返回文件流，前端预览pdf文件 1.配置接口 //获取pdf文件流 export const getPdfService = (paramsData: any) => { const res: any = service.post('/idsapi/api/dispatch/dispatch_file_stream',paramsData, {responseType: 'blob'}); return res; } 2.ts方法 async

vue element-ui读取pdf文件的方法

12-30

本文实例为大家分享了vue element-ui 读取pdf文件，供大家参考，具体内容如下添加依赖 npm install pdfjs-dist --save pdf.vue <el-dialog v-loading=loading :visible.sync=dialogSeeVisible :title=dialogTitle :close-on-click-modal=closeModel modal width=80% @close=

基于vue.js的饿了么的element-ui的unpkg文件的下载到本地

08-26

现在vue.js使用很广泛，饿了么的element-ui基于vue.js开发的ui框架。官方提供了unpkg的访问地址https://unpkg.com/element-ui@2.4.6/。可以直接在项目中使用cdn引入，具体见官方使用说明：http://element-cn.eleme.io/#/zh-CN/。但是有时候需要下载到本地项目中引入(比如不能上网的时候)，我们可以用到的时候，事先在网上一个一个的下载，很麻烦的。简单写一个java小项目，直接从unpkg上下载到本地磁盘。有需要的可以下载项目，同时把自己下载到本地的结果也传上来。代码亲测ok。

vue2 点击按钮下载pdf文件至本地

weixin_64310738的博客

01-19

1010

【代码】vue2 点击按钮下载pdf文件至本地。

vue下载本地pdf文件

热门推荐

小D科技的博客

09-06

1万+

Vue下载本地pdf文件 html: <button @click="downloadPDf">downloadPDf</button> js: downloadPDf() { axios.post('http://localhost:8080/static/test.pdf', { responseType: 'blob'...

Vue+ElementUI使用vue-pdf实现预览功能

10-15

后端需要提供一个接口，该接口根据传入的参数，例如合同的ID（contractId），来查询PDF文件的相关信息，并将其以二进制流的形式返回给前端，以供前端加载显示。后端的接口实现部分，使用Spring MVC框架，定义了一...

vue强制下载本地pdf文件

qq_37772059的博客

04-26

3732

vue下载本地pdf文件

vue 实现下载文件至本地（pdf，word，zip，xlsx等格式）

weixin_43988116的博客

12-01

1847

背景：在做管理后台类型项目时总会遇到下载文件的需求，实践实现调用此方法传入相应字段即可实现下载文件的需求，此方法下载时暂时没有发现特殊限制。简单记录如有问题或更优解还请不要吝啬的共同沟通学习，此结。

Vue下载本地pdf、word、excel文件

m0_67584973的博客

09-26

8746

Vue下载pdf、word、excel文档

vue 本地pdf或excel等文件下载

浪潮行舟_2136

07-28

2913

目录 1.需求确定 2.具体内容 3.总结 1.需求确定最近在项目中要点击“帮助文档”，下载《系统操作手册》。也就是获取静态资源文件export.pdf，将pdf文档下载至本地。拿到这个需求后，找了些方案，如下方案1：在vue cli中安装一些插件，如jquery，利用jquery下载本地文件；方案2：直接使用原生ajax下载本地文件；方案3：利用axios请求；最后考虑到项目中已经在使用axios，就采用方案3。 2.具体内容在使用过程中发现问题记录如下：项目

Vue 实现通过URL浏览器本地下载 PDF 和图片