word转为html依赖mammoth.js(缺点是只能保留基础样式,word的复杂样式会丢失。复杂文件还是交给接口处理比较好)
预览本地文件Demo: https://jstool.gitlab.io/zh-cn/demo/preview-ms-word-docx-document-in-browser
从服务端获取word并实现预览:
//引入mammoth.js类库文件
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.4.9/mammoth.browser.min.js"></script>
<script type="text/javascript">
function preView(url) {
var _this = this;
var xhr = new XMLHttpRequest()
xhr.open('GET', urlStr, true);
// 获取二进制流的数据
xhr.responseType = 'blob';
xhr.onload = function(res) {
if (this.status === 200) {
var type = xhr.getResponseHeader('Content-Type');
var blob = new Blob([this.response], {
type: type});
var reader = new FileReader();
reader.onloadend = function(event) {
var arrayBuffer = reader.result;
// 将二进制数据交给mammoth处理
mammoth.convertToHtml({
arrayBuffer: arrayBuffer})
.then(function (resultObject) {
document.body.innerHTML = resultObject.value
})
};
reader.readAsArrayBuffer(blob);
}
}
xhr.send()
}
preView('http://192.168.10.20:4200/test.docx')
</script>