You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
99 lines
3.1 KiB
99 lines
3.1 KiB
<template>
|
|
<div>
|
|
<v-file-input ref="file" id="myfile" accept="pdf" label="Please select a file"></v-file-input>
|
|
<v-btn @click="loadFile">load file</v-btn>
|
|
<canvas id="mypdfview"></canvas>
|
|
<v-btn>Pref</v-btn>
|
|
<span v-if="pdf && !loading">{{pdf.numPages}}</span>
|
|
<v-btn>Next</v-btn>
|
|
<video></video>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import pdfjsLib from 'pdfjs-dist/webpack';
|
|
const toBase64 = file => new Promise((resolve, reject) => {
|
|
const reader = new FileReader();
|
|
reader.readAsDataURL(file);
|
|
reader.onload = () => resolve(reader.result);
|
|
reader.onerror = error => reject(error);
|
|
});
|
|
|
|
export default {
|
|
name: "PdfShare",
|
|
props: {
|
|
janusInit: Object,
|
|
username: String,
|
|
myrivid: Number,
|
|
room: Number
|
|
},
|
|
data: () => ({
|
|
pdf:null,
|
|
pageNumber:0,
|
|
loading:true
|
|
}),
|
|
mounted () {
|
|
pdfjsLib.GlobalWorkerOptions.workerSrc = "/pdf.worker.js"
|
|
},
|
|
methods: {
|
|
renderPage(pageNumber) {
|
|
this.pdf.getPage(pageNumber).then(page => {
|
|
console.log('Page loaded');
|
|
|
|
var scale = 1.5;
|
|
var viewport = page.getViewport({scale: scale});
|
|
|
|
// Prepare canvas using PDF page dimensions
|
|
var canvas = document.getElementById('mypdfview');
|
|
var context = canvas.getContext('2d');
|
|
canvas.height = viewport.height;
|
|
canvas.width = viewport.width;
|
|
|
|
// Render PDF page into canvas context
|
|
var renderContext = {
|
|
canvasContext: context,
|
|
viewport: viewport
|
|
};
|
|
var renderTask = page.render(renderContext);
|
|
renderTask.promise.then(function () {
|
|
console.log('Page rendered');
|
|
});
|
|
});
|
|
},
|
|
async loadFile() {
|
|
|
|
console.log(this.$refs.file.files)
|
|
var file = document.querySelector('#myfile').files[0]
|
|
var pdfdata = await toBase64(file)
|
|
console.log(pdfdata.split('data:application/pdf;base64,')[1])
|
|
|
|
var loadingTask = pdfjsLib.getDocument({data: atob(pdfdata.split('data:application/pdf;base64,')[1])});
|
|
loadingTask.promise.then(pdf => {
|
|
console.log(pdf)
|
|
// var pageNumber = 1;
|
|
this.pdf = pdf
|
|
this.loading = false
|
|
this.renderPage(1)
|
|
this.janusInit.attach(
|
|
{
|
|
plugin: "janus.plugin.videoroom",
|
|
opaqueId: this.opaqueId,
|
|
success: this.janusPluginSuccessScreen,
|
|
consentDialog: this.consentDialog,
|
|
error: this.janusPluginError,
|
|
mediaState: this.mediaState,
|
|
webrtcState: this.webrtcState,
|
|
onmessage: this.janusMessageScreen,
|
|
onlocalstream: this.onlocalstreamScreen
|
|
}
|
|
)
|
|
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|
|
|