Vue移动端网页（H5）预览pdf文件（pdfh5和vue-pdf）

Vue移动端网页想要预览PDF文件，可以借助第三方库如PDF.js（原生浏览器支持有限）或者专门针对Vue开发的插件，比如pdfh5和vue-pdf。以下是这两种方法的简介：

**1. PDF.js (原生浏览器支持)**
PDF.js是由Mozilla开发的一个JavaScript库，它允许在浏览器中直接渲染PDF文档。虽然不是专门针对Vue设计，但由于其跨平台兼容性，可以在Vue项目中集成。你需要在HTML中嵌入PDF.js的script标签，并使用`PDFViewer`组件展示PDF。示例代码如下：

<template>
  <div>
    <object id="the-pdf" type="application/pdf" data="path/to/your/file.pdf"></object>
  </div>
</template>

<script>
import { pdfjsLib } from 'pdfjs-dist';
pdfjsLib.getDocument('path/to/your/file.pdf').promise.then((doc) => {
  // 初始化并显示PDF
});
</script>

**2. vue-pdf (封装的插件)**
vue-pdf是一个专门为Vue设计的PDF预览组件，它简化了PDF加载和预览的过程。安装`vue-pdf`后，只需在Vue组件里使用这个组件，提供PDF路径即可：

<template>
  <vue-pdf :src="pdfUrl" @load-success="onLoadSuccess" />
</template>

<script>
import VuePdf from 'vue-pdf';

export default {
  components: {
    VuePdf,
  },
  data() {
    return {
      pdfUrl: 'path/to/your/file.pdf',
      pdfContentLoaded: false,
    };
  },
  methods: {
    onLoadSuccess() {
      this.pdfContentLoaded = true;
    },
  },
};
</script>