先上效果
运用到的技术vue-pdf
setasign/fpdf
setasign/fpdi
vue-esign
前端实现
pdf封装
v-for="i in numPages"
:key="i"
:src="src"
:page="i"
style="display: block; width: 100%; border-bottom: 1px solid;"
class="pdf-page"
>
import pdf from "vue-pdf";
export default {
props: ['url'],
components: {
},
data() {
return {
src: "",
numPages: undefined
};
},
watch: {
numPages: function(){
this.$nextTick(() => {
console.log('success')
})
}
},
mounted() {
this.src = pdf.createLoadingTask(this.url);
this.src.promise.then(pdf => {
this.numPages = pdf.numPages;
this.$emit('closeLoadding', false)
});
}
};
使用 + 签名