撸个插件给你word-to-html

CntChen 发布于2019-08-26 10:13 / 2005人阅读

摘要：最近遇到一个需求，需要将非常多内容的文字表格文档展示出来，这个需求出现在端就用插件好了或者直接下载文件如果需求是在移动端呢怎么办转成吧。。。下面是判断是否是非浏览器方法载入字符串对象解析文本并返回一个对象。

最近遇到一个需求，需要将非常多内容的（文字/表格）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云服务器给你个插件工具插件清理日历插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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