vue3 typescript 预览docx文件

vue3+typescript 预览 docx 文件

文章目录

• vue3+typescript 预览 docx 文件
• 引入插件
• 一、docx-preview 是什么？
• 二、使用步骤
• • • 在所需要此页面中引入插件
    • 以下是全部代码

引入插件

npm i docx-preview@^0.1.15

或者使用 cnpm yarn 进行下载也可以

一、docx-preview 是什么？

docx-preview 是基于 vue 的一种能够线上预览 word 文档的插件。

二、使用步骤

在所需要此页面中引入插件

import { renderAsync } from 'docx-preview' 

const handleChange: UploadProps['onChange'] = (file: any) => {
    fileViews.value = file
    renderAsync(fileViews.value.raw, container.value, undefined, {
        className: "docx,doc", 
        inWrapper: true, 
        ignoreWidth: false, 
        ignoreHeight: false, 
        ignoreFonts: false, 
        breakPages: true, 
        ignoreLastRenderedPageBreak: true, 
        experimental: false, 
        trimXmlDeclaration: true, 
        debug: false, 
    })
}

以下是全部代码

template>
    div>
        el-card>
            el-upload v-model:file-list="fileList" class="upload-demo"
                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :on-change="handleChange"
                :auto-upload="false">
                el-button type="primary"> 上传 /el-button>
            /el-upload>
            div ref="container" class="docx">/div>
        /el-card>
    /div>
/template>

script lang='ts' setup name="index">
import { ref } from 'vue'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { renderAsync } from 'docx-preview'
const fileList = refUploadUserFile[]>([])
const fileViews = ref()
let container = ref();
const handleChange: UploadProps['onChange'] = (file: any) => {
    fileViews.value = file
    renderAsync(fileViews.value.raw, container.value, undefined, {
        className: "docx,doc", 
        inWrapper: true, 
        ignoreWidth: false, 
        ignoreHeight: false, 
        ignoreFonts: false, 
        breakPages: true, 
        ignoreLastRenderedPageBreak: true, 
        experimental: false, 
        trimXmlDeclaration: true, 
        debug: false, 
    })
}
/script>

style lang='scss' scoped>
.docx {
    width: 40%;
    height: 80vh;
    overflow-y: scroll;
}

::-webkit-scrollbar {
    display: none;
}
/style>

word 是渲染在 ref="container" 的盒子当中，如果有需要更改样式，赋值更改就可以了