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

Vue+TS实现：后端PDF流预览在Element UI中

最新推荐文章于 2024-04-23 15:05:40 发布

原创

最新推荐文章于 2024-04-23 15:05:40 发布 · 1.6k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue #jquery

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

1.配置接口

//获取pdf文件流
export const getPdfService = (paramsData: any) => {
   
   
    const res: any = service.post('/idsapi/api/dispatch/dispatch_file_stream',paramsData

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Hello_Wade

关注关注

3
点赞
踩
7

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue以文件流方式使用pdj.js实现预览pdf文件

weixin_43478591的博客

04-05

5880

最近参与了个项目，前端框架采用的是vue.js，需求是在项目中做一个pdf在线预览打印等功能，在网上找了很多例子基本上全都是靠pdf.js实现的，很多例子说的都不清楚，对于我这个vue小白来说话,和天书差不多…几经周折后，终于实现了这个功能，下面分享给大家。点击下载，这里下载稳定版就可以了。下载好解压出来大概是这个样子一切就绪，放到tomcat里启动测试下（注意不要放错位置哈） o...

后端返回二进制流，前端处理二进制文件流，实现预览图片以及PDF

都已经是第二年的立春、又何必执着于、当年的盛夏呢？

02-22

6379

转成的本地预览地址赋值给Img的src即可展示图片。方法打开转成本地预览地址即可预览PDF,如下图。转成本地预览地址，在通过。定义接口：并设置相应类型。1、首先预览PDF需要。，不能预览，会直接下载。

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

1 条评论

绿绿今天学习了吗 2022.08.24
这个支持pdf 把这个参数new Blob([responseData], { type: "application/pdf" })直接替换成responseData可以支持下载DOC文档，需要其他格式可以自己增加判断文件格式传不同的type即可

【SpringBoot+Vue】全网最简单但实用的前后端分离项目实战笔记 - 前端

热门推荐

大菜的博客

02-09

4万+

【SpringBoot+Vue】全网最简单但实用的前后端分离项目实战笔记

vue3+Ts 开发H5项目在线浏览pdf/word/pptx/xlsx文件方法分享

一个超爱喝可乐的web前端攻城狮

07-20

1815

pdf需要pdfh5这个插件才可以在线浏览,所以我们先下载插件;

vue中服务端返回的流文件预览成pdf

m0_55881852的博客

06-20

533

vue中服务端返回的流文件预览成pdf

vueCli3.0文件上传后，后端返回流,前端转换成pdf预览的3种方式

IT博客技术分享

04-21

4256

第一种是用： <iframe> 嵌套显示先上效果图：注：这种还带样式的是我后面修改源码的 js添加的： customToolbar.js //创建一个新样式 let sheet = (function() { let style = document.createElement("style"); style.appendChild(document.createTextNode("")); document.head.appendChild(st...

10-23

前端：Vue + TypeScript + ElementUI，后端 Spring + Spark 毕设项目：商品大数据实时推荐系统。前端：Vue + TypeScript + ElementUI，后端 Spring + Spark 毕设项目：商品大数据实时推荐系统。前端：Vue + ...

07-11

前端：Vue + TypeScript + ElementUI，后端 Spring + Spark **前端**使用 Vue + TypeScript + ElementUI 构建，build 的时候自动部署到后端业务工程的 webapps/static 目录下，随 Tomcat 一同启动 **后端**又分为...

06-29

这是一个基于Java技术栈构建的实时数据推荐系统，前端采用了现代化的Web开发框架Vue.js，并结合了TypeScript以增强代码的类型安全性和可维护性，同时使用了ElementUI作为UI组件库，提供美观且易于使用的界面。后端则...

Vue项目中使用pdf.js预览pdf文件流

alviter的博客

10-12

3149

Vue项目中使用canvas和pdf.js预览pdf文件流 网上目前的解决方案大多是在将pdf.js放在static文件内，这样j6angjin的后果就是打包文件变得非常大（我的项目由800k变大到将近5m)，后来发现了pdf.js的node包pdf_dist这个给我们提供了一个新的方向，使用npm安装避免了打包文件过大的问题。代码实现 <template> <div&gt...

vue主流前后端分离式操作.pdf

05-04

vue + element+axios前后端分离操作从零开始直达使用详细的安装步骤，本实例使用环境为HBuilder X，命令安装为npm。

vue elementui下载文件和使用vue-pdf展示pdf文件

weixin_42772271的博客

06-09

2120

1、下载blob文件 //在请求中必须标明：responseType: 'blob'。比如this.$axois({ method: 'get', url: '', responseType: 'blob' }).then(response => { let data = response.data; //如果下载下来的是i二进制流，也可以通过new Blob[data]去转换成bolb对象再进行操作 //下载错误时 if(response.status !== 20

vue-pdf实现PDF文件流展示

恍若c的博客

08-25

3326

需求说明：后台返回PDF文件流，前端使用vue-pdf插件进行展示最开始搜索出的插件都是pdf.js，但由于该vue项目不是特别完整的结构，没有public/assets文件夹,一直报找不到那个文件，最后只好放弃换一个方式。最终采用了vue-pdf插件，可以直接安装，方便快捷下载vue-pdf npm install vue-pdf -D 页面使用 <pdf v-for="i in numPages" :key="i" :src="src" :page="i" ref="myPdfComp.

vue预览PDF文件流

weixin_46102873的博客

03-25

641

【代码】vue预览PDF文件流。

Vue中使用echarts实现仪表盘

是日前端

10-26

4249

实现效果： echarts使用说明请查看：Vue中使用echarts实现常用图表总结 option配置： option = { tooltip: { formatter: '{a} <br/>{b} : {c}%' }, toolbox: { feature: { restore: {}, saveAsImage: {} } }, series: [

vue pdf文件流 预览

WangYan的博客

08-08

1408

PS：项目是Vue3+TS的，vue-pdf没找到ts版本的，所以换了个新的依赖。需要先将文件流处理成pdf url的格式。

【Vue+Elementui】后端返回文件流，前端接收文件流并下载文件

qq_58559853的博客

07-03

1953

前端接收文件流，并下载为xlsx文档

vue3+ts+pdfjs-dist查看pdf