58 lines
11 KiB
Vue
58 lines
11 KiB
Vue
<template>
|
|
<div>
|
|
<button @click="handleSwitchUrl('test1')">switch url 1</button>
|
|
<button @click="handleSwitchUrl('test2')">switch url 2</button>
|
|
<button @click="handleSwitchUrl('base64')">switch base64</button>
|
|
<PDFViewer
|
|
:source="pdfSource"
|
|
style="height: 100vh; width: 100%"
|
|
@download="handleDownload"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import PDFViewer from '../src/index.js'
|
|
|
|
const TEST_URL_MAP = {
|
|
test1: 'https://raw.githubusercontent.com/DingRui12138/vue-pdf-viewer/master/demo/static/pdf/helloworld.pdf',
|
|
test2:
|
|
'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf',
|
|
base64: `data:application/octet-stream;base64,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`,
|
|
}
|
|
|
|
export default {
|
|
components: {
|
|
PDFViewer,
|
|
},
|
|
data() {
|
|
return {
|
|
pdfSource: TEST_URL_MAP.test2,
|
|
}
|
|
},
|
|
methods: {
|
|
handleSwitchUrl(key) {
|
|
this.pdfSource = TEST_URL_MAP[key]
|
|
},
|
|
handleDownload(source) {
|
|
alert(`custom download file: ${source}`)
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
// background-color: #ccc;
|
|
}
|
|
|
|
// canvas {
|
|
// display: block;
|
|
// margin: auto;
|
|
// max-width: 800px;
|
|
// box-shadow: 0 2px 8px 4px rgba(0, 0, 0, 0.1);
|
|
// }
|
|
</style>
|