1.下载pdfh5
这里我下载时候没有指定版本报了一些错，所以直接建议大家下载 1.4.3版本，
执行 npm install [email protected] 成功后如下图：
2.预览pdf 的组件（show-pdf），代码如下:
<template>
<view class="pdfBox" @click.capture='close()'>
<view class="close-btn">
关闭预览
</view>
<!-- <view id="previewPdf" @click.stop></view> -->
<div id="previewPdf"></div>
</view>
</template>
<script>
import pdfh5 from 'pdfh5';
import 'pdfh5/css/pdfh5.css'
export default {
props: {
url: {
type: String,
required: true,
},
},
data() {
return {
pdfh5: null,
}
},
mounted(){
console.log("url",this.url);
this.openPdf();
},
methods: {
close(){
this.$emit('close')
},
openPdf() { //url：PDF文件地址
this.pdfh5 = new pdfh5('#previewPdf', {
pdfurl: this.url,
backTop: true
});
this.pdfh5.on('success', () => {
console.log('pdf渲染成功');
});
}
}
}
</script>
<style lang="less" scoped>
.pdfBox {
position:fixed;
top: 0;
left: 0;
height: 100vh;
overflow: hidden;
z-index: 99;
width: 100%;
color: red;
#previewPdf {
height: 100vh;
}
}
.close-btn{
position: fixed;
top:20rpx;
right: 20rpx;
z-index:900;
font-size:35rpx;
padding: 20rpx ;
text-align: center;
border-radius: 25rpx;
// background-color: rgba(0,0,255, 0.6);
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
}
.pdfBox #previewPdf .textLayer .textLayerItem {
font-size: 50px;
}
.pdfjs .backTop{
background-color: none !important;
}
</style>
3.引用pdf 的vue 页面
<showpdf v-if="showPdf" @close='closePdf()' :url="pdfFile"></showpdf>data() {
return {
showPdf: false,
pdfFile: "", //pdf完整路径地址
}
},
methods: {
closePdf() {
this.showPdf = false
},
openFile(file) {
this.pdfFile = this.baseUrl + file
this.showPdf = true
},
....
}
