It's a vue component that will convert docx to HTML an annotate HTML.
docx 文件转换为 HTML,以及 HTML 的在线批注功能。
- javaScript convert docx to HTML
- annotate HTML online
- restore annotations from request
npm install --save docx-annotation
- jQuery
- mammoth
- rangy
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
}
}
<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>
<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>
<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>
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 |