整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
家好，很高興又見面了，我是"高級前端?進階?"，由我帶著大家一起關注前端前沿、深入前端底層技術，大家一起進步，也歡迎大家關注、點贊、收藏、轉發，您的支持是我不斷創作的動力。
今天給大家帶來的主題是HTML5 和word的互相轉化，話不多說，直接進入正題！
html-docx-js 是一個非常小的庫，能夠將 HTML 文檔轉換為 Microsoft Word 2007 及更高版本使用的 DOCX 格式。 html-docx-js 設法使用稱為“altchunks”的功能在瀏覽器中執行轉換。 簡而言之，它允許以不同的標記語言嵌入內容。 開發者使用 MHT 文檔將嵌入內容發送到 Word，因為它允許處理圖像。 Word 打開此類文件后，會將外部內容轉換為 Word Processing ML（這是 DOCX 文件的標記語言的調用方式）并替換引用。
Microsoft Word for Mac 2008 不支持 Altchunk，LibreOffice 和 Google Docs 也不支持 Altchunk。
關于 html-docx-js 庫有幾點需要說明：
目前 Mammoth 在 Github 上通過 MIT 協議開源，有超過 1k 的 star、0.3k 的 fork、0.7k 的項目依賴量、NPM 周平均下載量 9k，是一個值得關注的前端開源項目。
var converted = htmlDocx.asBlob(content);
saveAs(converted, "test.docx");asBlob 可以采用其他選項來控制文檔的頁面設置：
比如下面的例子：
var converted = htmlDocx.asBlob(content, {
orientation: "landscape",
margins: { top: 720 },
});
saveAs(converted, "test.docx");需要注意的是，開發者需要傳遞完整、有效的 HTML（包括 DOCTYPE、html 和 body 標簽）。 這可能不太方便，但可以讓開發者在樣式標簽中包含 CSS 規則。
html-docx-js 作為獨立”Browserify 模塊（UMD）分發。 開發者可以將其作為 html-docx 要求。 如果沒有可用的模塊加載器，它將把自己注冊在 window.htmlDocx。
Mammoth.js 旨在轉換 .docx 文檔，例如：由 Microsoft Word、Google Docs 和 LibreOffice 創建的文檔，并將其轉換為 HTML。 Mammoth 的目標是通過使用文檔中的語義信息并忽略其他細節來生成簡單且干凈的 HTML。 例如，Mammoth 將任何具有標題 1 樣式的段落轉換為 h1 元素，而不是嘗試精確復制標題的樣式（字體、文本大小、顏色等）。
.docx 使用的結構與 HTML 的結構之間存在很大的不匹配，這意味著對于更復雜的文檔來說，轉換不太可能完美。 如果開發者僅使用樣式來對文檔進行語義標記，那么 Mammoth 效果最佳。
Mammoth.js 目前支持以下功能：
Mammoth 在眾多平臺可用，比如：Python、WordPress、Java/JVM、.NET 等等。目前 Mammoth 在 Github 上通過 BSD-2-Clause 開源，有超過 4.1k 的 star、0.5k 的 fork、4.4k 的項目依賴量、NPM 周平均下載量 76k，是一個值得關注的前端優質開源項目。
以文檔轉換為例。
Mammoth 允許在轉換文檔之前對其進行處理。 例如，假設該文檔尚未進行語義標記，但開發者知道任何居中對齊的段落都應該是標題，則可以使用 transformDocument 參數來適當地修改文檔：
function transformElement(element) {
if (element.children) {
var children = _.map(element.children, transformElement);
element = { ...element, children: children };
}
if (element.type === "paragraph") {
element = transformParagraph(element);
}
return element;
}
function transformParagraph(element) {
if (element.alignment === "center" && !element.styleId) {
return { ...element, styleId: "Heading2" };
} else {
return element;
}
}
var options = {
transformDocument: transformElement,
};TransformDocument 的返回值在 HTML 生成期間使用。同時，上面的代碼可以使用 mammoth.transforms.paragraph 函數進行優化，比如：
function transformParagraph(element) {
if (element.alignment === "center" && !element.styleId) {
return { ...element, styleId: "Heading2" };
} else {
return element;
}
}
var options = {
transformDocument: mammoth.transforms.paragraph(transformParagraph),
};或者，如果開發者希望已明確設置為使用等寬字體來表示代碼的段落：
const monospaceFonts = ["consolas", "courier", "courier new"];
function transformParagraph(paragraph) {
var runs = mammoth.transforms.getDescendantsOfType(paragraph, "run");
var isMatch =
runs.length > 0 &&
runs.every(function (run) {
return run.font && monospaceFonts.indexOf(run.font.toLowerCase()) !== -1;
});
if (isMatch) {
return {
...paragraph,
styleId: "code",
styleName: "Code",
};
} else {
return paragraph;
}
}
var options = {
transformDocument: mammoth.transforms.paragraph(transformParagraph),
styleMap: ["p[style-name='Code'] => pre:separator('\n')"],
};關于 Mammoth 庫的更多用法，更多 API 示例可以參考文末資料，本文不再過多展開。
本文主要和大家介紹 HTML5 和word互轉的兩個開源庫，分別為：html-docx-js、mammoth.js。相信通過本文的閱讀，大家對 html-docx-js、mammoth.js 會有一個初步的了解。
因為篇幅有限，關于 html-docx-js、mammoth.js 的更多用法和特性文章并沒有過多展開，如果有興趣，可以在我的主頁繼續閱讀，同時文末的參考資料提供了大量優秀文檔以供學習。最后，歡迎大家點贊、評論、轉發、收藏，您的支持是我不斷創作的動力。
https://github.com/evidenceprime/html-docx-js
https://github.com/mwilliamson/mammoth.js
https://www.npmjs.com/package/html-docx-js
https://www.npmjs.com/package/mammoth
https://www.tutorialswebsite.com/export-html-to-word-document-with-javascript/
https://www.vecteezy.com/vector-art/136754-free-vector-documents
路是方向，代碼是時間，知識需積累，經驗需摸索。希望對大家有用，有錯誤還望指出。
要實現一個文件上傳和下載的頁面，我們需要涉及到 Django 中的以下幾個概念/類/函數：
一、在 models.py 文件中定義一個 File 模型，用于存儲上傳的文件和文件相關信息。
from django.db import models
class File(models.Model):
filename = models.CharField(max_length=100)
file = models.FileField(upload_to='uploads/')
created_at = models.DateTimeField(auto_now_add=True)
代碼中定義了一個名為 File 的模型，包含了文件名、文件、創建時間三個字段，并規定文件上傳到 uploads/ 文件夾下。
二、在 forms.py 文件中，定義一個 FileForm 表單，用于提交文件到后端處理。
from django import forms
from .models import File
class FileForm(forms.ModelForm):
class Meta:
model = File
fields = ['filename', 'file']
代碼中定義了一個名為 FileForm 的表單類，它繼承自 Django 的 ModelForm，并以 File 模型為模板。fields 屬性定義了需要提交的字段。class Meta: model = File fields = ['filename', 'file']
三、在 views.py 文件中，定義處理文件上傳和下載的視圖函數。
from django.shortcuts import render, redirect
from django.http import FileResponse
from django.views import View
from .models import File
from .forms import FileForm
class FileView(View):
def get(self, request):
files = File.objects.all().order_by('-created_at')
form = FileForm()
return render(request, 'files.html', {'files': files, 'form': form})
def post(self, request):
form = FileForm(request.POST, request.FILES)
if form.is_valid():
form.save()
return redirect('file_list')
else:
return render(request, 'files.html', {'form': form})
class FileDownloadView(View):
def get(self, request, file_id):
file = File.objects.get(pk=file_id)
response = FileResponse(open(file.file.path, 'rb'))
response['Content-Disposition'] = 'attachment; filename=' + file.filename
return response
代碼中定義了兩個視圖函數，一個用于顯示上傳文件列表和提交表單，一個用于下載文件。其中 FileView 用于處理 GET 和 POST 請求，并加載模板 files.html；FileDownloadView 用于下載文件，將文件二進制數據返回給客戶端。
四、定義前端模板，在 templates 目錄下創建名為 files.html 的模板文件，用于顯示上傳文件列表和提交表單。
<h2>Upload File</h2> *****上傳******
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">Upload</button> </form>
<h2>Download Files</h2> *****下載*****
<ul>
{% for file in files %}
<li><a href="{% url 'file_download' file.id %}">{{ file.filename }}</a></li>
{% empty %}
<li>No files found.</li>
{% endfor %} </ul>
代碼中用 html 的 form 標簽以及 Django 的 csrf_token 安全驗證提供了上傳文件的表單。展示已上傳的文件，通過從 model 中獲取數據生成文件列表。
以上是一個實現文件上傳和下載的基本示例，它涉及到了 Django 中的一系列概念、類和函數，其中包括兩個關鍵的視圖函數，即處理文件上傳的 FileView，以及處理文件下載的 FileDownloadView。這兩個視圖函數實現了對于文件的上傳、下載、展示。前端通過 html 文件上傳的表單 形式 提交數據，后端通過 models.Model 和 forms.ModelForm 等定義實現數據存儲和數據處理。最終，前端通過 FileResponse 實現文件下載。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
