前言
使用vue预览docx的解决方案，过去还有一种Mammoth 。
它旨在转换 .docx 文档（例如由 Microsoft Word 创建的文档），并将其转换为 HTML。 不支持样式。实现方式可以参考：Vue Word预览之mammoth.js
因此选择换成支持渲染样式的docx-preview。
正文
安装 npm 依赖
（23年6月最新版本为@2.1.4
npm i docx-preview --save
导入
import {
renderAsync } from "docx-preview";
使用
- 封装了这个功能，监听外部传入的url进行动态渲染，如果只是想测试功能，写死url就行了。
- 传入的url可以是本地的也可以是在线的。
- 修改原有的样式，以符合UI的要求。做了简单的移动端自适应。
完整代码
<template>
<div class="docx-container">
<div ref="file"></div>
</div>
</template>
<script>
import axios from "axios";
import {
renderAsync } from "docx-preview";
export default {
props: {
url: {
type: String,
default: "",
},
},
mounted() {
// this.renderFile();
},
watch: {
url(value) {
this.renderFile();
},
},
methods: {
renderFile() {
console.log(this.url);
axios({
method: "get",
responseType: "blob",
url: this.url,
}).then((response) => {
renderAsync(response.data, this.$refs.file);
});
},
},
};
</script>
<style scoped>
.docx-container ::v-deep .docx-wrapper {
background-color: #fff;
padding: 20px 20px;
}
.docx-container ::v-deep .docx-wrapper > section.docx {
width: 55vw !important;
padding: 0rem !important;
min-height: auto !important;
box-shadow: none;
margin-bottom: 0;
overflow-y: scroll;
height: 100vh;
}
.docx-container ::v-deep .docx-wrapper > section.docx::-webkit-scrollbar {
display: none;
}
</style>
实现效果
