PDF文件打印

PDF文件打印

单页pdf打印

1. 显示弹窗

<el-button type="danger" @click="dialogVisible = true">pdf下载</el-button>

<!-- pdf窗口 -->
<div class="tanchuang">
    <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="30%"
    :before-close="handleClose">
    
    <span>这是一段信息</span>
    
    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
    
    </el-dialog>
</div>

data() {
    return {
      dialogVisible: false,
    }
  },

2. 导入pdf文件组件

//<span>这是一段信息</span>
<vuePdf></vuePdf>


import vuePdf from "@/components/vue-pdf/vue-pdf.vue";
components: {vuePdf}

3. vue-pdf的使用

下载插件

npm install --save vue-pdf@3

引入组件

• public/qian.pdf

<pdf ref="pdf" :src="url"></pdf>

import pdf from 'vue-pdf'

components: {pdf},

data() {
    return {
      url: "/qian.pdf",
    }
  },

4. 单页打印功能

<button @click="print">打印</button>
<pdf ref="pdf" :src="url"></pdf>

methods:{
    // 打印PDF
    print(){
      console.log('打印')
      this.$refs.pdf.print();
    }
  }
}



button {
  padding:4px 10px;
  margin-bottom:10px;
  color: #fff;
  background-color: #112f50;
  border:1px solid #eee;
}

组件配置项

<pdf :src="url" ref="pdf"
@num-pages="pageCount = $event"
@page-loaded="currentPage = $event">
</pdf>
  
  
  
data() {
    return {
      url: "/wang.pdf",
      currentPage: 1, //当前页码
      pageCount: 0,  //总页码
    }
},