内网实现方法:
需要下载两个插件,一定要注意!!

npm i docx-preview@0.1.4

npm i jszip

正文中引入

<div ref="preview"  id="preview" ></div>
<script>
	let docx = require("docx-preview");
	window.JSZip = require("jszip");
	
    // 查看文档按钮
    handleFile(row) {
		 this.getDocx() .then((response) => {
		          console.log(response);  // response为流文件
		          docx.renderAsync(response.data, this.$refs.preview);
		           // 渲染到页面(着重注意 this.$refs.preview要和<div ref="preview"></div>保持一致)
		        })
		        .catch(function (error) {});
	}
</script>

外网:
可以用下面这种方式:

<iframe
	:src="`https://view.officeapps.live.com/op/view.aspx?src=${downloadUrl}`"
 	width="100%"
	:height="height"
	frameborder="1"
>

有时候使用这种方式会遇到下面提示:
在这里插入图片描述

不要因此就直接放弃这种方式,好好找找原因。我这边遇到该情况的原因是因为本地DNS不解析该链接,后将DNS改为

dns: 101.198.198.198
      114.114.114.114

完美的解决了该问题。
好了,可以轻松实现文档预览啦

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐