VUE中使用vue-pdf

在Vue中使用vue-pdf组件可以在页面上展示PDF文件。首先，需要在页面中引入vue-pdf组件并安装它。可以通过以下方式引入和安装vue-pdf组件：

import pdf from "vue-pdf";

components: {
  pdf
}

npm install --save vue-pdf

然后，在模板中使用vue-pdf组件来展示PDF文件。以下是一个示例代码：

<template>
  <div class="container">
    <button @click="openpdf">打开pdf</button>
    <pdf @closepdf="closepdf" v-model="isshowpdf" :pdfurl="src" @pdferr="pdferr" :maxscale='4' :minscale='0.6' :scale='1.0'></pdf>
  </div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  components: {
    pdf
  },
  data () {
    return {
      src: '/static/test1.pdf',
      isshowpdf: false
    }
  },
  methods: {
    closepdf () {
      this.isshowpdf = false
    },
    pdferr (errurl) {
      console.log(errurl)
    },
    openpdf () {
      this.isshowpdf = true
    }
  }
}
</script>

<style scoped>
.container {
  font-family: PingFang SC;
  width: 100%;
}
</style>

在这个示例中，通过点击按钮可以打开PDF文件，并在页面上展示。同时，还可以设置PDF文件的最大缩放比例、最小缩放比例和默认缩放比例。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue使用vue-pdf](https://blog.csdn.net/hzqzzz/article/details/125294482)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [【Vue】vue中使用pdf，看这篇就够了~](https://blog.csdn.net/weixin_42678675/article/details/109736497)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]