pwli0755 / docx-annotation

It's a vue component that will convert docx to html and annotate html

docx-annotation

It's a vue component that will convert docx to HTML an annotate HTML.

docx 文件转换为 HTML,以及 HTML 的在线批注功能。

Features

1. javaScript convert docx to HTML
2. annotate HTML online
3. restore annotations from request

How to use ?

npm install --save docx-annotation

dependencies

1. jQuery
2. mammoth
3. rangy

online demo

online demo

custom rangy library

Highlighter.prototype = {
  /**
   * restore selected text
   * @param {Object} item
   * @param {Object} applier
   * @param {String} containerElementId
   */
  addHighlight: function(item, applier, containerElementId) {
    var characterRange = new CharacterRange(+item.start, +item.end)
    var highlight = new Highlight(
      this.doc,
      characterRange,
      applier,
      this.converter,
      item.id,
      containerElementId
    )
    highlight.apply()
    this.highlights.push(highlight)
    return highlight
  }
}

request file example

<template>
  <docx-annotation @convert-start="convertStart" @convert-end="convertEnd" v-model="requestList" ref="annotationRequest" />
</template>
<script>
  export default {
    data(){
      return {
        requestList:[]
      }
    },
    mounted() {
      axios({ method: "get", url: filePath, responseType: "arraybuffer" }).then(
        ({ data }) => {
          this.$refs.annotationRequest.wordToHtml(data)
        }
      )
    },
    methods:{
       convertStart(){
          console.log('convert-start')
        },
        convertEnd(){
          console.log('convert-end')
        }
    }
  }
</script>

advanced example

<template>
  <docx-annotation
    @convert-start="convertStart" @convert-end="convertEnd" v-model="advancedList"
    :click-scroll="true"
    ref="annotationAdvanced"
  />
</template>
<script>
  export default {
    data(){
      return {
        advancedList:[]
      }
    },
    mounted() {
      axios({ method: "get", url: filePath, responseType: "arraybuffer" }).then(
        ({ data }) => {
          this.$refs.annotationRequest.wordToHtml(data)
        }
      )
    },
    methods:{
       convertStart(){
          console.log('convert-start')
        },
        convertEnd(){
          console.log('convert-end')
        }
    }
  }
</script>

input file example

<template>
  <docx-annotation @convert-start="convertStart" @convert-end="convertEnd" v-model="inputList" ref="annotationInput" />
</template>
<script>
  export default {
    data(){
      return {
        inputList:[]
      }
    },
    mounted() {
      let _this = this
      $("#input-file-container").bind("change", function(event) {
        let file = event.target.files[0]
        let reader = new FileReader()
        reader.onload = function(loadEvent) {
          let arrayBuffer = loadEvent.target.result
          _this.$refs.annotationInput.wordToHtml(arrayBuffer)
        }
        reader.readAsArrayBuffer(file)
      })
    },
    methods:{
       convertStart(){
          console.log('convert-start')
        },
        convertEnd(){
          console.log('convert-end')
        }
    }
  }
</script>

Options

Property	Description	type	default
value	comment list	Array	[]
clickScroll	scroll to docx content	Boolean	false

Event	Description
convert-start	start convert docx to HTML
convert-end	convert end