vue 实现word文档页面内预览docx-preview 和 vue-office

1.先下载引入

bash 复制代码
npm i docx-preview --save
import { renderAsync } from 'docx-preview';

2.使用

bash 复制代码
fetch(url) .then((response) => {
   let docData = response.blob(); //将文件转换成bolb形式
    //选择要渲染的元素
    let childRef = document.getElementsByClassName("childRef");
    //用docx-preview渲染
    renderAsync(docData, childRef[0]).then((res) => {});
  
  })

url就是文档地址,可以是线上也可以是本地

bash 复制代码
 <div  class="childRef" ></div>

给个空间就可以了

3.踩坑

有时候有些文档预览的时候,一些数字不展示,查找了半天才发现是文档内有图形绘制的地方,然后影响了,删掉就可以了

比如说,下划线一般我们都是文字添加下划线,但是如果用形状画一个黑线,看起来也是个下划线,但是这样会解析不出来

一般大家也不会用这些话形状,所以就可以忽略

4.vue-office

这个插件是在docx-preview基础上进行了一些优化,git地址和使用方式都可以看文档
添加链接描述

我想说的是,在你安装过docx-preview之后,再安装vue-office会启动冲突

删掉node-modules重新下载就行了,最好吧package里的docx-preview也删掉,然后重新下载

bash 复制代码
npm install @vue-office/docx vue-demi
相关推荐
伍哥的传说6 分钟前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_4244091914 分钟前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding14 分钟前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜16 分钟前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD16 分钟前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding17 分钟前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空20 分钟前
解决el-table右下角被挡住部分
javascript·vue.js·elementui
柚子81630 分钟前
scroll-marker轮播组件不再难
前端·css
bing_15836 分钟前
Word 怎么让字变大、变粗、换颜色?
word
小码氓41 分钟前
Java填充Word模板
java·开发语言·spring·word