1.下载

下载vue-pdf插件 "vue-pdf": "^4.2.0",

2.构建组件

<template>
  <div class="pdf"><pdf v-for="i in numPages" :key="i" :src="pdfUrl" :page="i"></pdf></div>
</template>
<script>
import pdf from 'vue-pdf';
export default {
  name: 'h5-pdf-view',
  components: {
    pdf
  },
  data() {
    return {
      pdfUrl: '', // pdf文件地址...
      numPages: 1 // 当前页数
    };
  },
  onLoad(option) {
    // console.log('option', option);
    // PDF文件地址（后端需传输流信息）
    let url = decodeURIComponent(option.pdfUrl);
    this.pdfUrl = pdf.createLoadingTask(url);
    // 分页
    this.pdfUrl.promise.then(pdf => {
    this.numPages = pdf.numPages;
    })

  }
};
</script>
<style lang="scss">

</style>

PS：以上是在uniapp中书写的，如果在纯H5、微信小程序中可以书写符合对应格式的vue文件