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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值