今年年初review同事代码时,看到同事在做一个文档预览的功能,需要预览docx、xlsx、pdf文件,本来想着这都2023年了,应该是很成熟的功能,没想到代码却很复杂,于是萌生了做一个最简单的预览组件,经过一通捣鼓,站在前人的预览库基础上,做出了一套Vue文档预览组件vue-office,使用非常简单,传递一个src即可完成文档预览。
以docx文档预览为例,看看这个组件使用是不是超简单。
<template>
<vue-office-docx :src="docx" @rendered="rendered"/>
</template>
<script>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
export default {
components:{
VueOfficeDocx
},
data(){
return {
docx: 'http://static.shanhuxueyuan.com/test6.docx' //设置文档地址
}
},
methods:{
rendered(){
console.log("渲染完成")
}
}
}
</script>
相比前人的预览库,使用上简化了很多,让小白用户都能很快完成office文档的预览,也因此在短短7个月的时间收获了 700+ star。
这个库使用很简单,但是只能用在Vue项目中,而且由于考虑兼容Vue2和Vue3,还会在一些版本中出现一些打包问题,不是很好解决,于是经过周末再一通捣鼓,在原来的基础上开发出了一个js版本的预览库:js-preview,还是坚持之前的原则,使用一定要简单,要对小白用户友好,同时考虑各种使用场景(包括对ts的支持),来看下这个是不是你想要的。
docx文件预览
- 安装依赖库
# docx文件预览库
npm i @js-preview/docx
- 预览
import jsPreviewDocx from "@js-preview/docx";
import '@js-preview/docx/lib/index.css'
//初始化时指明要挂载的父元素Dom节点
const myDocxPreviewer = jsPreviewDocx.init(document.getElementById('docx'));
//传递要预览的文件地址即可
myDocxPreviewer.preview('https://501351981.github.io/vue-office/examples/dist/static/test-files/test.docx').then(res=>{
console.log('预览完成');
}).catch(e=>{
console.log('预览失败', e);
})
excel文件预览
- 安装依赖库
# docx文件预览库
npm i @js-preview/excel
- 预览
import jsPreviewExcel from "@js-preview/excel";
import '@js-preview/excel/lib/index.css';
const myExcelPreviewer = jsPreviewExcel.init(document.getElementById('excel'));
myExcelPreviewer.preview('https://501351981.github.io/vue-office/examples/dist/static/test-files/test.xlsx').then(res=>{
console.log('预览完成');
}).catch(e=>{
console.log('预览失败', e);
})
pdf文件预览
- 安装依赖库
# docx文件预览库
npm i @js-preview/pdf
- 预览
import jsPreviewPdf from "@js-preview/pdf";
const myPdfPreviewer = jsPreviewPdf.init(document.getElementById('pdf'));
myPdfPreviewer.preview('https://501351981.github.io/vue-office/examples/dist/static/test-files/test.pdf').then(res=>{
console.log('预览完成');
}).catch(e=>{
console.log('预览失败', e);
})
总结
可以看出,三个库采用同一套API,首先进行init初始化,传递预览要挂载的Dom,init返回文件预览对象,通过调用文件预览对象的preview方法,传递要预览的文档地址,preview方法返回Promise,可监听预览成功还是失败。
preview不仅支持接收文档地址,也支持接收文件ArrayBuffer格式数据,这样可以在一些上传场景进行预览。
这样进行文档预览是你想要的吗?如果有好的想法欢迎评论进行讨论。
如果能解决您的问题,麻烦各位大佬点个赞,为了这个项目真的是花费了好多个周末时间~~ github.com/501351981/v…