vue-pdf的使用方法及解决在线打印预览乱码

Z时代
2024-01-10
分类：综合

vue

最近在用vue做项目的时候，页面中需要展示后端返回的PDF文件，于是便用到了vue-pdf，其使用方法为：

npm install --save vue-pdf

官网地址：https://www.npmjs.com/package/vue-pdf

不多说了，直接上代码：

<template>
  <div>
    <div class="parent">
      <button @click="$refs.pdf.print()">打印</button>
      <pdf ref="pdf" :src="src" :page='currentPage' @progress='getProgress' @page-loaded="currentPage=$event" @loaded="loadPdfHandler"></pdf>
    </div>
    <el-pagination background layout="prev, pager, next" :page-size="1" :total="numPages" @current-change="changePage">
    </el-pagination>
  </div>
</template>
<script>
  import pdf from 'vue-pdf'
  const src = pdf.createLoadingTask('./static/bm.pdf');
  export default {
    data() {
      return {
        src,
        numPages: 100,
        currentPage: 1
      }
    },
    methods: {
      changePage(page) {
        this.currentPage = page;
      },
      getProgress(e) {
        console.log('加载进度：',e);
      },
      loadPdfHandler(){
        console.log('PDF加载完成啦');
      }
    },
    mounted() {
      this.src.then(pdf => {
        this.numPages = pdf.numPages;
      });
    },
    components: {
      pdf
    },
  }
</script>
<style scoped>
  .parent {
    width: 1000px;
    margin: 0 auto;
  }
</style>