vue项目中pdf预览插件_vue heml2pdf 对应插件

npm安装:npm install --save vue-pdf
1.多页上拉加载页面

<template>
    <div class="pre_lump">
      <div class="choice_box">
        <div class="form-data">
          <div class="pdf" id="example">
            <pdf
              ref="pdf"
              v-for="i in numPages"
              :key="i"
              :src="pdfUrl"
              :page="i"
              ></pdf>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
  components:{
      pdf
  },
  props:{
	url:{
		type:String,
		default:''
	} 
  },
  data(){
      return {
          pdfUrl:"",
          numPages: null, // pdf 总页数
      }
  },
  mounted() {
	  this.pdfUrl = this.url
      this.getNumPages()
  },
  methods: {

    getNumPages() {
      let loadingTask = pdf.createLoadingTask(this.url)
      loadingTask.promise.then(pdf => {
        this.numPages = pdf.numPages
      }).catch(err => {
        console.error('pdf 加载失败', err);
      })
    }
  }
  }
</script>
<style>
  /* 弹窗的外层样式 */
  .pre_lump {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1111;
  }

  .pre_lump .choice_box {
    position: absolute;
    width: 50%;
    min-width: 850px;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    border-radius: 2px;
  }
  #example {
    width: 100%;
    height: 100%;
  }
  .top_tips {
    margin: 0 20px;
    height: 54px;
    line-height: 54px;
    border-bottom: 1px solid rgb(233, 233, 233);
  }

  .top_tips .tips {
    font-size: 18px;
    font-weight: 500;
    color: #333333;
  }

  .top_tips i {
    font-size: 18px;
    color: #333333;
  }
  .bot_bottom_bot {
    position: absolute;
    right: 2%;
    bottom: 3%;
    border-top: 1px solid rgb(233, 233, 233);
  }
  .form-data {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    height: calc(100% - 60px);
    margin: 15px auto;
    overflow-y: auto;
  }
  .pagination {
    position: absolute;
    left: 50%;
    bottom: 0%;
    transform: translate(-50%, 0%);
    background-color: #ccc;
    text-align: center;
    padding: 0 10px;
    user-select: none;
    height: 30px;
    line-height: 30px;

  }

  .pagination .arrow2 span {
    cursor: pointer;
    display: inline-block;
    background-color: #e53935;
    color: #fff;
    padding: 4px 6px;
    font-size: 12px;
    border-radius: 6px;

  }

  .close {
    width: 34px;
    height: 34px;
    margin: 10px 0;
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
  }

  .close .el-icon-close {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155

预览效果:

2.单页面点击上一页下一页加载页面

<template>
  <div class="pre_lump">
    <div class="choice_box">
      <div class="form-data">
        <div class="pdf" id="example">
          <pdf
            ref="pdf"
            v-if="pdfSrc"
            :src="pdfSrc"
            :page="currentPage"
            @num-pages="pageCount = $event"
            @page-loaded="currentPage = $event"
            @loaded="loadPdfHandler"
          >
          </pdf>
        </div>
      </div>
      <div class="pagination">
        <p class="arrow2" v-if="pdfSrc">
          <el-button
            type="primary"
            size="mini"
            @click="changePdfPage(0)"
            :disabled="currentPage == 1"
            >上一页</el-button
          >
          {{ currentPage }} / {{ pageCount }}
          <el-button
            type="primary"
            size="mini"
            @click="changePdfPage(1)"
            :disabled="currentPage == pageCount"
            >下一页</el-button
          >
        </p>
      </div>
    </div>
  </div>
</template>


<script>
import pdf from "vue-pdf";
export default {
  components: {
    pdf
  },
  data() {
    return {
      pdfSrc: "https://dakaname.oss-cn-hangzhou.aliyuncs.com/file/2018-12-28/1546003282521.pdf",
      currentPage: 0, // pdf文件页码
      pageCount: 0, // pdf文件总页数
      numPages: 1,
      activeIndex: 0,
    };
  },
  methods: {

    // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
    changePdfPage(val) {
      if (val === 0 && this.currentPage > 1) {
        this.currentPage--;
      }
      if (val === 1 && this.currentPage < this.pageCount) {
        this.currentPage++;
      }
    },
    // pdf加载时
    loadPdfHandler(e) {
      this.currentPage = 1; // 加载的时候先加载第一页
    }
  }
};
</script>
<style >
/* 弹窗的外层样式 */
.pre_lump {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1111;
}

.pre_lump .choice_box {
  position: absolute;
  width: 50%;
  min-width: 850px;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  border-radius: 2px;
}
#example {
  width: 100%;
  height: 100%;
}
.top_tips {
  margin: 0 20px;
  height: 54px;
  line-height: 54px;
  border-bottom: 1px solid rgb(233, 233, 233);
}

.top_tips .tips {
  font-size: 18px;
  font-weight: 500;
  color: #333333;
}

.top_tips i {
  font-size: 18px;
  color: #333333;
}
.bot_bottom_bot {
  position: absolute;
  right: 2%;
  bottom: 3%;
  border-top: 1px solid rgb(233, 233, 233);
}
.form-data {
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  height: calc(100% - 60px);
  margin: 15px auto;
  overflow-y: auto;
}
.pagination {
  position: absolute;
  left: 50%;
  bottom: 0%;
  transform: translate(-50%, 0%);
  background-color: #ccc;
  text-align: center;
  padding: 0 10px;
  user-select: none;
  height: 30px;
  line-height: 30px;

}

.pagination .arrow2 span {
  cursor: pointer;
  display: inline-block;
  background-color: #e53935;
  color: #fff;
  padding: 4px 6px;
  font-size: 12px;
  border-radius: 6px;

}

.close {
  width: 34px;
  height: 34px;
  margin: 10px 0;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.close .el-icon-close {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-icon-close:hover {
  color: red;
  background-color: #f0f0f0;
  border-radius: 50%;
}
</style>

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183

预览效果:

3.html页面引入jquery实现pdf文件的在线预览
pdf.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>在线预览PDF文档</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.media.js"></script>
<script type="text/javascript">
    $(function() {
        $('a.media').media({width:800, height:900});

    });
</script>

</head>
<body>
<center>
   <div class="panel-body">
	  <a class="media" href="https://dakaname.oss-cn-hangzhou.aliyuncs.com/file/2018-12-28/1546003237411.pdf"></a>
   </div>  
</center>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

预览效果:

以下线上pdf文件地址提供测试
pdfUrl1:“https://dakaname.oss-cn-hangzhou.aliyuncs.com/file/2018-12-29/1546049718768.pdf”

pdfUr2l:“http://file.gp58.com/file/2018-11-14/111405.pdf”

pdfUrl3:“https://dakaname.oss-cn-hangzhou.aliyuncs.com/file/2018-12-28/1546003237411.pdf”

pdfUrl4:“https://dakaname.oss-cn-hangzhou.aliyuncs.com/file/2018-12-28/1546003282521.pdf”