安装npm依赖
npm i docx-preview@0.1.4
npm i jszip
预览本地文件
<template>
<div class="my-component"
ref="preview1">
<input type="file"
@change="preview"
ref="file">
</div>
</template>
<script lang='ts'>
import * as docx from 'docx-preview'
import * as JSZip from 'jszip'
import { defineComponent, onMounted, computed, reactive, ref } from 'vue'
export default defineComponent({
setup() {
onMounted(() => {
window.JSZip = JSZip
})
const file = ref(null)
const preview1 = ref(null)
const preview = (e) => {
docx.renderAsync(file.value.files[0], preview1.value) // 渲染到页面
}
return {
file,
preview1,
preview,
}
},
})
</script>
<style scoped>
.my-component {
width: 100%;
height: 90vh;
border: 1px solid #000;
}
</style>