前言
最近遇到一个需求，需要在线预览和下载pdf文件，由于不同浏览器，直接打开pdf链接的方式，会有不同的结果，像谷歌和火狐浏览器，直接打开链接的话是预览，其他浏览器是直接下载。使用iframe方式的话，虽然能够直接预览，但是不支持分页。于是在网上找了个vue-pdf的插件。
安装
npm install vue-pdf --save
使用
- 方法一：分页预览
<template>
<pdf
:page="pageNum"
:src="pdfUrl"
@progress="loadedRatio = $event"
@num-pages="pageTotalNum = $event"
></pdf>
<div class="pagination_box">
<el-pagination
background
@current-change="handlePdfChange"
:current-page="pageNum"
:page-size="1"
layout="prev, pager, next"
:total="pageTotalNum"
>
</el-pagination>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
data() {
return {
pdfUrl: '测试.pdf',
pageTotalNum: 1,
pageNum: 1,
loadedRatio: 0
}
},
components: {
pdf
},
methods: {
handlePdfChange(val) {
this.pageNum = Number(val)
}
}
}
</script>
- 方法二：全部展示
<template>
<pdf
:src="pdfUrl"
v-for="(item, index) in pageTotalNum"
:key="index"
:page="item"
></pdf>
</template>
<script>
import pdf from 'vue-pdf'
export default {
data() {
return {
pdfUrl: '测试.pdf',
pageTotalNum: 10
}
},
components: {
pdf
},
mounted() {
this.getAllPage()
},
methods: {
getAllPage() {
let task = pdf.createLoadingTask(this.pdfUrl)
task.promise.then(res=>{
this.pageTotalNum = res.numPages
})
.catch(err => console.log(err) )
}
}
}
</script>
下载pdf文件
<template>
<button @click="download">下载pdf</button>
</template>
<script>
export default {
methods: {
download() {
const link = document.createElement('a')
link.setAttribute('download', '下载后的文件名')
link.setAttribute('href', 'pdf文件地址')
link.style.display = "none"
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}
}
}
</script>
