word文档在线预览

移动互联网的到来，使得Word文档在移动端的显示成了问题。大家解决方法大概有三种：转换为PDF、用HTML模拟页面效果、纯网页效果。

1、使用微软的在线预览功能，更适合pc端

'https://view.officeapps.live.com/op/view.aspx?src=' + 文件链接

在线预览word、ppt、xls文件 (前提：资源必须是公共可访问的)

注意：最好通过encode处理一下url地址，可以使用encodeURIComponent()方法
这个文件的服务器地址必须是域名，不可以使用ip地址，且端口需要是80。

官方地址：https://www.microsoft.com/en-us/microsoft-365/blog/2013/04/10/office-web-viewer-view-office-documents-in-a-browser/?eu=true

	<div class="content">
		<iframe class="filename" id="pdfUrl" src="" frameborder='0' ></iframe>
	</div>
 
	let pdfBox = document.getElementById('pdfUrl');
	let office = 'https://view.officeapps.live.com/op/view.aspx?src='; // 微软插件 更适合pc
	let file = 'https://zhlsqs.obtdata.com/volunteer-army/public/volunteer-army.docx'
	pdfBox.src = office + file;

2、使用XDOC插件，兼容pc和移动端。

'http://view.xdocin.com/xdoc?_copyable=true&_toolbar=true&_xdoc=' + 文件链接

XDOC 将word文档实时转换为纯网页，生成的页面简洁，尤其对移动端的适配效果好。

XDOC可以实现预览以DataURI表示的DOC文档，此外XDOC还可以实现文本、带参数文本、html文本、json文本、公文等在线预览，具体实现方法请看官方文档（http://view.xdocin.com/）。

		//方法一：使用iframe。字体按钮大小受影响
		<div class="content">
	        <iframe class="filename" id="pdfUrl" src="" frameborder='0' ></iframe>
	    </div>
 
        let pdfBox = document.getElementById('pdfUrl');
        let office = 'http://view.xdocin.com/xdoc?_copyable=true&_toolbar=true&_xdoc='; // xdoc 适合移动端
        let file = 'https://zhlsqs.obtdata.com/volunteer-army/public/volunteer-army.docx'
        pdfBox.src = office + file;

        // 方法二：直接替换页面链接，不用iframe。更适应移动端，字体按钮大小不受影响
        let file = "https://zhlsqs.obtdata.com/volunteer-army/public/volunteer-army.docx";
        let office = "http://view.xdocin.com/xdoc?_xdoc=";
        let url = office + encodeURIComponent(file);

        //预览参数
        // let ops = {
   			// "_pdf": true, //word文档是否以pdf方式显示，默认false
            // "_watermark": "XDOC文档预览", //水印文本，显示水印
            // "_saveable": false, //是否允许保存PDF，默认true
            // "_printable": false, //是否允许打印PDF，默认true
            // "_copyable": false, //是否允许选择复制内容，默认true
            // "_toolbar": false, //是否显示底部工具条，默认true
            // "_title": "文档预览", //自定义标题
            // "_expire": 30, //预览链接有效期，单位分钟，默认永久有效
            // "_limit": 5 //限制页数，如：“5”表示只显示前5页，“2,5”表示从第2页开始的5页，对pdf/doc/docx/ppt/pptx有效
        // };
        // for (let a in ops) {
        //     url += "&" + encodeURIComponent(a) + "=" + encodeURIComponent(ops[a]);
        // }

        //开始预览
        window.location.href = url;