首页 > 其他分享 >前端开发中如何在页面加载时自动读取并转换指定的 .docx 文件

前端开发中如何在页面加载时自动读取并转换指定的 .docx 文件

时间:2024-11-06 16:58:26浏览次数:1  
标签:docx name style mammoth th Table 前端开发 加载

前端开发中如何在页面加载时自动读取并转换指定的 .docx 文件,并实现在线预览功能。我在这里分享通过 mammoth.min.js 插件来实现docx在线预览功能

第1:下载地址,大家可以任意选取下面其中一种方式下载

(1)GitHub - mwilliamson/mammoth.js: Convert Word documents (.docx files) to HTML

(2)mammoth (v1.8.0) - Convert Word documents from docx to simple HTML and Markdown | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务 铂特优选

第2:在html中引入mammoth.min.js

在你的 HTML 文件中,使用 <script> 标签引入 mammoth.min.js 文件

第3:编写 JavaScript 代码来读取和转换 DOCX 文件

示例代码:docx中出现表格,如何通过mammoth.min.js成功实现在线预览

mammoth 库在转换 DOCX 文件时,默认情况下可能不会完全保留所有的格式和表格结构。为了更好地处理这些问题,styleMap 可以帮助你定义如何将 Word 样式映射到 HTML 样式

<!DOCTYPE html>
<html class="x-admin-sm" lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <script type="text/javascript" th:src="@{/js/mammoth.browser.js}"></script>
    <style>
    body {
        font-family: Arial, sans-serif;
    }
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid #ddd;
        padding: 8px;
    }
    th {
        background-color: #f2f2f2;
        text-align: left;
    }
    </style>
</head>
<body>
<div id="content"></div>
<script>
    async function loadAndConvertDocx() {
        const url = 'http://localhost:8080/document.docx?id='+Math.random()
        try {
            // 读取 DOCX 文件
            const response = await fetch(url);
            const arrayBuffer = await response.arrayBuffer();

            // 定义 styleMap 以更好地处理表格和格式
            const styleMap = `                    p => p
                    p[style-name='Heading 1'] => h1:fresh
                    p[style-name='Heading 2'] => h2:fresh
                    p[style-name='Heading 3'] => h3:fresh
                    p[style-name='Heading 4'] => h4:fresh
                    p[style-name='Heading 5'] => h5:fresh
                    p[style-name='Heading 6'] => h6:fresh
                    p[style-name='Normal'] => p:fresh
                    table => table
                    tr => tr
                    td => td
                    th => th
                    table[style-name='Table Normal'] => table
                    tr[style-name='Table Normal'] => tr
                    td[style-name='Table Normal'] => td
                    th[style-name='Table Normal'] => th
                    table[style-name='Table Grid'] => table
                    tr[style-name='Table Grid'] => tr
                    td[style-name='Table Grid'] => td
                    th[style-name='Table Grid'] => th
                `;

            // 使用 Mammoth 转换 DOCX 文件为 HTML
            const result = await mammoth.convertToHtml({arrayBuffer, styleMap: styleMap});
            const html = result.value; // The generated HTML
            const messages = result.messages; // Any messages, such as warnings during conversion

            // 将生成的 HTML 插入到页面中
            document.getElementById('content').innerHTML = html;
        } catch (error) {
            console.error('Error:', error);
        }
    }

    // 页面加载时调用 loadAndConvertDocx 函数
    window.addEventListener('load', loadAndConvertDocx);
</script>
</body>
</html>

第4:如果你后端使用springboot(版本:2.7.5)框架,可以将某个存放docx文件的目录映射到 http://localhost:8080。这里只需要在application.yml配置 static-locations

spring:
  web:
    resources:
      static-locations: classpath:/META-INF/resources/, classpath:/resources/, classpath:/static/, classpath:/public/, file:D://upload//nursing

 

标签:docx,name,style,mammoth,th,Table,前端开发,加载
From: https://www.cnblogs.com/liuyangjava/p/18530566

相关文章

  • 将doc文件转换为docx文件
    将.doc文件转换为.docx文件通常不会导致兼容性变差,反而可能提升兼容性。以下是一些关键点:文件格式更新:.docx是Microsoft在2007年引入的新版文件格式,基于开放XML标准,具有更好的跨平台兼容性和开放性。与旧的.doc格式相比,.docx文件通常更小,支持更多的格式和功......
  • 前端开发之jsencrypt加密解密的使用方法和使用示
    1、安装组件npminstalljsencrypt--dev2、创建加密解密的方法文件3、文件内容importJSEncryptfrom'jsencrypt'//去密钥生成网址去生成公钥和密钥http://tools.jb51.net/password/rsa_encodeconstpublicKey='生成的公钥'//前端不建议存放私钥不建议解密数据因......
  • 一起单测引起的项目加载失败惨案
    作者:京东科技宋慧超一、前言最近在开发一个功能模块时,在功能自测阶段,通过使用单测测试功能的完整性,在测试单测联通性使用到静态方法测试时,发现单测报错,通过查阅解决方案发现需要对Javaassist包进行排包或者升版本处理。通过排包解决掉单测报错,在部署项目时发现频繁报bean注入......
  • 【鸿蒙南向开发】OpenHarmony-HDF驱动框架介绍及加载过程分析
    ......
  • 关于HuggingFace数据的加载
    配置HF镜像注意:如果无法访问HuggingFace可以访问它的国内镜像站,方法如下:先安装依赖:pipinstall-Uhuggingface_hub然后在代码的头部加入下面的环境变量设置,记得一定要加载代码的最前面,在importdatastes之前。importosos.environ['HF_ENDPOINT']='https://hf-mirror.co......
  • 猿大师办公助手在线编辑微软Office/金山wps网页组件COM加载项启用说明
    猿大师办公助手作为国内一款优秀的在线编辑Office插件,越来越受到更多客户的认可并实施了采购,猿大师办公助手与其他的厂商采用弹窗模式实现网页内嵌不同,猿大师办公助手是目前国内唯一真正实现网页内嵌本机Office的方案,效果如下图: 猿大师办公助手官网:www.yuanofficer.com/猿......
  • 说说Java的类加载机制?究竟什么是双亲委派模型?6B
    首先引入一个概念,什么是Java类加载器?一句话总结:类加载器(classloader)用来加载Java类到Java虚拟机中。官方总结:Java类加载器(英语:JavaClassloader)是Java运行时环境(JavaRuntimeEnvironment)的一部分,负责动态加载Java类到Java虚拟机的内存空间中。类通常是按需加载,即第一次使......
  • IDEA加载通义灵码插件及使用指南
    安装通义灵码插件登录通义灵码IDE插件下载登录参考教程https://help.aliyun.com/zh/lingma/user-guide/download-the-installation-guide本地工程和企业知识库准备请下载本地工程和知识库压缩包,并在本地解压缩,其中包含demoProject和知识库文件两个文件夹。通义灵码测......
  • arcgis api 4.x for js 地图加载多个气泡窗口展示(附源码下载)
    前言关于本篇功能实现用到的api涉及类看不懂的,请参照esri官网的arcgisapi4.xforjs:esri官网api,里面详细的介绍arcgisapi4.x各个类的介绍,还有就是在线例子:esri官网在线例子,这个也是学习arcgisapi4.x的好素材。由于arcgisapi4.xforjs目前没有提供......
  • flink 类加载剖析
    Causedby:java.sql.SQLException:Nosuitabledriverfoundforjdbc:mysql://25.79.1.13:90/tide_cloud?connectTimeout=60000&socketTimeout=60000atjava.sql.DriverManager.getConnection(DriverManager.java:689)~[?:1.8.0_332]atjava.sql.Dr......