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

<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>