vue3+typescript 预览docx文件

vue3+typescript 预览docx文件

---

引入插件

npm i docx-preview@^0.1.15

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

---

一、docx-preview是什么？

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

二、使用步骤

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

import { renderAsync } from 'docx-preview' //引入插件

//此方法使用element-ui里的上传功能
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, //禁用lastRenderedPageBreak元素的分页
        experimental: false, //启用实验性功能（制表符停止计算）
        trimXmlDeclaration: true, //如果为真，xml声明将在解析之前从xml文档中删除
        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 = ref<UploadUserFile[]>([])
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, //禁用lastRenderedPageBreak元素的分页
        experimental: false, //启用实验性功能（制表符停止计算）
        trimXmlDeclaration: true, //如果为真，xml声明将在解析之前从xml文档中删除
        debug: false, // 启用额外的日志记录
    })
}
</script>

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

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

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