位置: IT常识 - 正文

接收后端返回的pdf文件流 前端使用Vue-pdf实现预览(分页)(后端接口返回数据类型规范)

编辑:rootadmin
接收后端返回的pdf文件流 前端使用Vue-pdf实现预览(分页) vue系列文章目录

推荐整理分享接收后端返回的pdf文件流 前端使用Vue-pdf实现预览(分页)(后端接口返回数据类型规范),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:后端返回数据格式有哪些,前端接收后端返回值,后端接口返回数据类型规范,后端接收对象,后端返回数据格式有哪些,前端接收后端返回值,后端接口返回数据类型规范,前端接收后端返回值,内容如对您有帮助,希望把文章链接给更多的朋友!

需求:后端返回文件流前端将文件流转为成blob地址预览pdf文件

提示:以下是本篇文章正文内容,下面案例可供参考

一、安装PDF插件依赖

npm install vue-pdf --save

二、封装vuePdf组件为预览页面,通过Management.vue路由传参形式跳转到预览页面1.Management.vue

代码如下(示例):

封装的请求pdfDocument 一定要加上 { responseType: "blob", }

后台返回的pdf文件流 也就是result.data 附代码:

// 预览 async scanSubmit(row) { // 这个代码我不多做解释,接口请求而已 const result = await pdfDocument(this.fileId); // 直接使用createObjectURL可能会出现问题 // 所以我建议使用下面这种方式将文件流转化为本地blod地址 var binaryData = []; binaryData.push(result.data); console.log(binaryData); // 记得一定要设置application的类型 let url = window.URL.createObjectURL( new Blob(binaryData, { type: "application/pdf;charset=utf-8", }) ); if (url != null && url != undefined && url) { // vue路由跳转并以问号形式携带vue-pdf预览时所需要的pdf地址 const { href } = this.$router.resolve({ path: "/vuePdf", query: { //要传的参数 url: url, }, }); // 新页面打开 window.open(href, "_blank"); this.openTheScanningdialog = false; } },2.vuedf.vue接收后端返回的pdf文件流 前端使用Vue-pdf实现预览(分页)(后端接口返回数据类型规范)

HTML部分,无需修改,复制可直接使用

<template> <div id="container"> <!-- 上一页、下一页 --> <div class="right-btn"> <!-- 输入页码 --> <div class="pageNum"> <input v-model.number="currentPage" type="number" class="inputNumber" @input="inputEvent()" /> / {{ pageCount }} </div> <div @click="changePdfPage('first')" class="turn">首页</div> <!-- 在按钮不符合条件时禁用 --> <div @click="changePdfPage('pre')" class="turn-btn" :style="currentPage === 1 ? 'cursor: not-allowed;' : ''" > 上一页 </div> <div @click="changePdfPage('next')" class="turn-btn" :style="currentPage === pageCount ? 'cursor: not-allowed;' : ''" > 下一页 </div> <div @click="changePdfPage('last')" class="turn">尾页</div> </div> <div class="pdfArea"> <!-- // 不要改动这里的方法和属性,下次用到复制就直接可以用 --> <pdf :src="src" ref="pdf" v-show="loadedRatio === 1" :page="currentPage" @num-pages="pageCount = $event" @progress="loadedRatio = $event" @page-loaded="currentPage = $event" @loaded="loadPdfHandler" @link-clicked="currentPage = $event" style="display: inline-block; width: 100%" id="pdfID" ></pdf> </div> <!-- 加载未完成时,展示进度条组件并计算进度 --> <div class="progress" v-if="loadedRatio != 1"> <el-progress type="circle" :width="70" color="#53a7ff" :percentage=" Math.floor(loadedRatio * 100) ? Math.floor(loadedRatio * 100) : 0 " ></el-progress> <br /> <!-- 加载提示语 --> <span>{{ remindShow }}</span> </div> </div></template>

JS部分,无需修改,复制可直接使用

<script>import pdf from "vue-pdf";export default { components: { pdf, }, data() { return { // ----- loading ----- remindText: { loading: "加载文件中,文件较大请耐心等待...", refresh: "若卡住不动,可刷新页面重新加载...", }, remindShow: "加载文件中,文件较大请耐心等待...", intervalID: "", // ----- vuepdf ----- // src静态路径: /static/xxx.pdf // src服务器路径: 'http://.../xxx.pdf' src: "", // 当前页数 currentPage: 0, // 总页数 pageCount: 0, // 加载进度 loadedRatio: 0, }; }, created() { // 页面加载,拿到路由中的url复制给data中的src this.src = this.$route.query.url; console.log(this.src); }, mounted() { // // 更改 loading 文字 this.intervalID = setInterval(() => { this.remindShow === this.remindText.refresh ? (this.remindShow = this.remindText.loading) : (this.remindShow = this.remindText.refresh); }, 4000); }, methods: { // 页面回到顶部 toTop() { document.getElementById("container").scrollTop = 0; }, // 输入页码时校验 inputEvent() { if (this.currentPage > this.pageCount) { // 1. 大于max this.currentPage = this.pageCount; } else if (this.currentPage < 1) { // 2. 小于min this.currentPage = 1; } }, // 切换页数 changePdfPage(val) { if (val === "pre" && this.currentPage > 1) { // 切换后页面回到顶部 this.currentPage--; this.toTop(); } else if (val === "next" && this.currentPage < this.pageCount) { this.currentPage++; this.toTop(); } else if (val === "first") { this.currentPage = 1; this.toTop(); } else if (val === "last" && this.currentPage < this.pageCount) { this.currentPage = this.pageCount; this.toTop(); } }, // pdf加载时 loadPdfHandler(e) { // 加载的时候先加载第一页 this.currentPage = 1; }, }, destroyed() { // 在页面销毁时记得清空 setInterval clearInterval(this.intervalID); },};</script>

CSS部分,可根据自己的需求自行修改

<style scoped>#container { position: absolute !important; left: 0; right: 0; bottom: 0; top: 0; background: #f4f7fd; overflow: auto; font-family: PingFang SC; width: 100%; display: flex; /* justify-content: center; */ position: relative;}/* 右侧功能按钮区 */.right-btn { position: fixed; right: 5%; bottom: 15%; width: 120px; display: flex; flex-wrap: wrap; justify-content: center; z-index: 99;}.pdfArea { width: 900px; margin: 0 auto;}/* ------------------- 输入页码 ------------------- */.pageNum { margin: 10px 0; font-size: 18px;}/*在谷歌下移除input[number]的上下箭头*/input::-webkit-outer-spin-button,input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0;}/*在firefox下移除input[number]的上下箭头*/input[type="number"] { -moz-appearance: textfield;}.inputNumber { border-radius: 8px; border: 1px solid #999999; height: 35px; font-size: 18px; width: 60px; text-align: center;}.inputNumber:focus { border: 1px solid #00aeff; background-color: rgba(18, 163, 230, 0.096); outline: none; transition: 0.2s;}/* ------------------- 切换页码 ------------------- */.turn { background-color: #164fcc; opacity: 0.9; color: #ffffff; height: 70px; width: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 5px 0;}.turn-btn { background-color: #164fcc; opacity: 0.9; color: #ffffff; height: 70px; width: 70px; border-radius: 50%; margin: 5px 0; display: flex; align-items: center; justify-content: center;}.turn-btn:hover,.turn:hover { transition: 0.3s; opacity: 0.5; cursor: pointer;}/* ------------------- 进度条 ------------------- */.progress { position: absolute; right: 50%; top: 50%; text-align: center;}.progress > span { color: #199edb; font-size: 14px;}</style>效果图

**

实现下载/在线打开

**

①安装downloadjs

npm install downloadjs

②在需要的地方引入

import download from 'downloadjs'

③在下载的方法里调用download就可以实现下载了

文件流数据 保存的名字 要下载的文件类型

本文链接地址:https://www.jiuchutong.com/zhishi/283607.html 转载请保留说明!

上一篇:fs20.exe是什么进程 有什么作用 fs20进程查询(电脑fs0是什么)

下一篇:一只躺在沙滩上的港海豹幼崽,德国黑尔戈兰岛 (© Fotofeeling/Westend61/Offset)(一只躺在沙滩上的鸟)

  • 个人是否可以申请精神司法鉴定
  • 资管产品增值税由谁承担
  • 企业销售商品房需要缴纳什么税费
  • 商业折扣影响主要因素有
  • 增值税专用发票可以开电子发票吗
  • 预缴增值税的附加税
  • 进项和销项税额需要结转吗
  • 小规模纳税人超过500万可以不转一般纳税人吗
  • 个人缴纳工会会费比例
  • 利息股息红利所得个人所得税税率
  • 长期挂账应收账款怎么调
  • 非独立核算的分公司怎么做账
  • 收发差错率
  • 少缴纳社保怎么要求支付赔偿金
  • 2020年小规模生活服务业优惠政策
  • 发票增值税是多少个点
  • 开票资料填写
  • 开票的时候如何把价格分散开
  • 广告公司需要交消费税吗
  • 是否只有首次购买税控盘可以全额抵减增值税
  • 销售换货怎么做账务处理
  • 房租发票税点是几个点
  • 公司向个人转账分录
  • 安装设备领用原材料应该用成本还是公允
  • 预收账款科目
  • 报关单上的生产销售单位
  • 暂估入库入库单范本
  • rtx3090 rtx titan
  • 劳务公司的账务怎么做账
  • scsiaccess.exe - scsiaccess是什么进程 有什么用
  • 未能连接到一个windows 的服务win7
  • 埃热泽尔斯湖面上的波纹,拉脱维亚拉特加尔地区 (© Eaglewood Films/Nimia)
  • jsPDF + html2canvas A4分页截断 完美解决方案(含代码 + 案例)
  • vue数据更新会触发什么生命周期
  • 固定资产一次性折旧账务处理
  • u-net优点
  • php计算多个集合的数据
  • 学计算机选择什么专业
  • 微软和梅赛德斯奔驰宣布合作
  • 数据模型 excel
  • php框架基础教程
  • od输出结构
  • 哪些服务可以开具经纪代理服务发票
  • 外商独资企业资本金要求
  • 去年的进项发票可以抵今年的吗
  • 深圳增值税普通发票和专用发票的区别
  • 存货的期末余额是账面余额吗
  • 变卖固定资产的账务处理
  • 开个分公司有啥好处
  • 保险补偿多久到账
  • 贷款用途不符合规定有啥危害
  • 幼儿园的经费支出主要包括哪几个方面
  • 小公司没有财务软件怎么手工记账
  • 虚开发票要如何处理?
  • 税控系统专用设备包括税控收款机吗
  • 个人独资企业缴纳社保享受优惠么
  • 出现事故保险公司负责协商吗
  • 工资计提和发放账务处理
  • 更换账簿需要注意哪些问题
  • 如何把数据生成表格
  • navicat查询结果下面输出栏如何关闭
  • [视频]看科学家如何将纯净水变成金属
  • 电脑蓝屏bios设置教程
  • win7与xp文件共享
  • service.exe是什么
  • windows如何删除本地用户
  • rundll32.exe是病毒吗
  • linux文件latin1转换为utf
  • win8如何升级到win10系统版本
  • javascript运用
  • python sha256加密解密
  • unity地形图片
  • unity 2danimation
  • javascript基础教程教材答案
  • python 备份文件夹
  • 装修时候需要交什么费
  • 个人在税务局一个月能开多少
  • 百旺税控盘口令认证失败pin锁定怎么办
  • 买了发票但是税控机里显示没有发票怎么办?
  • 上海42年工龄退休有没有补充养老金呢
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设