在项目中有时候会需要在浏览器端打开docx文件,一开始想这个功能很让人头疼,PDF文件在浏览器端很好实现预览,但是纯前端如何实现docx文件预览呢,想了一下决定用第三方库配合二进制下载来实现,这是最简单的方式,上代码!!!
第一步、下载依赖库vue-office/docx
//下载依赖库
npm i vue-office/docx
第二步、写一个二进制下载方法(如果文件路径不需要特殊处理的话不需要这一步,直接看第四步)
let base64 = require('js-base64').Base64;
export function download(option, filename, callBack) {
const xhr = new XMLHttpRequest();
xhr.open('get', option.url);
var userName = window.wConfig.yjyaName//认证用户名
var passwd = window.wConfig.yjyapasswd//认证密码
var authorization = userName + ':' + passwd;
var authorizationBase64 = base64.encode(authorization);//加密
xhr.setRequestHeader("Authorization", "Basic " + authorizationBase64);//设置请求头
xhr.responseType = 'blob';//设置响应类型为blob
xhr.send();
xhr.onload = function () {
if (this.status === 200 || this.status === 304) {
callBack(this.response);
}
};
}
第三步、需要二进制下载后的页面使用
<template>
<vue-office-docx :src="docx" @rendered="rendered" />
</template>
<script>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx';
// 引入二进制下载方法
import { download } from '../utils/download';
export default {
components: {
VueOfficeDocx
},
data() {
return {
docx: null, //设置文档地址
}
},
beforeRouteEnter(to, from, next) {
next(vm => {
vm.fileName = vm.$route.query.fileName;
})
},
mounted() {
let url = window.wConfig.postBaseUrl + this.fileName
//二进制下载方法
download({
url: url
}, this.fileName, (data) => {
const blob = new Blob([data], {
//docx的MIME的类型
type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
})
this.url = URL.createObjectURL(blob);//二进制下载后的连接
this.docx = this.url//不需要二进制下载文件的话直接把文件路径赋值就行
})
},
methods: {
rendered() {
console.log("渲染完成")
}
}
}
</script>
第四步、不需要二进制下载的页面使用
<template>
<vue-office-docx :src="docx" @rendered="rendered" />
</template>
<script>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx';
export default {
components: {
VueOfficeDocx
},
data() {
return {
docx: null, //设置文档地址
}
},
mounted() {
this.docx = "文件地址"
},
methods: {
rendered() {
console.log("渲染完成")
}
}
}
</script>
第五步、效果预览
这个功能就做好了 欢迎各位同学留言指正。