npm install --save vue-pdf
页面中引入vue-pdf
<template>
<van-popup v-model="showBottom" position="bottom">
<van-cell title="预览" is-link @click='previewPDF()' />
<van-cell title="下载" is-link @click='downPDF()' />
</van-popup>
<van-popup v-model="showCont" >
<div class="cont">
<pdf :src="src"></pdf>
</div>
</van-popup>
</template>
<script>
import pdf from 'vue-pdf'
export default {
name: 'exercises',
components: {
pdf
},
data() {
return {
pdf_src:'',//pdf预览地址
url: ''
showBottom:false,//弹出预览或下载选择框
showCont:false,
}
},
methods:{
previewPDF() {
var url = this.url
this.src = pdf.createLoadingTask(url)
this.showCont = true
this.showBottom = false
},
//预览
previewPDF() {
var url = this.url
this.src = pdf.createLoadingTask(url)
this.showCont = true
this.showBottom = false
},
//下载
downPDF() {
var url = this.url
var tempLink = document.createElement("a");
tempLink.style.display = "none";
tempLink.href = url;
tempLink.setAttribute("download", '213123');
if (typeof tempLink.download === "undefined") {
tempLink.setAttribute("target", "_blank");
}
document.body.appendChild(tempLink);
tempLink.click();
document.body.removeChild(tempLink);
this.showBottom = false
},
}
}
</script>