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文檔導出實現

您的項目需求