vue 在线预览word

1 mammoth

先找的是mammoth这个插件yarn add mammoth,版本是1,7.0

参考网上的示例使用如下:

ts 复制代码
import mammoth from "mammoth";
const vHtml = ref("")
const readExcelFromRemoteFile = (url) =>{
    var xhr = new XMLHttpRequest();
    xhr.open("get", url, true);
    xhr.responseType = "arraybuffer";
    xhr.onload = function () {
    if (xhr.status == 200) {
        mammoth.convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) })
        .then(function (resultObject) {
            nextTick(() => {
            // document.querySelector("#wordView").innerHTML =
            //   resultObject.value;
            vHtml.value = resultObject.value;
            });
        });
    }
    };
    xhr.send();
}

在word中设置的样式是

因为这个图片是做了文字环绕,因此他识别不了.

在网页端显示的如下面:

待补充其他的在线word预览组件

相关推荐
saadiya~9 分钟前
Vue 3 实现后端 Excel 文件流导出功能(Blob 下载详解)
前端·vue.js·excel
阿珊和她的猫1 小时前
Vue Router中的路由嵌套:主子路由
前端·javascript·vue.js
GISer_Jing4 小时前
Vue 和 React 状态管理的性能优化策略对比
vue.js·react.js·性能优化
課代表4 小时前
Office 中 VBE 的共同特点与区别
word·excel·vba·office·vbe
HSunR4 小时前
vue3 elementplus tabs切换实现
javascript·vue.js·elementui
三天不学习5 小时前
VueUse/Core:提升Vue开发效率的实用工具库
前端·javascript·vue.js·vueuse
心.c7 小时前
vue3大事件项目
前端·javascript·vue.js
东锋1.38 小时前
前端动画库 Anime.js 的V4 版本,兼容 Vue、React
前端·javascript·vue.js
前端怎么个事10 小时前
框架的源码理解——V3中的ref和reactive
前端·javascript·vue.js
Ciito10 小时前
将 Element UI 表格元素导出为 Excel 文件(处理了多级表头和固定列导出的问题)
前端·vue.js·elementui·excel