【vue2+docx

2024-06-03 10:52| 来源: 网络整理| 查看: 265

前言

使用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的要求。做了简单的移动端自适应。完整代码 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); }); }, }, }; .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; } 实现效果

在这里插入图片描述 ps:上面的样式对于一些文档不太兼容，建议还是只参考写法。

优（简）化

其实已经有直接封装了这个组件的npm包，安装后可以使用，也很方便。样式也已经进行二改，比较像word（当然如果自己想要在它的基础上三改，方法跟上面的一样。）demo预览github地址：关于安装&使用都写得很详细了。

关于word文档切换后，文档回到顶部的实现：

watch: { url(value) { const container = document.querySelector(".docx-container"); if (container) { container.scrollTo(0, 0); } }, }, 参考有在线demo和github的vue 预览 word 文件 docx，但使用的docx-preview版本较老vue docx-preview实现docx文件在线预览，有讲到一些v2v3使用的区别和样式如何自定义有增加一个使用elementui的loading动画效果

【本文地址】

公司简介

联系我们