vue中如何实现pdf文件预览?
今天产品提出一个优化的需求,就是之前我们做的图片展示就是一个img标签搞定,由于我们做的是海外后台管理系统,那边的人上传的文件时pdf格式,vue本事是不支持这种格式文件展示的,于是就google搜索,发现有iframe、embed、vueshowpdf(测试了不咋好用)、pdf等,本文说一下pdf插件的使用过程。
- 说明:iframe标签这种,对于有的链接是可以的,比如这种链接在服务器端没有设置享有头content-disposition,就可以直接显示,如下:
想复制代码如下:
<iframe src="http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf" width="100%" height="100%">This browser does not support PDFs. Please download the PDF to view it: <a href="/test.pdf">Download PDF</a>
</iframe>
显示效果如下:
如果pdf有很多页,也不用考虑分页功能,自动可以向下滑动就翻页,看着挺好,但是,且往下继续看----->
我们把上边的链接换成'https://ecs7.tokopedia.net/instant-loan/file/29a2218e-bef9-44cb-b92b-8e81bc4d5228_DOC-20171013-WA0035.pdf',发现什么了?快看截图。。。同样是pdf链接,怎么这个就不行?
什么情况,下载框,必须下载才能看到,那多影响体验,下到本地还占我磁盘,不行不行,把上边那个连接放到浏览器,回车看一下响应头部:
就是它,让我们必须弹出下载框,由于这些文件是在远程服务器上存贮着,想着让后端看能不能检测到这个响应头,他们也懒得处理,后来只能自己处理了,鉴于这种情况,网上也是有很多解决办法的,本人试验过可以的。中间也是借用了一篇文章 ,根据自己需求,做了简单的处理。
https://www.2cto.com/kf/201803/728492.html
过程如下:
- 执行npm install pdf-dist --save
- 在comments目录下创建两个文件:pdf.vue 和 index.js
<!-- pdf.vue --><template> <div id="container" :class="{'back': isShow}"> <canvas id="the-canvas"></canvas> <!-- //添加关闭pdf功能 --> <span :class="{'close':isShow}" @click="closePdf">close</span> <p class="foot" v-if="pdfDoc"> <Button class="left" @click="onPrevPage" v-if="pageNum>1">上一页</Button> <Button class="right" @click="onNextPage" v-if="pageNum<pdfDoc.numPages">下一页</Button> </p> </div> </template><script>import PDFJS from 'pdfjs-dist' export default { data () { return { isShow: false,//通过该属性动态添加类,让pdf显示或隐藏 pdfDoc: null,//可以打印发现是一个对象,里面有页数信息等 pageNum: 1, pageRendering: false, pageNumPending: null, scale: 0.9 } }, methods: { closePdf(){ this.isShow = false }, showPDF (url) { this.isShow = true let _this = this PDFJS.getDocument(url).then(function (pdf) { _this.pdfDoc = pdf _this.renderPage(1) }) }, renderPage (num) { this.pageRendering = true let _this = this this.pdfDoc.getPage(num).then(function (page) { var viewport = page.getViewport(_this.scale) let canvas = document.getElementById('the-canvas') canvas.height = viewport.height canvas.width = viewport.width // Render PDF page into canvas context var renderContext = { canvasContext: canvas.getContext('2d'), viewport: viewport } var renderTask = page.render(renderContext) // Wait for rendering to finish renderTask.promise.then(function () { _this.pageRendering = false if (_this.pageNumPending !== null) { // New page rendering is pending this.renderPage(_this.pageNumPending) _this.pageNumPending = null } }) }) }, queueRenderPage (num) { if (this.pageRendering) { this.pageNumPending = num } else { this.renderPage(num) } }, onPrevPage () { if (this.pageNum <= 1) { return } this.pageNum-- this.queueRenderPage(this.pageNum) }, onNextPage () { if (this.pageNum >= this.pdfDoc.numPages) { return } this.pageNum++ this.queueRenderPage(this.pageNum) } }}</script><style scoped="" type="text/css">.back { background-color: rgba(0, 0, 0, 0.788); position:fixed; width: 100%; height: 100%; top: 0; left: 0; text-align: center; padding: 20px; z-index: 100; overflow: scroll;}.close{ position: absolute; right: 20px; top: 20px; z-index: 200; color: #fff; cursor: pointer;} .foot { position: absolute; bottom: 50px; left: 50%; transform: translate(-50%,0);}</style>
// index.jsimport PDF from './pdf' var $vmexport default { install (Vue, options) { if (!$vm) { const PDFPlugin = Vue.extend(PDF) $vm = new PDFPlugin().$mount() document.body.appendChild($vm.$el) } Vue.prototype.$showPDF = function (url) { $vm.showPDF(url) } }}
3. 在main.js中引入
import pdf from './components/pdf'
Vue.use(pdf)
这样就可以全局使用了,使用的时候就直接使用,本文是在一个图片展示 的地方加上一个点击事件,点击时触发该函数即可;
function showPdf(){let url = 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf' // let url = 'https://ecs7.tokopedia.net/instant-loan/file/29a2218e-bef9-44cb-b92b-8e81bc4d5228_DOC-20171013-WA0035.pdf' this.$showPDF(url)}
文中添加了关闭功能,点击close即可关闭pdf的展示, 同时组件中也有分页功能,如果页数大于1就会显示下一页按钮;
以上既是本人实现的过程,至于跨域问题,我这边还没遇到,现在是本地访问可以的,等到线上再看看行不行,如果不行后边再追加方法实现。
告诉亲爱的自己,每天积累一点点,让自己不断的成长吧!!!!
vue中如何实现pdf文件预览?相关推荐
- Vue PDF文件预览打印vue-pdf
Vue PDF文件预览vue-pdf 最近做项目,遇到预览PDF这个功能,在网上找了找,大多推荐的是pdf.js,不过在Vue中还是想偷懒直接npm组件,最后找到了一个还不错的Vue-pdf 组件,G ...
- pdf文件预览、打印
前端 pdf 文件预览的方式有多种. html元素:<iframe>.<embed> <iframe :src="pdfUrl " style=&qu ...
- java pdf文件下载_Java后台返回PDF文件预览下载
Java后台返回PDF文件预览下载 开始的代码的系统代码为: ResponseEntity onePdf = s3Wrapper.download(contractEntity.getContract ...
- 用vue-pdf包实现pdf文件预览,支持分页
vue项目实现pdf文件预览功能 下载vue-pdf包 npm install --save vue-pdf template模板内容: //pdf组件 <pdf :src="pdfF ...
- 手机端pdf文件预览pdf.js使用方法详解
虽然H5页面可以通过A直接访问html 但可惜的是 手机端H5页面这样做就直接变下载了 那么想要实现手机端的pdf文件预览就需要用到pdf.js了 首先 我们访问地址 http://mozilla.g ...
- mpvue PDF文件预览
小程序中PDF文件预览问题 在小程序中可以ios端可以使用 <web-view :src="url"></web-view> 但是在Android端pdf ...
- vue 使用 vue-pdf 实现pdf在线预览
vue 使用 vue-pdf 实现pdf在线预览 1.安装 npm install --save vue-pdf 2.引用 import pdf from 'vue-pdf' export defau ...
- Java使用openOffice转PDF以及PDF文件预览乱码问题
Java使用openOffice转PDF以及PDF文件预览乱码问题 使用openOffice,支持doc, docx, .xls, .xlsx, .ppt, .pptx转pdf 一:依赖 <de ...
- vue 项目中分别使用 vue-pdf 插件和内嵌 iframe 实现 PDF 文件预览,缩放,旋转,下载,保存等功能 ?
需求:在 vue 和 element-ui 项目中,有点击按钮预览,下载,打印 PDF 文件 需求,要求支持 PDF 的预览,上下页切换,首尾页切换,页码选择跳转,放大缩小,顺时针逆时针旋转,下载, ...
- java代码编辑器 pdf文件预览 主流SSM 代码生成器 shrio redis websocket即时通讯
获取[下载地址] QQ: 313596790 官网 http://www.fhadmin.org/ A 代码编辑器,在线模版编辑,仿开发工具编辑器,pdf在线预览,文件转换编码 B 集成代码生成器 [ ...
最新文章
- 下一步,该怎么做空中国概念股?
- Mac上运行第一个Hadoop实例
- XP MSTSC连接WIN7或WIN8问题
- [python] list元素按关键字相加减
- Pro*c源程序中使用宿主结构保存查询结果
- ligerui_ligerTree_005_动态增加“树”节点
- java实现c语言的函数_C语言tolower函数介绍、示例和实现
- mysql5.1 系列 关于用户授权的一个bug
- 推荐系列:2008年第05期 总7期
- vue 动画 抖动效果_css开发常用动画
- 虾米关停之际,抖音快手借道音乐暗战TME
- 云呐智能运维工具,智能运维工具怎么用
- win7录屏_原来电脑自带的录屏功能,那么好用,可惜很多人还不知道,真遗憾...
- 云计算中网络基础知识(升级版)
- 冰镇西瓜文案:冰镇西瓜水果文案大全集,水果类冰镇西瓜推销文案
- 关于VC++6.0显示“不能启动工具,操作成功完成”问题
- c语言实验作业在dev蜗居的思路,C语言程序设计实验(共5篇)
- 2021-2027全球与中国私人游艇市场现状及未来发展趋势
- linux resin 内存溢出,Resin服务器内存修改
- 微信小程序(游戏)----拼图游戏(设计思路)
热门文章
- NAT with same subnetwork
- 瀏覽器擴展──釋放你的個性
- mysql注入啥意思_【菜鸟学注入】之MySQL报错注入详解
- C#、net core、net5自定义实体注解
- C# Json、datatable、model互相转换
- Matlab2012b license失效解决办法
- 校验php语法是否正确,PHP正则校验email语法详解
- Exception in thread “main“ java.awt.AWTError: Assistive Technology not found: org.GNOME.Accessibilit
- 来面试,偷懒不答题,直接忽略
- AI永远不可能产生意识