移动端pdf预览---vue-pdf
2024-10-20 03:42:41
<template>
<div class="mainBody">
<!-- <div v-if="isLoading" class="loading">loading</div> -->
<div v-if="isLoading" class="mask">
<loading size="24px" vertical>加载中...</loading>
</div>
<div class="main-content">
<div class="downLoad" @click="downLoad">点我下载</div>
v-for="i in numPages"
:key="i"
:src="src" // promise对象
:page="i"
class="pdfItem"
@page-loaded="pageLoaded"
/>
</div>
</div>
</template>
<script>
import pdf from 'vue-pdf/src/vuePdfNoSssNoWorker'
import { mapActions } from 'vuex'
import { Loading } from 'vant'
export default {
name: 'PdfPreview',
components: { pdf, Loading },
data() {
return {
src: null, // promise对象
srcUrl: '', // 原始pdf的路径
numPages: undefined, // pdf的总页数
isLoading: true // 是否加载中
}
},
created() {
// 获取pdf的路径 将pdf的路径赋值给src
this.srcUrl = decodeURIComponent(this.$route.params.pdfUrl)
},
activated() {
this.setTitle()
},
mounted() {
// this.src = pdf.createLoadingTask('http://file.dakawengu.com/file/2018-05-29/20180527-tianfeng.pdf')
this.src = pdf.createLoadingTask(this.srcUrl) // src是一个promise对象
this.src.then(pdf => {
this.numPages = pdf.numPages
})
},
methods: {
...mapActions(['setHeader']),
setTitle() { // 设置标题
this.setHeader({
title: 'pdf预览',
leftOpt: {
preventBack: true
},
leftClick: () => {
this.backHome()
}
})
},
backHome() {
this.$router.go(-1)
},
downLoad() {
window.open(this.srcUrl) // 点击下载的时候，浏览器打开pdf
},
// 核心代码 等pdf页数加载完成的时候，隐藏加载框
pageLoaded(num) {
if (num === this.numPages) {
this.isLoading = false
}
}
}
}
</script> <style lang="scss" scoped>
.mainBody {
min-height: 100vh;
background: #eeeeee;
position: relative;
}
.pdfItem {
background: #ffffff;
// margin: .15rem;
}
// 加载框
.mask {
width: 100vw;
height: 100%;
position: relative;
.van-loading {
position: absolute;
left: 50%;
top:50%;
transform: translate(-50%,-50%);
}
}
.main-content {
margin: 0 .2rem .2rem .2rem;
/deep/ span {
margin-bottom: .2rem;
}
.downLoad {
padding-right: 0.4em;
font-size: .3rem;
font-weight: bold;
line-height: 0.4rem;
text-align: right;
}
} </style>
基本翻译
n. 可移植文档格式（Portable Document Format）
abbr. 概率密度函数（Probability Density Function）
最新文章
- python学习笔记（列表、元组、购物车实例）
- windows下webstorm开发react-native智能提示
- 两个APP之间怎么调用《IT蓝豹》
- Swift3.0基础语法学习<二>
- :not(selector)
- Mysql 升级到 5.6 后插入语句时间字段报错：Incorrect datetime value: '' for column 'createtime'
- 自己调用NTDLL函数
- DataGridView添加另外一个控件。
- c语言结构体中的冒号的用法
- 网页端启动WinForm
- java二进制文件复制
- python成长之路——第六天
- linux学习的哲学层面的思考-架构
- 虚拟机安装Android最详细教程
- 2017 Multi-University Training Contest - Team 1 1011&&HDU 6043 KazaQ's Socks【规律题，数学，水】
- 8.QT-对话框(模态与非模态)
- Go外包 Go语言外包 Golang外包商 浅谈Go的全局变量和生命周期
- virtualbox中设置u盘启动
- <项目需求规格说明书> - 福大易宝
- python棋类游戏编写入门