vue 实现pdf文件在线预览
PDF文件在线预览的功能相信大家都是有遇到过的,这边有两种实现方法,大家可以借鉴参考下
第一种,使用vue-pdf
安装 npm install --save vue-pdf
页面代码
<template><div><pdfref="pdf"v-for="i in numPages" :key="i" :src="url" :page="i"></pdf></div>
</template>
<script>
import pdf from 'vue-pdf'
export default {components:{pdf},data(){return {url:"http://image.cache.timepack.cn/nodejs.pdf",numPages: null, // pdf 总页数}},mounted() {this.getNumPages()},methods: {# 计算pdf页码总数getNumPages() {let loadingTask = pdf.createLoadingTask(this.url)loadingTask.promise.then(pdf => {this.numPages = pdf.numPages}).catch(err => {console.error('pdf 加载失败', err);})},}
</script>
第二种,通过iframe标签
<template><div class="pdfPriview"><iframe:src="pdfUrl"type="application/x-google-chrome-pdf"width="100%"frameborder="0"scrolling="auto"height="100%" /></div>
</template><script>
export default {data() {return {pdfUrl:'',numPages:null}},created(){// '#toolbar=0'把控制台隐藏this.pdfUrl = this.$route.query.pdfUrl+'#toolbar=0'},
}
</script><style lang="scss">.pdfPriview{height: 100%;overflow: hidden;}
</style>
其他通用文件在线预览的话使用这个
url为链接
let href = “https://view.officeapps.live.com/op/view.aspx?src=” +url
window.open(href, ‘_blank’);
以下是微软官方的一些实例:
在Microsoft Build会议上,有很多关于PowerPoint平台的演示。如果要观看其中一个演示文稿的视频,还可以使用Office Web Viewer查看附带的PowerPoint演示文稿。http://view.officeapps.live.com/op/view.aspx?src=http%3a%2f%2fvideo.ch9.ms%2fbuild%2f2011%2fslides%2fTOOL-532T_Sutter.pptx
在一个受欢迎的银行网站上,官方找到了这个很棒的Wedding Budget Planner电子表格。为了预览电子表格而不是下载电子表格,官方创建了一个Office Web Viewer链接。http://view.officeapps.live.com/op/view.aspx?src=http%3A%2F%2Flearn.bankofamerica.com%2Fcontent%2Fexcel%2FWedding_Budget_Planner_Spreadsheet.xlsx
官方在Bing上找到的学校通讯模板。使用Office Web Viewer,您不必担心学校中的每个人都可以查看Word文档-现在他们所需要的只是浏览器。http://view.officeapps.live.com/op/view.aspx?src=newteach.pbworks.com%2Ff%2Fele%2Bnewsletter.docx
如果你想了解更多的话:可以前往官方文档了解https://www.microsoft.com/en-us/microsoft-365/blog/2013/04/10/office-web-viewer-view-office-documents-in-a-browser/
vue 实现pdf文件在线预览相关推荐
- java flexpaper_java web word文件 pdf文件在线预览源码(flexpaper)
[实例简介]java web word文件 pdf文件在线预览源码 经过测试 [实例截图] [核心代码] BrowsenOnline html, body{ height:100%; } body { ...
- vue-pdf实现pdf文件在线预览
1. 前言 PDF文件在线预览的功能相信大家都是有遇到过的, 但在我平时的项目中, 公司提供了相应的插件, 但是在h5等其他项目中, 我们还是只能靠自己呀! 今天就大概说一下 vue-pdf 这个组件 ...
- html5 pdf.js 使用方法,PDF 文件在线预览(pdf.js 使用教程)
因项目开发需要在线展示 PDF文件,为解决 PDF文件 在浏览器打开后电子签章.电子签名等展示不全且部分浏览器兼容问题特利用pdf.js解决该问题: pdf.js框架为HTML5,无需任何本地支持,兼 ...
- pdfjs-dist 实现pdf文件在线预览
pdfjs-dist 实现pdf文件在线预览 实现效果 实现过程 (1)安装pdfjs-dist (2)代码部分 (3)原理 项目要求实现pdf文件在线预览,并且pdf预览通过上下页滚动pdf,且兼容 ...
- 网页中动态嵌入PDF文件/在线预览PDF内容
网页中动态嵌入PDF文件/在线预览PDF内容https://www.cnblogs.com/xgyy/p/6119459.html #网页中动态嵌入PDF文件/在线预览PDF内容# 摘要:在web开发 ...
- 文件被损坏 java_使用PDF.JS实现pdf文件在线预览时,报文件被损坏的错误
首先大概说明一下问题出现的背景:我用PDF.JS实现文件在线预览,参考网上的办法,在jsp文件中使用 ?file=" width="1024" height=" ...
- pdf文件在线预览,兼容多浏览器和手机端
前言 最近学习了一下网页在线预览pdf文件的实现方式,主要有: PDFObject:使用起来非常方便,电脑端兼容性好,试过能兼容ie9,也很快,但在手机上一些浏览器无法在线. jquery.media ...
- java集成pdf.js实现pdf文件在线预览
最近项目需要实现在线预览pdf文件功能,找来找去,发现有个pdf.js的类库挺好用,直接用js实现在线预览. pdf.js是开源项目,github的地址: https://github.com/moz ...
- 实现pdf文件在线预览(需要PDF文件的路径)
工作中需要完成一个PDF在线预览的功能,最简单的方法还是使用pdf的插件. 1.首先下载插件 链接:https://pan.baidu.com/s/1q4zuHrmjJL9QSEn2Iy5O9Q 提取 ...
最新文章
- [恢]hdu 2015
- UITableView 顶部空白总结
- 期末总结:LINUX内核分析与设计期末总结
- 为嵌入式对象(值对象)加校验
- BugkuCTF-MISC题一切有为法如梦幻泡影
- scala集合中添加元素_如何在Scala中将元素添加到列表中?
- WPF 自动选择dll,以SQLite为例
- spring aop中使用@Pointcut注解抽取可重用的切入点表达式
- 34. Element textContent 属性
- pandas创建DataFrame
- mysql进销存表设计_数据库设计:数据库进销存管理系统(包含有仓库出库入库触发器)...
- Android 11.0 12.0关机界面全屏显示(UI全屏显示)
- linux内核ddr初始化,嵌入式Linux裸机开发(五)——SDRAM初始化
- html编写购物网站页面练习(一)
- Pokeman.csv 处理(Python)
- u-boot 详细介绍
- Canvas 文字对齐方式
- Deep Clustering via Joint Convolutional Autoencoder Embedding and RelativeEntropy Minimization论文笔记
- TCP 与UDP的区别
- 链路聚合—3种模式 详细