1 安装vue-office
vue-office是一个支持多种文件(docx、.xlsx、pdf)预览的vue组件库,支持vue2和vue3
#docx文档预览组件
npm install @vue-office/docx vue-demi
#excel文档预览组件
npm install @vue-office/excel vue-demi
#pdf文档预览组件
npm install @vue-office/pdf vue-demi
注意:如果控制台报错,可能是vue版本<=2.6,需安装依赖 @vue/composition-api
npm install @vue/composition-api
2 使用
(1)docx文件预览
目前支持docx文件预览,不支持doc文件。
可以设置组件的style配置样式,通常需要设置下高度height,如果不设置则默认取组件的父元素高度,最小高度300px。
组件渲染完成会抛出rendered事件,渲染失败会抛出error事件。
<template>
<vue-office-docx
:src="docx"
style="height: 100vh;"
@rendered="renderedHandler"
@error="errorHandler"
/>
</template>
<script>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'
export default {
components: {
VueOfficeDocx
},
data() {
return {
docx: 'http://static.shanhuxueyuan.com/test6.docx' //设置文档网络地址,可以是相对地址
}
},
methods: {
renderedHandler() {
console.log("渲染完成")
},
errorHandler() {
console.log("渲染失败")
}
}
}
</script>
(2) 预览excel:xlsx文件预览
目前只支持xlsx文件预览,不支持xls文件。
<template>
<vue-office-excel
:src="excel"
style="height: 100vh;"
@rendered="renderedHandler"
@error="errorHandler"
/>
</template>
<script>
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'
export default {
components: {
VueOfficeExcel
},
data() {
return {
excel: 'http://static.shanhuxueyuan.com/demo/excel.xlsx'//设置文档地址
}
},
methods: {
renderedHandler() {
console.log("渲染完成")
},
errorHandler() {
console.log("渲染失败")
}
}
}
</script>
(3) 预览pdf
<template>
<vue-office-pdf
:src="pdf"
@rendered="renderedHandler"
@error="errorHandler"
/>
</template>
<script>
//引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf'
export default {
components: {
VueOfficePdf
},
data() {
return {
pdf: 'http://static.shanhuxueyuan.com/test.pdf' //设置文档地址
}
},
methods: {
renderedHandler() {
console.log("渲染完成")
},
errorHandler() {
console.log("渲染失败")
}
}
}
</script>
(4)上传文件预览
ElementUI的上传组件作为示例,当然也可以使用普通的input type=”file”
<template>
<div id="docx-demo">
<el-upload
:limit="1"
:file-list="fileList"
accept=".docx"
:beforeUpload="beforeUpload"
action=""
>
<el-button size="small" type="warning">点击上传</el-button>
</el-upload>
<vue-office-docx :src="src"/>
</div>
</template>
<script>
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'
export default {
components: {
VueOfficeDocx
},
data() {
return {
src: '',
fileList: []
}
},
methods: {
//在beforeUpload中读取文件内容
beforeUpload(file) {
let reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = (loadEvent) => {
let arrayBuffer = loadEvent.target.result;
this.src = arrayBuffer
};
return false
}
}
}
</script>
如果是原生的input type=”file”,也是类似的
<template>
<div>
<input type="file" @change="changeHandle"/>
<vue-office-docx :src="src"/>
</div>
</template>
<script>
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'
export default {
components: {
VueOfficeDocx
},
data() {
return {
src: ''
}
},
methods: {
changeHandle(event) {
const fileBlob = e.target.files[0]
// 第一种方式(通过window.URL.createObjectURL将Blob文件流转为一个路径)
this.src = window.URL.createObjectURL(new Blob([fileBlob]))
// 第二种方式(转为base64编码)
const fileReader = new FileReader()
fileReader.readAsDataURL(fileBlob)
fileReader.onload = e => {
this.src = e.target.result
}
// 第三种方式(获取到buffer)
fileBlob.arrayBuffer().then(buffer => {
this.src = buffer
})
}
}
}
</script>