<template>
<div class="doc-render-box">
<div ref="refFile"></div>
</div>
</template>
<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
name: 'PreviewDemo'
})
</script>
<script setup>
import axios from 'axios'
const docxPromise = () => import('docx-preview')
const service = axios.create()
const props = defineProps({
url: {
type: String,
default: ''
}
})
const refFile = ref(null)
watch(
() => props.url,
(val) => {
if (val) {
goPreview()
}
}
)
const goPreview = async () => {
const { data } = await service({
url: props.url,
method: 'get',
responseType: 'blob'
})
const docx = await docxPromise()
docx.renderAsync(data, refFile.value)
}
</script>
<style lang="scss" scoped>
.doc-render-box {
width: 100%;
margin: 0 auto;
overflow-x: auto;
}
</style>