chore: local file viewer demo
parent
0a02a00918
commit
64d7a5ada8
40
demo/App.vue
40
demo/App.vue
|
|
@ -6,6 +6,7 @@
|
||||||
<button @click="handleSwitchUrl('test1')">switch url 1</button>
|
<button @click="handleSwitchUrl('test1')">switch url 1</button>
|
||||||
<button @click="handleSwitchUrl('test2')">switch url 2</button>
|
<button @click="handleSwitchUrl('test2')">switch url 2</button>
|
||||||
<button @click="handleSwitchUrl('base64')">switch base64</button>
|
<button @click="handleSwitchUrl('base64')">switch base64</button>
|
||||||
|
<input accept="application/pdf" type="file" @change="handlePickFile" />
|
||||||
</div>
|
</div>
|
||||||
<div style="height: calc(100vh - 30px); width: 80%; margin: 0 auto">
|
<div style="height: calc(100vh - 30px); width: 80%; margin: 0 auto">
|
||||||
<PDFViewer
|
<PDFViewer
|
||||||
|
|
@ -20,6 +21,17 @@
|
||||||
<script>
|
<script>
|
||||||
import PDFViewer from '../src/index.js'
|
import PDFViewer from '../src/index.js'
|
||||||
|
|
||||||
|
function blobToDataURI(file) {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
const reader = new FileReader()
|
||||||
|
|
||||||
|
reader.onload = function (e) {
|
||||||
|
resolve(e.target.result)
|
||||||
|
}
|
||||||
|
reader.readAsDataURL(file)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
const TEST_URL_MAP = {
|
const TEST_URL_MAP = {
|
||||||
test1: 'http://localhost:55703/1.pdf',
|
test1: 'http://localhost:55703/1.pdf',
|
||||||
test2:
|
test2:
|
||||||
|
|
@ -34,6 +46,7 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
pdfSource: TEST_URL_MAP.test2,
|
pdfSource: TEST_URL_MAP.test2,
|
||||||
|
file: null,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -43,6 +56,33 @@ export default {
|
||||||
handleDownload(source) {
|
handleDownload(source) {
|
||||||
alert(`custom download file: ${source}`)
|
alert(`custom download file: ${source}`)
|
||||||
},
|
},
|
||||||
|
handlePickFile(e) {
|
||||||
|
e = e || window.event
|
||||||
|
|
||||||
|
const file = e.target.files[0]
|
||||||
|
|
||||||
|
blobToDataURI(file).then(data => {
|
||||||
|
this.pdfSource = data
|
||||||
|
})
|
||||||
|
|
||||||
|
// const reader = new FileReader()
|
||||||
|
|
||||||
|
// const rs = reader.readAsArrayBuffer(file)
|
||||||
|
|
||||||
|
// let blob = null
|
||||||
|
|
||||||
|
// reader.onload = e => {
|
||||||
|
// if (typeof e.target.result === 'object') {
|
||||||
|
// blob = new Blob([e.target.result])
|
||||||
|
// } else {
|
||||||
|
// blob = e.target.result
|
||||||
|
// }
|
||||||
|
// console.log(blob)
|
||||||
|
// const data = Object.prototype.toString.call(blob)
|
||||||
|
|
||||||
|
// this.pdfSource = `data:application/octet-stream;base64,${blob}`
|
||||||
|
// }
|
||||||
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue