…
…

1. 使用 vue-pdf 插件

1.0 效果图

1.1 插件安装

yarn add vue-pdf

1.2 代码展示

html:

<template>
  <div>
    <pdf ref="pdf" v-for="i in numPages" :key="i" :page="i" :src="laoclUrl">>pdf>
  div>
template>
<script>
import pdf from "vue-pdf";

export default {
  name: "Home",
  components: { pdf },
  data() {
    return {
      numPages: 1, // pdf文件页数
      laoclUrl: "" // 预览路径
    };
  },
  mounted() {
    this.previewPdf();
  },
  methods: {
    // 简历预览
    previewPdf() {
      // pdf地址
      let fileUrl = "http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf";

      // 计算总页数
      let loadingTask = pdf.createLoadingTask(fileUrl);
      loadingTask.promise
        .then(pdf => {
          this.numPages = pdf.numPages;
        })
        .catch(err => {
          console.error("pdf 加载失败", err);
        });

      this.laoclUrl = fileUrl;
    }
  }
};
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

---

---

2. 使用 PDF .js 插件

2.0 效果图

2.1 插件安装

yarn add pdfjs

2.2 简单封装组件

<template>
  <div>
    <iframe height="100%" width="100%" :src="`${getFilePath}`">iframe>
  div>
template>
<script>
export default {
  name: "PDFJSViewer",
  props: {
    fileName: String,
    path: String
  },
  computed: {
    getFilePath: function() {
      if (this.fileName !== "") {
        return this.path + "?file=" + this.fileName;
      }
      return this.path;
    }
  }
};
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

2.3 使用组件

<template>
  <div class="index_container full">
    <PDFJSViewer :path="`${laoclUrl}`" :fileName="'pdf preview'" />
  div>
template>
<script>
import PDFJSViewer from "/src/components/pdfViewer/pdfViewer";
export default {
  name: "Home",
  components: { PDFJSViewer },
  data() {
    return {
      // 预览路径
      laoclUrl: ""
    };
  },
  mounted() {
    this.previewPdf();
  },
  methods: {
    // 简历预览
    previewPdf() {
      this.laoclUrl = "http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf";
    }
  }
};
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27