PDF文件在线预览的功能相信大家都是有遇到过的,这边有两种实现方法,大家可以借鉴参考下
第一种,使用vue-pdf
安装 npm install --save vue-pdf
页面代码
<template>
<div>
<pdf
ref="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/