整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
TML5實(shí)現(xiàn)大文件分片上傳思路，利用HTML5分片上傳超大文件思路，WEBUPLOADER 支持 超大上G,多附件上傳，JS 大文件分割/分片上傳，百度WEBUPLOADER上傳視頻等大文件，WEBUPLOAD組件實(shí)現(xiàn)文件上傳功能和下載功能，JS大文件切片上傳，斷點(diǎn)續(xù)傳實(shí)現(xiàn)DEMO，前端上傳大文件的解決方案，前端上傳大文件處理（切片、斷點(diǎn)續(xù)傳），前端大文件上傳優(yōu)化方案——分片上傳，vue大文件上傳解決方案，vue大文件上傳解決方案10G，vue大文件上傳解決方案50G，vue大文件上傳解決方案100G，html5如何實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳、秒傳，
java如何實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳、秒傳，SpringBoot如何實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳、秒傳，SpringMVC如何實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳、秒傳，SpringCloud如何實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳、秒傳，
webuploader如何實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳、秒傳，百度webuploader如何實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳、秒傳，html5實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳、秒傳，vue如何實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳、秒傳，前端如何實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳、秒傳，JavaScript如何實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳、秒傳，
html5大文件斷點(diǎn)續(xù)傳、秒傳解決方案，html5大文件斷點(diǎn)續(xù)傳、加密上傳解決方案，html5大文件斷點(diǎn)續(xù)傳、加密存儲(chǔ)解決方案，html5大文件斷點(diǎn)續(xù)傳分片解決方案，html5大文件斷點(diǎn)續(xù)傳分塊解決方案，html5大文件斷點(diǎn)續(xù)傳分割解決方案，html5大文件斷點(diǎn)續(xù)傳切割解決方案，
在網(wǎng)上找過(guò)相關(guān)的資料，論壇里面也有網(wǎng)友交流過(guò)，但是都不太令人滿意。
給政府做的一個(gè)項(xiàng)目。實(shí)際上客戶那邊對(duì)具體的技術(shù)實(shí)際不關(guān)心。
研發(fā)部門的同事調(diào)研過(guò)百度的webuploader這個(gè)組件，發(fā)現(xiàn)他實(shí)際上就是對(duì)Flash和HTML5進(jìn)行了一個(gè)封裝，本質(zhì)還是調(diào)的HTML5的API，之前在項(xiàng)目中也用過(guò)，嘗試過(guò)，但是最終都不太滿意，一個(gè)是兼容性非常差，說(shuō)的是兼容IE，但是在IE用的是Flash，在很多用戶的電腦上用不了，卡頓崩潰發(fā)生的太頻繁，文件上傳的數(shù)量一多比如幾千個(gè)，前端頁(yè)面就開(kāi)始卡了，用戶體驗(yàn)非常差。這些問(wèn)題研發(fā)部的同事都向百度反應(yīng)過(guò)，但是百度webuploader那邊一直沒(méi)人回，基本上沒(méi)人管，領(lǐng)導(dǎo)說(shuō)要求付費(fèi)提供技術(shù)支持，那邊也是沒(méi)人回，聯(lián)系不上他們?nèi)魏稳恕?/p>
webuploader這邊連個(gè)開(kāi)發(fā)人員都聯(lián)系不到，這個(gè)是怎么回事？
搞的我們領(lǐng)導(dǎo)現(xiàn)在基本上不怎么考慮國(guó)內(nèi)這些免費(fèi)開(kāi)源的項(xiàng)目，研發(fā)部門的同事稱這些項(xiàng)目為免費(fèi)坑人項(xiàng)目。
用戶上傳的文件比較大，有20G左右，直接用HTML傳的話容易失敗，服務(wù)器也容易出錯(cuò)，需要分片，分塊，分割上傳。也就是將一個(gè)大的文件分成若干個(gè)小文件塊來(lái)上傳，另外就是需要實(shí)現(xiàn)秒傳功能和防重復(fù)功能，秒傳就是用戶如果上傳過(guò)這個(gè)文件，那么直接在數(shù)據(jù)庫(kù)中查找記錄就行了，不用再上傳一次，節(jié)省時(shí)間，實(shí)現(xiàn)的思路是對(duì)文件做MD5計(jì)算，將MD5值保存到數(shù)據(jù)庫(kù)，算法可以用MD5，或者CRC，或者SHA1，這個(gè)隨便哪個(gè)算法都行。
分片還需要支持?jǐn)帱c(diǎn)續(xù)傳，現(xiàn)在HTML5雖然提供了信息記錄功能，但是只支持到了會(huì)話級(jí)，也就是用戶不能關(guān)閉瀏覽器，也不能清空緩存。但是有的政府單位上傳大文件，傳了一半下班了，明天繼續(xù)傳，電腦一關(guān)結(jié)果進(jìn)度信息就丟失了，這個(gè)是他們的一個(gè)痛點(diǎn)。
切片的話還有一點(diǎn)就是在服務(wù)器上合并，一個(gè)文件的所有分片數(shù)據(jù)上傳完后需要在服務(wù)器端進(jìn)行合并操作。
聊下HTML5吧，怎么說(shuō)呢，HTML5也就是chrome提供的一個(gè)API來(lái)實(shí)現(xiàn)文件分片，反正基本的需求，小文件用是能用，但是用起來(lái)多多少少還是有點(diǎn)別扭，擴(kuò)展性，安全性，穩(wěn)定性用戶那陣都不太滿意，關(guān)鍵是什么，我們是沒(méi)辦法對(duì)HTML5進(jìn)行擴(kuò)展，個(gè)性化和定制化開(kāi)發(fā)的，基本上被谷歌給限制死了，這也是現(xiàn)在國(guó)產(chǎn)化的意義，希望能夠打破這個(gè)限制。不然公司的一些產(chǎn)品和業(yè)務(wù)不太好開(kāi)展，總不能用戶提個(gè)需求，我們就說(shuō)谷歌Chrome沒(méi)提供API，所我們就無(wú)法開(kāi)發(fā)吧。這不是跟客戶扯呢。
功能的話支持20G文件上傳和續(xù)傳，支持秒傳，支持文件夾上傳，支持在服務(wù)端保存文件夾層級(jí)結(jié)構(gòu)，支持將文件夾層級(jí)結(jié)構(gòu)信息保存到數(shù)據(jù)庫(kù)中，支持下載時(shí)能夠?qū)⑽募A層級(jí)結(jié)構(gòu)下載下來(lái)，支持下載文件夾，下載文件夾支持?jǐn)帱c(diǎn)續(xù)傳，支持VUE2,VUE3,React，支持IE，Chrome和信創(chuàng)國(guó)產(chǎn)化環(huán)境，比如銀河麒麟，統(tǒng)信UOS，龍芯，支持加密傳輸，包括加密上傳，加密下載，加密算法支持國(guó)密SM4，支持云對(duì)象存儲(chǔ)，比如華為云，阿里云，騰訊云，七牛云，AWS，MinIO,FastDFS，需要提供手機(jī)，QQ，微信，郵箱等聯(lián)系方式，提供7*24小時(shí)技術(shù)支持，提供長(zhǎng)期技術(shù)支持和維護(hù)服務(wù)，提供遠(yuǎn)程1對(duì)1技術(shù)指導(dǎo)，提供二次開(kāi)發(fā)指導(dǎo)，提供文檔教程，提供視頻教程。1.下載示例
https://gitee.com/xproer/up6-vue-cli
將up6組件復(fù)制到項(xiàng)目中
示例中已經(jīng)包含此目錄
1.引入up6組件
2.配置接口地址
接口地址分別對(duì)應(yīng)：文件初始化，文件數(shù)據(jù)上傳，文件進(jìn)度，文件上傳完畢，文件刪除，文件夾初始化，文件夾刪除，文件列表
參考：http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de
3.處理事件
啟動(dòng)測(cè)試
啟動(dòng)成功
效果
數(shù)據(jù)庫(kù)
源碼工程文檔：https://drive.weixin.qq.com/s?k=ACoAYgezAAw1dWofra
源碼報(bào)價(jià)單：https://drive.weixin.qq.com/s?k=ACoAYgezAAwoiul8gl
OEM版報(bào)價(jià)單：https://drive.weixin.qq.com/s?k=ACoAYgezAAwuzp4W0a
控件源碼下載：https://drive.weixin.qq.com/s?k=ACoAYgezAAwbdKCskc
家好，很高興又見(jiàn)面了，我是"高級(jí)前端?進(jìn)階?"，由我?guī)е蠹乙黄痍P(guān)注前端前沿、深入前端底層技術(shù)，大家一起進(jìn)步，也歡迎大家關(guān)注、點(diǎn)贊、收藏、轉(zhuǎn)發(fā)，您的支持是我不斷創(chuàng)作的動(dòng)力。
今天給大家?guī)?lái)的主題是HTML5 和word的互相轉(zhuǎn)化，話不多說(shuō)，直接進(jìn)入正題！
html-docx-js 是一個(gè)非常小的庫(kù)，能夠?qū)?HTML 文檔轉(zhuǎn)換為 Microsoft Word 2007 及更高版本使用的 DOCX 格式。 html-docx-js 設(shè)法使用稱為“altchunks”的功能在瀏覽器中執(zhí)行轉(zhuǎn)換。 簡(jiǎn)而言之，它允許以不同的標(biāo)記語(yǔ)言嵌入內(nèi)容。 開(kāi)發(fā)者使用 MHT 文檔將嵌入內(nèi)容發(fā)送到 Word，因?yàn)樗试S處理圖像。 Word 打開(kāi)此類文件后，會(huì)將外部?jī)?nèi)容轉(zhuǎn)換為 Word Processing ML（這是 DOCX 文件的標(biāo)記語(yǔ)言的調(diào)用方式）并替換引用。
Microsoft Word for Mac 2008 不支持 Altchunk，LibreOffice 和 Google Docs 也不支持 Altchunk。
關(guān)于 html-docx-js 庫(kù)有幾點(diǎn)需要說(shuō)明：
目前 Mammoth 在 Github 上通過(guò) MIT 協(xié)議開(kāi)源，有超過(guò) 1k 的 star、0.3k 的 fork、0.7k 的項(xiàng)目依賴量、NPM 周平均下載量 9k，是一個(gè)值得關(guān)注的前端開(kāi)源項(xiàng)目。
var converted = htmlDocx.asBlob(content);
saveAs(converted, "test.docx");asBlob 可以采用其他選項(xiàng)來(lái)控制文檔的頁(yè)面設(shè)置：
比如下面的例子：
var converted = htmlDocx.asBlob(content, {
orientation: "landscape",
margins: { top: 720 },
});
saveAs(converted, "test.docx");需要注意的是，開(kāi)發(fā)者需要傳遞完整、有效的 HTML（包括 DOCTYPE、html 和 body 標(biāo)簽）。 這可能不太方便，但可以讓開(kāi)發(fā)者在樣式標(biāo)簽中包含 CSS 規(guī)則。
html-docx-js 作為獨(dú)立”Browserify 模塊（UMD）分發(fā)。 開(kāi)發(fā)者可以將其作為 html-docx 要求。 如果沒(méi)有可用的模塊加載器，它將把自己注冊(cè)在 window.htmlDocx。
Mammoth.js 旨在轉(zhuǎn)換 .docx 文檔，例如：由 Microsoft Word、Google Docs 和 LibreOffice 創(chuàng)建的文檔，并將其轉(zhuǎn)換為 HTML。 Mammoth 的目標(biāo)是通過(guò)使用文檔中的語(yǔ)義信息并忽略其他細(xì)節(jié)來(lái)生成簡(jiǎn)單且干凈的 HTML。 例如，Mammoth 將任何具有標(biāo)題 1 樣式的段落轉(zhuǎn)換為 h1 元素，而不是嘗試精確復(fù)制標(biāo)題的樣式（字體、文本大小、顏色等）。
.docx 使用的結(jié)構(gòu)與 HTML 的結(jié)構(gòu)之間存在很大的不匹配，這意味著對(duì)于更復(fù)雜的文檔來(lái)說(shuō)，轉(zhuǎn)換不太可能完美。 如果開(kāi)發(fā)者僅使用樣式來(lái)對(duì)文檔進(jìn)行語(yǔ)義標(biāo)記，那么 Mammoth 效果最佳。
Mammoth.js 目前支持以下功能：
Mammoth 在眾多平臺(tái)可用，比如：Python、WordPress、Java/JVM、.NET 等等。目前 Mammoth 在 Github 上通過(guò) BSD-2-Clause 開(kāi)源，有超過(guò) 4.1k 的 star、0.5k 的 fork、4.4k 的項(xiàng)目依賴量、NPM 周平均下載量 76k，是一個(gè)值得關(guān)注的前端優(yōu)質(zhì)開(kāi)源項(xiàng)目。
以文檔轉(zhuǎn)換為例。
Mammoth 允許在轉(zhuǎn)換文檔之前對(duì)其進(jìn)行處理。 例如，假設(shè)該文檔尚未進(jìn)行語(yǔ)義標(biāo)記，但開(kāi)發(fā)者知道任何居中對(duì)齊的段落都應(yīng)該是標(biāo)題，則可以使用 transformDocument 參數(shù)來(lái)適當(dāng)?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 生成期間使用。同時(shí)，上面的代碼可以使用 mammoth.transforms.paragraph 函數(shù)進(jìn)行優(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),
};或者，如果開(kāi)發(fā)者希望已明確設(shè)置為使用等寬字體來(lái)表示代碼的段落：
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 庫(kù)的更多用法，更多 API 示例可以參考文末資料，本文不再過(guò)多展開(kāi)。
本文主要和大家介紹 HTML5 和word互轉(zhuǎn)的兩個(gè)開(kāi)源庫(kù)，分別為：html-docx-js、mammoth.js。相信通過(guò)本文的閱讀，大家對(duì) html-docx-js、mammoth.js 會(huì)有一個(gè)初步的了解。
因?yàn)槠邢蓿P(guān)于 html-docx-js、mammoth.js 的更多用法和特性文章并沒(méi)有過(guò)多展開(kāi)，如果有興趣，可以在我的主頁(yè)繼續(xù)閱讀，同時(shí)文末的參考資料提供了大量?jī)?yōu)秀文檔以供學(xué)習(xí)。最后，歡迎大家點(diǎn)贊、評(píng)論、轉(zhuǎn)發(fā)、收藏，您的支持是我不斷創(chuàng)作的動(dò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
殘酷的移動(dòng)互聯(lián)網(wǎng)競(jìng)爭(zhēng)環(huán)境下，HTML5技術(shù)一直受到各方關(guān)注，“HTML5顛覆原生App”的爭(zhēng)論也從未停止過(guò)，不管怎樣HTML5生態(tài)的構(gòu)建方興未艾。不過(guò)對(duì)于移動(dòng)開(kāi)發(fā)者來(lái)說(shuō)更關(guān)心的問(wèn)題是如何低成本、周期短開(kāi)發(fā)出體驗(yàn)效果好的App，所以當(dāng)下用HTML5遠(yuǎn)比賭HTML5更現(xiàn)實(shí)。于是，一個(gè)一直被提及但是從沒(méi)有占據(jù)過(guò)統(tǒng)治地位的概念又一次走進(jìn)了移動(dòng)開(kāi)發(fā)者們的視野，那就是跨平臺(tái)開(kāi)發(fā)。
AD：WOT2015互聯(lián)網(wǎng)運(yùn)維與開(kāi)發(fā)者大會(huì)熱銷搶票
目前國(guó)內(nèi)外已經(jīng)有很多基于HTML5的跨平臺(tái)開(kāi)發(fā)工具，你并不需要任何的原生應(yīng)用編程經(jīng)驗(yàn)，你只需要一些HTML的相關(guān)知識(shí)，懂一些CSS和JavaScript，運(yùn)用工具中所提供的各種豐富的功能模塊，便可在很短時(shí)間內(nèi)完成App的開(kāi)發(fā)而且讓你的App具備完美的原生體驗(yàn)。
推薦幾款跨平臺(tái)工具
1、Appcelerator
Appcelerator的Titanium開(kāi)發(fā)平臺(tái)使開(kāi)發(fā)者可以通過(guò)HTML、PHP、JavaScript、Ruby、Python等Web編程語(yǔ)言開(kāi)發(fā)手機(jī)、平板和桌面的原生App。其優(yōu)勢(shì)在于它可以讓用戶輕松地訪問(wèn)超過(guò)300個(gè)API以及定位信息。
此外，Appcelerator提供針對(duì)特定行為或事件定制的統(tǒng)計(jì)。App的數(shù)據(jù)既可儲(chǔ)存在云端，也可儲(chǔ)存在設(shè)備上。
2、APICloud
APICloud是一款“云端一體”的移動(dòng)開(kāi)發(fā)平臺(tái)，信仰“云端一體”的理念，重新定義了移動(dòng)應(yīng)用開(kāi)發(fā)。APICloud為開(kāi)發(fā)者從“云”和“端”兩個(gè)方向提供API，簡(jiǎn)化移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)，讓移動(dòng)應(yīng)用的開(kāi)發(fā)周期從一個(gè)月縮短到7天。APICloud由“云API”和“端API”兩部分組成，可以幫助開(kāi)發(fā)者快速實(shí)現(xiàn)移動(dòng)應(yīng)用的開(kāi)發(fā)、測(cè)試、發(fā)布、管理和運(yùn)營(yíng)的全生命周期管理。
2、PhoneGap
PhoneGap是一個(gè)免費(fèi)且開(kāi)源的開(kāi)發(fā)環(huán)境，使開(kāi)發(fā)者可以開(kāi)發(fā)出在Android、Palm、黑莓、iPhone、iTouch及iPad等設(shè)備上運(yùn)行的App。其使用的是HTML和JavaScript等標(biāo)準(zhǔn)的Web開(kāi)發(fā)語(yǔ)言。開(kāi)發(fā)者使用PhoneGap進(jìn)行開(kāi)發(fā)，可調(diào)用加速計(jì)、GPS/定位、照相機(jī)、聲音等功能。
PhoneGap還提供Adobe AIR App以及在線的培訓(xùn)課程，幫助開(kāi)發(fā)者了解原生API并在他們自己的平臺(tái)上開(kāi)發(fā)移動(dòng)App。
4、NativeScript
NativeScript是使用移動(dòng)平臺(tái)的JavaScript引擎來(lái)進(jìn)行跨平臺(tái)開(kāi)發(fā)。邏輯部分自然無(wú)需多說(shuō)，關(guān)鍵在于如何使用平臺(tái)特性。NativeScript是通過(guò)反射得到所有平臺(tái)API，預(yù)編譯它們，然后將這些API注入到JavaScript運(yùn)行環(huán)境，接下來(lái)在Javascript調(diào)用后攔截這個(gè)調(diào)用，并運(yùn)行native代碼。NativeScript是使用大量web開(kāi)發(fā)的技巧來(lái)進(jìn)行app開(kāi)發(fā)，因?yàn)楣ぞ哝満驼Z(yǔ)言都非常熟悉受到了很多前端開(kāi)發(fā)者的歡迎。
5、Kinvey
Kinvey同樣是一個(gè)為移動(dòng)應(yīng)用開(kāi)發(fā)者提供后臺(tái)創(chuàng)建服務(wù)的平臺(tái)。Kinvey強(qiáng)調(diào)加速移動(dòng)應(yīng)用開(kāi)發(fā)與銷售的“即取即用”理念。Kinvey的中間層與數(shù)據(jù)層均托管在多個(gè)云服務(wù)提供商處，包括Rackspace、Amazon與Microsoft。所有通過(guò)Kinvey存儲(chǔ)的數(shù)據(jù)都會(huì)有四種方式備份：Amazon EC2、Windows Azure、Rackspace以及Kinvey自己的服務(wù)器，假如其中一兩個(gè)出現(xiàn)了故障，用戶的數(shù)據(jù)依然安然無(wú)恙。
總結(jié)：
關(guān)于HTML5和原生App的爭(zhēng)論一直在繼續(xù)，不論最后誰(shuí)能取勝，開(kāi)發(fā)者更關(guān)心App的開(kāi)發(fā)速度和最終體驗(yàn)。合理的使用工具會(huì)讓開(kāi)發(fā)效率大大提升，甚至達(dá)到事半功倍的效果，希望能有一款適合您。
期待未來(lái)有一天，App開(kāi)發(fā)可以像在紙上畫(huà)畫(huà)一樣簡(jiǎn)單。
聲明：IT之家網(wǎng)站刊登/轉(zhuǎn)載此文出于傳遞更多信息之目的，并不意味著贊同其觀點(diǎn)或論證其描述。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
