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