擼個插件給你word-to-html

CntChen 發布于2019-08-26 10:13 / 2051人閱讀

摘要：最近遇到一個需求，需要將非常多內容的文字表格文檔展示出來，這個需求出現在端就用插件好了或者直接下載文件如果需求是在移動端呢怎么辦轉成吧。。。下面是判斷是否是非瀏覽器方法載入字符串對象解析文本并返回一個對象。

最近遇到一個需求，需要將非常多內容的（文字/表格）word文檔展示出來，這個需求出現在pc端就用插件好了或者直接下載文件？如果需求是在移動端呢？怎么辦？轉成html吧。。。幾十頁的word怎么搞？為了造福大家，花了幾天時間擼了一個插件word-to-html,可以轉嵌套的表格，合并單元格的表格，github地址.

emmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm!
安利一波其他項目：

NodeNote，持續更新中react相關庫源碼淺析，
react ts3 項目

時間倉促，代碼寫得有點亂，這里貼一下reamde吧，誰用誰知道哈，如果解決給位的痛點，希望不要吝嗇您的star，非常歡迎提issue，大家一起討論完善。由于用到了jsdom，這個庫模擬出來的DOMpaser有點弱，如果你選擇在瀏覽器中用我的給的方法，你甚至能將word中每一行不同文字的字體字號都轉成對應的html，借助瀏覽器的js調試面板的源碼我放在了github上對應項目的test/browser文件夾中了。

下面是readme： word-to-html

A tiny tool to convert Microsoft Word document to HTML in Nodejs and in chrome,
you can use the tool convert tables with merged cells and nested tables to html file in Nodejs or chrome, the online tool wordhtml can not do this.
Beyond that, you can convert words with different font-family or font-size in a line to html string in chrome.

table example

example.html(mobile)

attention

If a line of words have different font-family or font-size in your .docx, it can not convert
your .docx to html expectly in nodejs, but this can fix in the browsers such as chrome. because
the npm package jsdom can not realize the DOMParser"s function perfectly.
So if you want to convert the font-family and font-size exactly, you can see how to use word2html.js in browsers!

Install

npm i word-to-html --save-dev

yarn add word-to-html

api in nodejs: word2html(absPath [,options])

absPath: string | Array

absPath is your file"s absolute path

options: {tdTextAlign:string,tdVerticalAlign:string}

tdTextAlign controls the tag"s text-align

tdVerticalAlign controls the tag"s vertical-align

Usage in nodejs

var path = require("path");
var word2html = require("word-to-html");
//Word document"s absolute path
var absPath = path.join(__dirname,"test.docx");
word2html(absPath,{tdVerticalAlign:"top"})

the html generated in your WorkSpace.

Usage in browsers

details in my github

step 1: Take the code in your html or your console panel as the global functions

step 2: Use the code to convert your .docx to xml sting in your .xml file

var admZip = require("adm-zip");
var fs = require("fs");
var path = require("path");
var resultList = [];
const tableName = [
    "test.docx" // replace your docx name here
];
tableName.forEach((item, index)=>{
    var absPath = path.join(__dirname,item);
    fs.exists(absPath, function(exists){
        if(exists){
            const zip = new admZip(absPath);
            var contentXml = zip.readAsText("word/document.xml");
            var len = item.length-1;
            var name = item.slice(0,len-4) + ".xml"
            fs.writeFileSync(name,contentXml)           
        }else{
            callback(resultList)
        }
    })
});

step 3: Take your .xml file"s string in variables str, and excute the code in your browser. the res is your html string, you can put it to the template html.

var str =`${your xml sting}`
var res = convert(loadXML(str));

step4:template example

html-body:

{res}

head:

GPU云服務器云服務器給你個插件工具插件清理日歷插件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105802.html

擼個插件給你word-to-html

摘要：最近遇到一個需求，需要將非常多內容的文字表格文檔展示出來，這個需求出現在端就用插件好了或者直接下載文件如果需求是在移動端呢怎么辦轉成吧。。。下面是判斷是否是非瀏覽器方法載入字符串對象解析文本并返回一個對象。 showImg(https://segmentfault.com/img/remote/1460000019821354?w=5000&h=2952); 最近遇到一個需求，需要將非...

zhjx922 2019-08-02 15:35 評論0 收藏0
沒事擼個插件玩1--預加載插件(f-preload)

摘要：模式用開發時記錄圖片的加載信息很熟悉吧下面的不知道的趕緊度娘一下吧預告下篇文章就寫這個插件我已經寫了差不多了是個懶加載插件具體細節先去看一吧倉庫重要的事情說三遍你的支持就是動力沒事擼個插件玩--預加載插件(f-preload) 原生無依賴，預加載插件插件名：f-preload 實現的主要功能: 1、批量預加載多個圖片 2、支持debug打印加載信息 3、支持加載完執行自定義回調函數...

nihao 2019-08-21 14:36 評論0 收藏0
手把手教你擼個vue2.0彈窗組件

摘要：組件結構同組件結構通過方法獲取元素的大小及其相對于視口的位置，之后對提示信息進行定位。可以用來進行一些復雜帶校驗的彈窗信息展示，也可以只用于簡單信息的展示。可以通過屬性來顯示任意標題，通過屬性來修改顯示區域的寬度。手把手教你擼個vue2.0彈窗組件在開始之前需要了解一下開發vue插件的前置知識，推薦先看一下vue官網的插件介紹預覽地址 http://haogewudi.me/k...

mrli2016 2019-08-20 18:36 評論0 收藏0
手把手教你擼個vue2.0彈窗組件

摘要：組件結構同組件結構通過方法獲取元素的大小及其相對于視口的位置，之后對提示信息進行定位。可以用來進行一些復雜帶校驗的彈窗信息展示，也可以只用于簡單信息的展示。可以通過屬性來顯示任意標題，通過屬性來修改顯示區域的寬度。手把手教你擼個vue2.0彈窗組件在開始之前需要了解一下開發vue插件的前置知識，推薦先看一下vue官網的插件介紹預覽地址 http://haogewudi.me/k...

taoszu 2019-08-29 13:07 評論0 收藏0