js实现word转换为html

news/2024/7/24 13:31:26 标签: javascript, html5

前言

最近接到一个需求,实现上传一个word文档,然后将该word转换成html丢给服务端存上。进行技术调研后发现有三种方法可以实现这个功能:ActiveXObjectdocx2htmlmammoth

IE的 ActiveXObject

    var oWordApp=new   ActiveXObject("Word.Application");      
    var oDocument=oWordApp.Documents.Open("C://test.doc");      
    oDocument.SaveAs("C://test.html", 10)     

缺点:只有IE才有这个东西

docx2html

Git地址:https://github.com/lalalic/docx2html

使用方法:

// html 部分
<input type="file" @change="handleFileSelect">
<textarea id="text"></textarea>

// js部分
handleFileSelect(event){
	require("docx2html")(event.target.files[0]).then(function(converted){
		console.log(converted)
		document.querySelector('textarea').value=converted.toString()
	})
}

缺点:只能将简单的docx文件转化成html,复杂点的就报错了,如图:

mammoth.js

Git地址:https://github.com/mwilliamson/mammoth.js

中文文档地址:https://www.helplib.com/GitHub/article_106969

使用方法:

javascript">    //html:部分
    <div class="container">
      <input id="document" type="file" @change="handleFileSelect" />
      <div class="row">
        <div class="span8">
          <div id="output" class="well">
          </div>
        </div>
        <div class="span4">
          <h3>Messages</h3>
          <div id="messages">
          </div>
        </div>
    </div>
	</div>
 //js:部分
     handleFileSelect(event) {
        this.readFileInputEventAsArrayBuffer(event,  (arrayBuffer) => {
            mammoth.convertToHtml({arrayBuffer: arrayBuffer})
                .then(this.displayResult)
                .done();
        });
    },

    displayResult(result) {
		console.log(result)
        document.getElementById("output").innerHTML = result.value;

        var messageHtml = result.messages.map((message) => {
            return '<li class="' + message.type + '">' + this.escapeHtml(message.message) + "</li>";
        }).join("");

        document.getElementById("messages").innerHTML = "<ul>" + messageHtml + "</ul>";
    },

    readFileInputEventAsArrayBuffer(event, callback) {
        var file = event.target.files[0];

        var reader = new FileReader();

        reader.onload = function(loadEvent) {
            var arrayBuffer = loadEvent.target.result;
            callback(arrayBuffer);
        };

        reader.readAsArrayBuffer(file);
    },

    escapeHtml(value) {
        return value
            .replace(/&/g, '&amp;')
            .replace(/"/g, '&quot;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
    },

缺点:只支持docx的word文档,并且转换后的标题没有居中,如图:


http://www.niftyadmin.cn/n/1514846.html

相关文章

vue使用sass实现主题换肤功能

本文只介绍深浅两种主题换肤作为参考。 1.创建配置动态样式的scss文件&#xff0c;路径为/src/assets/scss/_theme.scss。 $themes: (light: (//字体font_color1: #000,//背景background_color1: #fff,// 背景渐变background_gradient1:#F8FBFD ,//边框border_color1: #e8ebf0…

[Antd-vue] Warning: You cannot set a form field before rendering a field associated with the value.

1.需求&#xff1a;给form表单反显数据&#xff08;一般用于数据修改功能&#xff09;。 2.使用了表单的方法setFieldsValue()&#xff0c;来设置一组输入控件的值&#xff0c;传入的值为object&#xff08;能少传不能多传&#xff09;。 3.解决办法 this.$nextTick(()>{th…

实验记录resnet20/cifar100

Cifar100 / resnet20&#xff1a; 1、Baseline Namespace:(batch_size128, decay0.0003, epoch200, gammas[0.1, 0.1, 0.5], learning_rate0.1, momentum0.9, optimizerSGD, schedule[80, 120, 160]) Best acc: 68.85% 80 和 120 是拐点 2、batch_size, gammas Namespa…

ant-design-vue的select组件加入value后placeholder不显示

导致placeholder不显示原因&#xff1a; value为nullvalue为空未获取到value 解决办法&#xff1a; value设置为undefined <a-select v-model"formDate.disabled" placeholder"请选择是否停用" style"width:160px"><a-select-option va…

在vue中实现禁止屏幕滚动,禁止屏幕滑动

1.需求&#xff1a;当如图弹框的内容滚动/滑动时&#xff0c;遮罩层后边的内容静止不动。 2.代码 <div v-show"isShow" touchmove.prevent mousewheel.prevent></div>这个div是遮罩组件的根组件&#xff0c;核心就是div上的事件绑定。 touchmove 是…

搜索内容高亮显示

1.需求&#xff1a;实现搜索关键字高亮显示&#xff08;如上图&#xff09;。 2.方法&#xff1a;循环遍历数据&#xff0c;将匹配到的关键字插入对应的样式属性。 result.forEach( res > {res.title res.title.replace(searchContent, <span class"theme-color&qu…

vue中引入videojs

1.安装 npm install --save-dev video.js或者<link href"https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel"stylesheet"> <script src"https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js&…

vue-infinite-scroll

1.安装 npm install vue-infinite-scroll --save2.如果多处用到可以考虑在main.js中引入。如果只有单个页面使用&#xff0c;可以考虑在当前页中引入。 import infiniteScroll from vue-infinite-scroll import Vue from vue;&#xff08;当前页中须引入&#xff09; Vue.use…