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预览组件

相关推荐
就叫飞六吧1 小时前
vue2和vue3全面对比
前端·javascript·vue.js
qq_2518364571 小时前
基于ssm vue uniapp实现的爱心小屋公益机构智慧管理系统
前端·vue.js·uni-app
._Ha!n.1 小时前
Vue基础(二)
前端·javascript·vue.js
程序员的春天12 小时前
基于Springboot+Vue的线上课堂系统(含源码数据库)
数据库·vue.js·spring boot
程序员大金4 小时前
基于SpringBoot+Vue+MySQL的在线学习交流平台
java·vue.js·spring boot·后端·学习·mysql·intellij-idea
qq_2518364574 小时前
基于SpringBoot vue 医院病房信息管理系统设计与实现
vue.js·spring boot·后端
肖哥弹架构5 小时前
Vue组件开发:从入门到架构师
前端·vue.js·程序员
一 乐6 小时前
租拼车平台|小区租拼车管理|基于java的小区租拼车管理信息系统小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·微信·notepad++·拼车
寻找09之夏10 小时前
【Vue3实战】:用导航守卫拦截未保存的编辑,提升用户体验
前端·vue.js
多多米100511 小时前
初学Vue(2)
前端·javascript·vue.js