vue 在线预览文档

最新推荐文章于 2025-07-07 16:17:52 发布

原创最新推荐文章于 2025-07-07 16:17:52 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

vue 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了四种在线预览Word和Excel文档的方法：1)officeweb查看器提供web接口直接预览；2)docx-preview是一个Vue.js组件，仅支持docx格式；3)mammoth.js是Node.js库，用于将docx转换为HTML；4)xdoc和usdoc提供了在线预览服务，xdoc支持更多定制选项但可能涉及费用，而usdoc提供了不同模式的预览服务。这些解决方案涵盖了免费和付费选项，适用于不同的开发需求。

1.office web查看器（word,excel）

使用方法：
https://view.officeapps.live.com/op/view.aspx?src=文件地址

2.使用docx-preview（仅支持docx）

使用方法：
npm i docx-preview -S

<template>
<div>
	<div ref="file"></div>
</div>
</template>

<script>
const docx = require("docx-preview");
export default {
	mounted(){
		axios({
            url//文档路径
            , method: 'GET'
            , responseType:'blob'
        }).then((response) => {
            if (response.status == 200) {
                docx.renderAsync(response.data, this.$refs.file); // 渲染到页面
            }
        }).catch(error => {
            console.log('error',error)
        })
	}
}
</script>

3.使用mammoth.js（仅支持docx）

使用方法：
npm i docx-preview -S

<template>
<div>
	<div id="wordView" v-html="vHtml"></div>
</div>
</template>

<script>
import mammoth from "mammoth";
export default {
	data(){
		return{
			vHtml:''
		}
	},
	mounted(){
		axios({
            url//文档路径
            , method: 'GET'
            , responseType:'arraybuffer'
        }).then((response) => {
        	var vm = this
            if (response.status == 200) {
                mammoth
                 .convertToHtml({ arrayBuffer: new Uint8Array(response.data) })
                 .then(function (resultObject) {
                     console.log('resultObject',resultObject)
                     vm.$nextTick(() => {
                         // document.querySelector("#wordView").innerHTML = resultObject.value;
                         vm.vHtml = resultObject.value;
                     });
                 });
            }
        }).catch(error => {
            console.log('error',error)
        })
	}
}
</script>

4.使用xdoc文档在线预览服务（收费服务）

http://view.xdocin.com/
在这里插入图片描述
使用方法：
https://view.xdocin.com/view?src=你的文档地址

可选参数：
&pdf=true，word文档尝试以pdf方式显示，默认false
&img=true，尝试以图片方式显示，默认false
&watermark=水印文本，显示文本水印；“img:”+图片url表示图片水印，如：img:https://view.xdocin.com/demo/wm.png
&saveable=true，是否允许保存源文件，默认false
&printable=false，是否允许打印，默认true
&copyable=false，是否允许选择复制内容，默认true
&toolbar=false，是否显示底部工具条，默认true
&title=自定义标题
&expire=30，预览链接有效期，单位分钟，默认永久有效
&limit=，限制页数，如：“5”表示只显示前5页，“2,5”表示从第2页开始的5页，对pdf/doc/docx/ppt/pptx有效
&filename=文件名，辅助识别文档格式
&fontsize=字体大小(单位px)，默认14，范围:6~58
&mtime=文件修改时间戳（如：1633093801，精确到秒）或修改时间（如：2021-10-01 21:10:01），值改变刷新缓存