js实现从服务端获取word并预览

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>

Guess you like

Origin blog.csdn.net/PGD_607/article/details/106046982