的:
TEAMWISE PUBLISHER 發(fā)布器
特征:
TEAMWISE Publisher 電子出版:快速簡單
在 Word 轉(zhuǎn)換前,如下圖示
轉(zhuǎn)換后, 如下圖示:
在 Word 轉(zhuǎn)換前,如下圖示
轉(zhuǎn)換后, 如下圖示:
在 Word 轉(zhuǎn)換前(高級版),如下圖示
轉(zhuǎn)換后(高級版), 如下圖示:
TEAMWISE PUBLISHER 電子出版:負擔得起
2020年6/24日-2020年7/24日, 有格式的 Word 文檔不限量轉(zhuǎn)換,免費提供6個H5皮膚樣式(可以定制 LOGO, 公司頁腳和顏色)僅需人民幣2000元/月免費提供云端上線(不加密,不承諾永久保存數(shù)據(jù))。
好處:
價值:
關(guān)于我們
北京鐳內(nèi)容技術(shù)公司成立于2019年,其前身是2014年成立的上海迪臣信息科技有限公司。本公司使命是通過人工智能技術(shù)為企業(yè)內(nèi)容實踐不斷賦能。
公司定位是解決內(nèi)容 ”寫、管、用“三個方面的挑戰(zhàn)。
為此我們與知名的Oxygen產(chǎn)品廠家羅馬尼亞 SyncSoft 公司,比利時 InfoMapping 國際公司等結(jié)成合作伙伴并代理銷售:Oxygen XML 產(chǎn)品系列,F(xiàn)S Pro Word 產(chǎn)品等。與此同時,我們研發(fā)、交付和銷售 AI 技術(shù)產(chǎn)品,如機器翻譯 TEAMWISE 等。
基于 AI 行業(yè)的挑戰(zhàn),我們也被主要的 AI 技術(shù)公司委托提供高性價比人工翻譯服務(wù)。
產(chǎn)品和服務(wù)咨詢,請聯(lián)系我們:
家好,很高興又見面了,我是"高級前端?進階?",由我?guī)е蠹乙黄痍P(guān)注前端前沿、深入前端底層技術(shù),大家一起進步,也歡迎大家關(guān)注、點贊、收藏、轉(zhuǎn)發(fā),您的支持是我不斷創(chuàng)作的動力。
今天給大家?guī)淼闹黝}是HTML5 和word的互相轉(zhuǎn)化,話不多說,直接進入正題!
html-docx-js 是一個非常小的庫,能夠?qū)?HTML 文檔轉(zhuǎn)換為 Microsoft Word 2007 及更高版本使用的 DOCX 格式。 html-docx-js 設(shè)法使用稱為“altchunks”的功能在瀏覽器中執(zhí)行轉(zhuǎn)換。 簡而言之,它允許以不同的標記語言嵌入內(nèi)容。 開發(fā)者使用 MHT 文檔將嵌入內(nèi)容發(fā)送到 Word,因為它允許處理圖像。 Word 打開此類文件后,會將外部內(nèi)容轉(zhuǎn)換為 Word Processing ML(這是 DOCX 文件的標記語言的調(diào)用方式)并替換引用。
Microsoft Word for Mac 2008 不支持 Altchunk,LibreOffice 和 Google Docs 也不支持 Altchunk。
關(guān)于 html-docx-js 庫有幾點需要說明:
目前 Mammoth 在 Github 上通過 MIT 協(xié)議開源,有超過 1k 的 star、0.3k 的 fork、0.7k 的項目依賴量、NPM 周平均下載量 9k,是一個值得關(guān)注的前端開源項目。
var converted = htmlDocx.asBlob(content);
saveAs(converted, "test.docx");
asBlob 可以采用其他選項來控制文檔的頁面設(shè)置:
比如下面的例子:
var converted = htmlDocx.asBlob(content, {
orientation: "landscape",
margins: { top: 720 },
});
saveAs(converted, "test.docx");
需要注意的是,開發(fā)者需要傳遞完整、有效的 HTML(包括 DOCTYPE、html 和 body 標簽)。 這可能不太方便,但可以讓開發(fā)者在樣式標簽中包含 CSS 規(guī)則。
html-docx-js 作為獨立”Browserify 模塊(UMD)分發(fā)。 開發(fā)者可以將其作為 html-docx 要求。 如果沒有可用的模塊加載器,它將把自己注冊在 window.htmlDocx。
Mammoth.js 旨在轉(zhuǎn)換 .docx 文檔,例如:由 Microsoft Word、Google Docs 和 LibreOffice 創(chuàng)建的文檔,并將其轉(zhuǎn)換為 HTML。 Mammoth 的目標是通過使用文檔中的語義信息并忽略其他細節(jié)來生成簡單且干凈的 HTML。 例如,Mammoth 將任何具有標題 1 樣式的段落轉(zhuǎn)換為 h1 元素,而不是嘗試精確復(fù)制標題的樣式(字體、文本大小、顏色等)。
.docx 使用的結(jié)構(gòu)與 HTML 的結(jié)構(gòu)之間存在很大的不匹配,這意味著對于更復(fù)雜的文檔來說,轉(zhuǎn)換不太可能完美。 如果開發(fā)者僅使用樣式來對文檔進行語義標記,那么 Mammoth 效果最佳。
Mammoth.js 目前支持以下功能:
Mammoth 在眾多平臺可用,比如:Python、WordPress、Java/JVM、.NET 等等。目前 Mammoth 在 Github 上通過 BSD-2-Clause 開源,有超過 4.1k 的 star、0.5k 的 fork、4.4k 的項目依賴量、NPM 周平均下載量 76k,是一個值得關(guān)注的前端優(yōu)質(zhì)開源項目。
以文檔轉(zhuǎn)換為例。
Mammoth 允許在轉(zhuǎn)換文檔之前對其進行處理。 例如,假設(shè)該文檔尚未進行語義標記,但開發(fā)者知道任何居中對齊的段落都應(yīng)該是標題,則可以使用 transformDocument 參數(shù)來適當?shù)匦薷奈臋n:
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 函數(shù)進行優(yōu)化,比如:
function transformParagraph(element) {
if (element.alignment === "center" && !element.styleId) {
return { ...element, styleId: "Heading2" };
} else {
return element;
}
}
var options = {
transformDocument: mammoth.transforms.paragraph(transformParagraph),
};
或者,如果開發(fā)者希望已明確設(shè)置為使用等寬字體來表示代碼的段落:
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')"],
};
關(guān)于 Mammoth 庫的更多用法,更多 API 示例可以參考文末資料,本文不再過多展開。
本文主要和大家介紹 HTML5 和word互轉(zhuǎn)的兩個開源庫,分別為:html-docx-js、mammoth.js。相信通過本文的閱讀,大家對 html-docx-js、mammoth.js 會有一個初步的了解。
因為篇幅有限,關(guān)于 html-docx-js、mammoth.js 的更多用法和特性文章并沒有過多展開,如果有興趣,可以在我的主頁繼續(xù)閱讀,同時文末的參考資料提供了大量優(yōu)秀文檔以供學習。最后,歡迎大家點贊、評論、轉(zhuǎn)發(fā)、收藏,您的支持是我不斷創(chuàng)作的動力。
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
持word上傳的富文本編輯器,web編輯器,HTML編輯器,前端編輯器。編輯器網(wǎng)上搜了一下,比較多,
前端用了VUE2,VUE3,React,HTML5,也是一個新項目,為了方便用的這些框架,實際上這個是無所謂,功能的實現(xiàn)和前端這些框架沒什么關(guān)系。
后端用了PHP,JSP,ASP,ASP.NET,SpringBoot,功能實現(xiàn)和后端用的什么開發(fā)語言無關(guān),后端只提供一個文件上傳的接口,HTTP form協(xié)議,圖片上傳時會調(diào)這個接口。
編輯器是ckeditor5,為ckeditor編輯器增加粘貼Word圖片的功能,支持快捷鍵操作(Ctrl+V),支持多種系統(tǒng):Windows,macOS,Linux,信創(chuàng)國產(chǎn)化環(huán)境,中標麒麟,銀河麒麟,統(tǒng)信,龍芯。
支持word粘貼,word內(nèi)容粘貼,word圖文粘貼,word圖片粘貼,粘貼后圖片能夠自動上傳到服務(wù)器中,然后將圖片和內(nèi)容HTML添加到編輯器中,上傳接口地址能夠自定義
示例項目:https://gitee.com/xproer/wordpaster-vue-ckeditor5
1.為ckeditor增加插件按鈕
1.下載ckeditor5源碼,注意:不是在npm中直接安裝ckeditor5,在npm中直接安裝的ckeditor5是已經(jīng)打包好的編輯器,我們無法為其添加插件,必須下載源碼添加好后再手動打包。
git clone -b stable https://github.com/ckeditor/ckeditor5-build-classic.git
cd ckeditor5-build-classic
2.添加插件文件
將plugin下的插件復(fù)制到ckeditor5的目錄中
導(dǎo)入插件
在ckeditor.js中導(dǎo)入插件
3.添加插件
添加到工具欄
# 構(gòu)建,生成ckeditor.js,生成的ckeditor.js在build目錄下
yarn build
執(zhí)行命令后生成ckeditor.js
將打包好的ckeditor.js復(fù)制到項目中
2.復(fù)制layer,wordpaster目錄,安裝jquery
#通過命令安裝jquery
npm install jquery
3.在組件中導(dǎo)入樣式
代碼:
import {WordPaster,WordPasterManager} from ‘../../static/WordPaster/js/w’
import ‘../../static/WordPaster/js/w.css’
import ‘../../static/layer-v3.1.1/layer/layer’
import ‘../../static/layer-v3.1.1/layer/theme/default/layer.css’
4.初始化wordpaster組件
配置posturl,
代碼:
//初始化
WordPaster.getInstance({
PostUrl:”http://localhost:8891/upload.aspx”,
ImageUrl:”http://localhost:8891{url}”
}).Load();
整合效果:
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。