chore: local file viewer demo

master
丁锐 2022-03-31 15:15:32 +08:00
parent 0a02a00918
commit 64d7a5ada8
1 changed files with 40 additions and 0 deletions

View File

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