清哥的小屋

1
npm install --save vue-pdf
2
或者
3
cnpm install --save vue-pdf

1
<!-- 模板代码 --！>
2
<div class="pdfPreview">
3
    <el-dialog
4
      :close-on-click-modal="false"
5
      :visible.sync="dialogVisible"
6
      :fullscreen="true"
7
      :before-close="handleClose"
8
      title="合同预览">
9
      <div class="agreement_picture">
10
        <div class="tools">
11
          <el-button @click="prePage" class="mr10"> 上一页</el-button>
12
          <el-button @click="nextPage" class="mr10"> 下一页</el-button>
13
          <span class="page">{{pageNum}}/{{pageTotalNum}} </span>
14
          <el-button @click="handleClose" class="mr10 fl-r btn-cancel"> 取消</el-button>
15
          <el-button @click="downPDF" class="mr10 dowmBtn"> 下载</el-button>
16
        </div>
17
        <pdf ref="pdf"
18
          :src="src"
19
          :page="pageNum"
20
          @page-loaded="pageLoaded($event)"
21
          @num-pages="pageTotalNum=$event"
22
          @error="pdfError($event)"
23
          @link-clicked="page = $event">
24
        </pdf>
25
      </div>
26
    </el-dialog>
27
</div>

1
import pdf from 'vue-pdf';
2

3
export default {
4
  name: 'PdfPreview',
5
  components: {
6
    pdf
7
  },
8

9
  props: {
10
    dialogVisible: {
11
      type: Boolean,
12
      default: false
13
    }
14
  },
15

16
  data() {
17
    return {
18
      url: "http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf", // pdf 地址（网上的pdf例子地址，此地址就是后端返回的真正需要预览的pdf地址）
19
      src: '', // 预览地址
20
      pageNum: 1, // 当前页码
21
      pageTotalNum: 1, // 总页数
22
    };
23
  },
24

25
  mounted () {
26
    // 有时PDF文件地址会出现跨域的情况,这里最好处理一下
27
    var url = this.url
28
    this.src = pdf.createLoadingTask(url);
29
  },
30

31
  methods: {
32
    // 上一页函数，
33
    prePage() {
34
      var page = this.pageNum
35
      page = page > 1 ? page - 1 : this.pageTotalNum
36
      this.pageNum = page
37
    },
38
    // 下一页函数
39
    nextPage() {
40
      var page = this.pageNum
41
      page = page < this.pageTotalNum ? page + 1 : 1
42
      this.pageNum = page
43
    },
44
    // 页面加载回调函数，其中e为当前页数
45
    pageLoaded(e) {
46
      this.curPageNum = e
47
    },
48
    // 抛出错误的回调函数。
49
    pdfError(error) {
50
      console.error(error)
51
    },
52
    downPDF() { // 下载 pdf
53
        var url = this.url
54
        var tempLink = document.createElement("a");
55
        tempLink.style.display = "none";
56
        tempLink.href = url;
57
        tempLink.setAttribute("download", 'XXX.pdf');
58
        if (typeof tempLink.download === "undefined") {
59
          tempLink.setAttribute("target", "_blank");
60
        }
61
        document.body.appendChild(tempLink);
62
        tempLink.click();
63
        document.body.removeChild(tempLink);
64
        this.handleClose();
65
      },
66
    handleClose() {
67
      this.$emit('update:dialogVisible', false);
68
    }
69
  }
70
};