首页 前端知识 vue3 typescript 预览docx文件

vue3 typescript 预览docx文件

2024-10-29 23:10:45 前端知识 前端哥 272 181 我要收藏

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' //引入插件
//此方法使用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"的盒子当中,如果有需要更改样式,赋值更改就可以了
转载请注明出处或者链接地址:https://www.qianduange.cn//article/19536.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!