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"的盒子当中,如果有需要更改样式,赋值更改就可以了