76 lines
2.0 KiB
Vue
76 lines
2.0 KiB
Vue
<template>
|
|
<div>
|
|
<div v-if="pdf" id="pdf-container"></div>
|
|
<div v-else v-html="content" class="content"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
module.exports = {
|
|
name: "PdfIndex",
|
|
props: {
|
|
content: {
|
|
type: String,
|
|
default: '',
|
|
required: true
|
|
},
|
|
height: {
|
|
type: Number,
|
|
default: 300,
|
|
required: false
|
|
},
|
|
},
|
|
watch: {
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
pdf: true,
|
|
pdfObj: null,
|
|
}
|
|
},
|
|
methods: {
|
|
init() {
|
|
try {
|
|
const parser = new DOMParser();
|
|
const doc = parser.parseFromString(this.content, 'text/html');
|
|
const link = doc.querySelector('a');
|
|
const href = link.getAttribute('href');
|
|
this.$nextTick(() => {
|
|
this.pdfObj = new Pdfh5('#pdf-container', {
|
|
pdfurl: href,
|
|
});
|
|
this.pdfObj.on("complete", function () {
|
|
const elements = document.querySelectorAll('[class*="canvasImg"]')
|
|
let classArray = []
|
|
elements.forEach(element => {
|
|
classArray.push(element.getAttribute('src'))
|
|
})
|
|
elements.forEach((element,index) => {
|
|
element.addEventListener('click', function() {
|
|
vant.ImagePreview({
|
|
images: classArray,
|
|
startPosition: index,
|
|
closeable: true,
|
|
})
|
|
})
|
|
})
|
|
})
|
|
})
|
|
}catch (e) {
|
|
this.pdf = false
|
|
}
|
|
},
|
|
},
|
|
created() {
|
|
this.init()
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.content {
|
|
padding: 10px;
|
|
}
|
|
</style>
|