vue2.0移动端使用vue-pdf插件实现PDF文件流在线预览

如果遇到电子签章不显示问题，滑到最下方

npm install --save vue-pdf@4.2.0
npm install pdfjs-dist@2.5.207

如果后台返回的文件流为图片 — 只需要将 <pdf :src="src/> 改为 <img :src="src/">即可

<template><div><!-- pdf预览 --><div><pdf:page="pageNum":src="src"@progress="loadedRatio = $event"@num-pages="pageTotalNum = $event"/><!--  --><div class="pdf-btn" v-if="pageTotalNum > 1"><van-button round type="info" size="small" @click="prePage">上一页</van-button><span class="pdf-span">{{ pageNum }}</span><span>/</span><span> {{ pageTotalNum }}</span><van-button round type="info" size="small" @click="nextPage">下一页</van-button></div><van-empty v-else description="预览失败" /></div></div>
</template>

在接口API函数中声明 responseType: 'blob'

export function viewPdf(data) {return request.post("接口地址",data,{ token: true, responseType: 'blob' })
}

后台返回的文件流

<script>
import pdf from "vue-pdf";
import { viewPdf } from "@/api/financing";
export default {components: {pdf,},data() {return {src: "",//文件地址pageNum: 1, //当前页pageTotalNum: 1, //默认总页数};},mounted() {this.loadPdf();},methods: {loadPdf() {//viewPdf():封装的api函数，params:接口入参viewPdf(params).then((res) => {//blob参数是一个File对象或者Blob对象//objectURL是生成的对象URL.通过这个URL,可以获取到所指定文件的完整内容this.src = window.URL.createObjectURL(new Blob([res.data]));});},//上一页prePage() {let page = this.pageNum;page = page > 1 ? page - 1 : this.pageTotalNum;this.pageNum = page;},//下一页nextPage() {let page = this.pageNum;page = page < this.pageTotalNum ? page + 1 : 1;this.pageNum = page;},},
};
</script>

在axios拦截器中设置返回数据类型为"blob"时的操作

service.interceptors.response.use(response => {if (response.request.responseType == "blob") {return response;} else {return response.data;}}
)

电子签章不显示解决方案

一、在node_modules/pdfjs-dist/build/pdf.worker.js注释掉下方代码

this.setFlags(_util.AnnotationFlag.HIDDEN);

二、在node_modules/pdfjs-dist/es5/build/pdf.worker.js注释下方代码

_this3.setFlags(_util.AnnotationFlag.HIDDEN);

vue2.0移动端使用vue-pdf插件实现PDF文件流在线预览相关推荐

前端vue实现pdf文件的在线预览
3.前端vue实现pdf文件的在线预览我是通过 <iframe> 标签就可以满足我工作的 pdf预览需求如果<iframe> 无法满足需求 , 可以使用pdf.js这个插件 ...
img pdf 展示_pdf.js实现图片在线预览
项目需求前段时间项目中遇到了一个模块,是关于在线预览word文档(PDF文件)的,所以,找了很多插件,例如,pdf.js,pdfobject.js框架,但是pdfobject.js框架对于IE浏览器 ...
加载js文件，在线预览pdf文档
加载js文件,在线预览pdf文档效果演示环境要求 JS文件下载 Jsp页面导入js文件 jquery.media.js源码效果演示首先,先展示效果图环境要求 Tomcat8.5 [注意]:T ...
使用pdf.js实现pdf文件的在线预览（有码源）
博客更新地址啦-,欢迎访问:https://jerryyuanj.github.io/ 最近做移动项目(H5)时遇到一个需求,就是在线预览pdf文件.其实本来使用window.open()就可以实现了 ...
vue 后台返回的文件流进行预览_vue项目-pdf预览和下载，后台返回文件流形式
背景:正好最近碰到了这种需求,记录下来,方便以后查看. 后端返回的文件流数据如下图所示: 后台返回数据.png 一.pdf的预览一开始的时候百度了很多方法,有建议用pdfJs插件的,有iframe嵌 ...
前端实现pdf文件的在线预览与下载
前言在项目中我们经常会出现各种各样的法律文件.免责说明等文件需要用户阅读,很多文件除了阅读外还要支持用户下载.为了快速开发,一些变动不大的文件,或者是项目中不想开发富文本的时候我们可以选择直接使用p ...
vue 后台返回的文件流进行预览_基于 Vue3+Ts 后台前端管理系统Vue3-Admin
今天再给大家分享一款超不错的Vue中后台管理系统Vue3Admin. vue3-admin 基于VueCli4+Ts+ElementUI构建的后台系统.采用组件化开发模式及Flex布局,支持移动端适配 ...
vue 后台返回的文件流进行预览_vue实现下载文件流完整前后端代码
这篇文章主要为大家详细介绍了vue实现下载文件流完整前后端代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下使用Vue时,我们前端如何处理后端返回的文件流首先后端返 ...
php 存PDF文件及其在线预览功能
正值奥运时期,一觉醒来有种想用PHP打印PDF来记录各国金牌的想法,即使中国队那么不争气我也忍了. 今天使用的类叫FPDF,FPDF这个PHP Class允许你采用纯PHP(更确切地说就是不需要使用P ...

vue2.0移动端使用vue-pdf插件实现PDF文件流在线预览

vue2.0移动端使用vue-pdf插件实现PDF文件流在线预览相关推荐

最新文章

热门文章

vue2.0移动端 使用vue-pdf插件实现PDF文件流在线预览

vue2.0移动端 使用vue-pdf插件实现PDF文件流在线预览相关推荐

最新文章

热门文章

vue2.0移动端使用vue-pdf插件实现PDF文件流在线预览

vue2.0移动端使用vue-pdf插件实现PDF文件流在线预览相关推荐