word转html小工具

啥要做这个软件

部分编辑器排版不是很方便，但对html代码支持程度较好。

word不是直接能装html了吗？你这个有啥不一样

word自带转html代码不是很好，内嵌了很多字体和颜色格式，而这些一般第三方编辑器并不支持。
我这个直接就是比较简单的html代码，比如h1、em、p之类的简单代码，理论上支持大部分第三方html格式。

软件特色

基于PyQt5打包，所以软件比较大，30多M。
基于mammoth模块开发，这个提供了doc,docx转html的核心

软件界面

软件获取方式：私信“word”即可获取

ord转PDF是指将Microsoft Word文档（.doc或.docx格式）或金山WPS 文档转换为便携式文档格式（PDF）。这个操作可以使文档在不同操作系统和设备上都按统一的方式显示，并确保文档的格式和字体保持不变。Word转PDF特别适用于共享文档、电子邮件附件、打印或存档文档时，保证文档的完整性和可移植性。本文将从下面四个方面详细介绍如何将 Word 转换为 PDF 以及如何使用 Spire.Doc for C++ 在 C++ 中设置转换选项。

将 Doc 或 Docx 转换为 PDF
将 Word 转换为带有书签的 PDF
将 Word 转换为 PDF 时嵌入字体
将 Word 转换为 PDF 时设置图像质量

安装 Spire.Doc for C++

可直接通过 NuGet 安装Spire.Doc for C++简单快捷，推荐使用。

dotnet add package Spire.Doc.Cpp

将 Doc 或 Docx 转换为 PDF

Spire.Doc for C++ 提供 Document->SaveToFile(LPCWSTR_S fileName, FileFormat fileFormat) 方法允许将 Word 另存为 PDF、XPS、HTML、RTF 等。只需三行代码即可完成word 文档到PDF的转换。

创建 Doucment 对象。
使用 Document->LoadFromFile() 方法加载示例 Word 文件。
使用 Doucment->SaveToFile() 方法将文档保存为 PDF。

#include "Spire.Doc.o.h";

using namespace Spire::Doc;
using namespace std;

int main() {

	//指定输入文件路径
	wstring inputFilePath = L"C:\\Users\\Administrator\\Desktop\\示例文档.docx";

	//指定输出文件路径和名称
	wstring outputPath = L"Output\\";
	wstring outputFile = outputPath + L"ToPDF.pdf";

	//创建Document对象
	Document* document = new Document();

	//加载 Word 文件
	document->LoadFromFile(inputFilePath.c_str());

	//将文档保存为 PDF
	document->SaveToFile(outputFile.c_str(), FileFormat::PDF);
	document->Close();
	delete document;
}

将 Word 转换为带有书签的 PDF

书签可以快速定位文档位置并增强文档可读性。Word 生成 PDF 时，您可能希望保留 Word 文档的现有书签或从标题创建书签。

#include "Spire.Doc.o.h";

using namespace Spire::Doc;
using namespace std;

int main() {

	//指定输入文件路径
	wstring inputFilePath = L"C:\\Users\\Administrator\\Desktop\\示例文档.docx";

	//指定输出文件路径和名称
	wstring outputPath = L"Output\\";
	wstring outputFile = outputPath + L"ToPDF.pdf";

	//创建Document对象
	Document* document = new Document();

	//加载 Word 文件
	document->LoadFromFile(inputFilePath.c_str());

	//创建 ToPdfParameterList 对象
	ToPdfParameterList* parameters = new ToPdfParameterList();

	//从 Word 标题创建书签
	parameters->SetCreateWordBookmarksUsingHeadings(true);

	//从 Word 中的现有书签创建 PDF 书签
	//parameters->SetCreateWordBookmarks(true);

	//将文档保存为 PDF
	document->SaveToFile(outputFile.c_str(), parameters);
	document->Close();
	delete document;
}

将 Word 转换为 PDF 时嵌入字体

若系统没有安装相应字体，有时会看到生成的PDF文档里面文字变成了乱码。通过将 Word 文档中使用的字体嵌入到 PDF 文档中，可以确保 PDF 文档在任何未安装适当字体的设备上正常显示。

#include "Spire.Doc.o.h";

using namespace Spire::Doc;
using namespace std;

int main() {

	//指定输入文件路径
	wstring inputFilePath = L"C:\\Users\\Administrator\\Desktop\\示例文档.docx";

	//指定输出文件路径和名称
	wstring outputPath = L"Output\\";
	wstring outputFile = outputPath + L"ToPDF.pdf";

	//创建Document对象
	Document* document = new Document();

	//加载 Word 文件
	document->LoadFromFile(inputFilePath.c_str());

	//创建 ToPdfParameterList 对象
	ToPdfParameterList* parameters = new ToPdfParameterList();

	//在生成的 PDF 中嵌入 Word 中使用的字体
	parameters->SetIsEmbeddedAllFonts(true);

	//将文档保存为 PDF
	document->SaveToFile(outputFile.c_str(), parameters);
	document->Close();
	delete document;
}

将 Word 转换为 PDF 时设置图像质量

包含大量高质量图像的文档通常尺寸较大。将 Word 转换为 PDF 时，您可以压缩图像质量以控制PDF文件大小。

#include "Spire.Doc.o.h";

using namespace Spire::Doc;
using namespace std;

int main() {

	//指定输入文件路径
	wstring inputFilePath = L"C:\\Users\\Administrator\\Desktop\\示例文档.docx";

	//指定输出文件路径和名称
	wstring outputPath = L"Output\\";
	wstring outputFile = outputPath + L"ToPDF.pdf";

	//创建 Document 对象
	Document* document = new Document();

	//加载 Word 文件
	document->LoadFromFile(inputFilePath.c_str());

	//将图像压缩到原始质量的 40%
	document->SetJPEGQuality(40);

	//保持原始图像质量
	//document->SetJPEGQuality(100);

	//将文档保存为 PDF
	document->SaveToFile(outputFile.c_str(), FileFormat::PDF);
	document->Close();
	delete document;
}

以上为Spire.Doc for C++ 将word文档保存为 PDF的简要操作。Spire.Doc for C++支持非常全面的C++操作Word文档，可以前往Word 组件QQ交流群 913816707 参与更多讨论。

谈前端专注于前端+AI前沿技术和场景应用落地。关注可视化，零代码，AI技术融合，职业发展研究和软件工程化实践。致力于打造一个开放自由的技术交流平台。

大家好啊，我是徐小夕。之前和大家分享了很多前端工程化，可视化，职业发展相关的干货，虽然这两年大环境不太好，但是我们还是要定期学习成长，才能让自己的未来把握职场主动权。

最近由于AI应用的高速发展，使得文档/知识库成为了AI的首选试炼场。比如用AI提取PDF的大纲和关键内容，用AI总结电子书的内容，AI对DOC文档进行润色，优化等，这些都离不开对文档的解析和处理。

那么前端能不能实现对文档的解析和处理呢？答案是肯定的，接下来我就和大家分享一下:

前端如何解析Word文件
基于HTML，一键导出为Word文档

当然口说无凭，我已经在Nocode/WEP文档知识引擎中把Doc文档功能实现了，大家感兴趣的可以亲自体验一下。

image.png

好啦，接下来开始我们的技术分享。

往期精彩

做了4年的零代码平台，准备出海了

Word文档的本质

image.png

Word 文档的本质是一种电子文档格式，它主要用于创建、编辑和保存文本内容，同时还可以包含图片、表格、图表等多种元素。它是一种方便的工具，用于记录、整理和交流信息。

doc 和 docx 是两种常见的 Word 文档格式，它们主要有以下区别：

版本：doc 是 Word 2003 及之前版本的默认文件格式，而 docx 是 Word 2007 及之后版本的默认文件格式。
兼容性：doc 格式的兼容性较好，可以被大多数旧版本的 Word 软件打开。而 docx 格式在较新版本的 Word 中得到完全支持，但在一些旧版本的 Word 中可能需要安装兼容性插件才能正常打开。
文件体积：由于 docx 格式采用了更高效的压缩技术，所以它的文件体积通常比 doc 格式小。
安全性：docx 格式采用基于 XML 的格式，相对更安全一些，不容易受到宏病毒的攻击。
功能支持：docx 格式支持更多的新特性和功能，如高级的图表和图形处理、更丰富的格式选项、多媒体嵌入等。而 doc 格式则不支持这些新功能。

为了与时俱进，我们优先考虑最新标准格式 docx，那么如何解析 docx 呢，这就要进一步分析一下 docx文件的本质了。

docx 的本质是什么

docx 我们第一感觉是一个文件，其实确实是一个文件（压缩文件），我用解压工具提取文件之后，它的文件结构是这样的：

image.png

进入 word 文件夹，可以看到如下目录结构：

image.png

打开一个 xml 文件可以看到类似如下的内容：

image.png

看到这熟悉前端的小伙伴应该就比较熟悉了，我们可以使用类似于 document 的方法解析处理不同的XML标签，从而实现对 docx 文件的解析。

如何实现Word文档的解析

有了以上的分析结果，我们自己实现一个word文档解析器就非常容易了，但是考虑到docx的xml 文件的复杂性，我们自己实现需要考虑很多种情况，比如：

标题
列表
标题
列表
可定制的 docx 样式到 HTML 的映射
表格：表格格式（如边框）
脚注和尾注
图片
粗体、斜体、下划线、删除线、上标和下标。
链接
换行
文本框：文本框的内容被视为一个单独的段落，出现在包含文本框的段落之后。
注释

如果是项目进度比较紧张的情况下，我们自己实现肯定是要被“批斗”的，所以我们可以考虑第三方成熟的解决方案。

第三方开源方案

这里直接上我总结的几个开源方案：

Python 中的 python-docx
DocX：一个基于.NET框架的库，用于操作Word 2007/2010/2013文件，具有简单易用的API，无需安装额外软件，支持非商业用途。
OpenXml-PowerTools：一个基于Open XML文档编程接口开发的开源工具，扩展了Open XML SDK的功能，支持将docx、pptx文件拆分为多个文件、将多个docx、pptx文件合并为一个文件、使用XML数据模板生成docx文件、docx文档高保值转换为Html页面等功能
Mammoth 一个专注于转换 .docx 文档的工具库，支持浏览器和服务器使用

那作为前端的小伙伴，我们首选 Mammoth。

image.png

github地址：https://github.com/mwilliamson/mammoth.js

实战Word文档解析

接下来和大家分享一下使用 Mammoth 来实现 docx 文档解析。

先来看一个简单的例子：

import mammoth from 'mammoth';

mammoth.convertToHtml({path: "你的doc文件的路径/document.docx"})
    .then(function(result){
        var html = result.value; // 解析出的html结果
        var messages = result.messages; // 错误或者额外的提示信息
    })
    .catch(function(error) {
        console.error(error);
    });

以上代码是在node.js 环境下实现的简单例子，当然我们也可以在浏览器中直接使用，我在看完了它的文档之后，加上自己的研究，写了一个能自定义图片上传路径，并支持修改文档样式的demo，这里分享一下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="file" onchange="handleFile(this.files[0])" />

  <script src="https://unpkg.com/mammoth@latest/dist/mammoth.min.js"></script>
  <script>
    function handleFile(file) {
      const reader = new FileReader();
      reader.onload = function (loadEvent) {
        const arrayBuffer = loadEvent.target.result;
        mammoth.convertToHtml({ arrayBuffer: arrayBuffer }, {
          // 设置自定义图片上传路径
          imageReader: (image) => {
            return new Promise((resolve, reject) => {
              // 在这里实现图片上传逻辑，并将上传后的图片路径作为结果返回
              resolve('your_uploaded_image_path'); 
            });
          },
          // 设置文本样式
          styleMap: [
            // 标题样式
            {
              name: 'Heading 1',
              element: 'h1',
              attributes: {
                'tyle': 'font-size: 24px; color: #333;',
              },
            },
            // 正文样式
            {
              name: 'Normal',
              element: 'p',
              attributes: {
                'tyle': 'font-size: 16px; color: #666;',
              },
            },
          ],
        })
        .then(result => {
            console.log(result.value);
          })
        .catch(error => {
            console.error(error);
          });
      };
      reader.readAsArrayBuffer(file);
    }
  </script>
</body>

</html>

Word文档导出实现

image.png

实现将html导出为word文档，方法其实也很简单，这里直接分享一下我的方案：

 const html = docRef.current;
const blob = new Blob([html.innerHTML], { type: 'application/msword' });

// 创建一个下载链接
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'wep.doc';

// 模拟点击下载链接
link.click();

// 释放资源
URL.revokeObjectURL(link.href);

本质上就是我们将 html内容转化为blob，并设置类型为application/msword, 最后通过revokeObjectURL api来实现docx文档下载。

当然还有其他方案，这里也和大家分享一下：

import htmlDocx from 'html-docx-js/dist/html-docx';
import FileSaver from 'file-saver';

// 定义要导出的 HTML 内容
const htmlContent = `
  <h1>标题</h1>
  <p>这是一段文本。</p>
  <table border="1">
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>25</td>
    </tr>
  </table>
`;

// 将 HTML 转换为 Word 文档
const docx = htmlDocx.asBlob(htmlContent);

// 保存 Word 文档
FileSaver.saveAs(docx, 'example.docx');

所有案例都在Nocode/WEP中实现，大家感兴趣可以参考一下.

在线咨询

上一篇：HTML5教程从入门到精通，随堂笔记（一）HTML5框架结构
下一篇：CSS基础知识（六）CSS字体样式及文本样式

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

word转html小工具

word不是直接能装html了吗？你这个有啥不一样

软件特色

软件界面

安装 Spire.Doc for C++

将 Doc 或 Docx 转换为 PDF

将 Word 转换为带有书签的 PDF

将 Word 转换为 PDF 时嵌入字体

将 Word 转换为 PDF 时设置图像质量

往期精彩

Word文档的本质

docx 的本质是什么

如何实现Word文档的解析

第三方开源方案

实战Word文档解析

Word文档导出实现

您的项目需求