vue2中使用vue-pdf

最新推荐文章于 2024-05-22 11:52:07 发布

我是你牛爷爷啊

最新推荐文章于 2024-05-22 11:52:07 发布

阅读量1.7k

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_54000091/article/details/123567612

版权

用法很简单参考文档(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>