用法很简单 参考文档(https://www.npmjs.com/package/vue-pdf)
打印时会出现乱码,解决办法参考链接(https://www.cnblogs.com/xiaoyaoxingchen/p/10894035.html)
<template>
<div>
<!-- vue-pdf只兼容vue2,且路径如果不是网络路径,本地路径得文件需要放在public文件夹下且需要用绝对路径 -->
<div class="content">
<!-- /默认从public文件下查找 -->
<pdf src='http://119.23.142.49:3031/三分钟学前端网络篇.pdf' ref="pdf" @num-pages="total=$event" :page="currentPage"></pdf>
</div>
<el-pagination
background
:page-size="1"
:current-page="currentPage"
@current-change="currentPage=$event"
layout="prev, pager, next"
:total="total">
</el-pagination>
<button @click="printPdf">打印</button>
<router-view/>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
components: {pdf },
data(){
return {
total:0,
currentPage:1,
}
},
methods:{
printPdf(){
this.$refs.pdf.print(100,[1,2,3])
}
}
}
</script>
<style>
.content{
width: 700px;
height: 1000px;
}
</style>